フォームテンプレート「Aozukin」

やや複雑なフォームのために、テンプレートを作成しました。

以前Abu al-Haulというものを作りましたが、既存のものとの親和性があまり良くなかったり色々あって使用の機会がありませんでした。

今回はそのときのノウハウを活かしつつ、その辺りの親和性も考えて折衷的なポジションに落ち着きました。

サンプル図

「Aozukin」フォーム部分
「Aozukin」フォーム部分

「Aozukin」確認モーダル
「Aozukin」確認モーダル

デザインは Bootratsp4 に丸投げ。

「Aozukin」メールサンプル(Mailtrap)
「Aozukin」メールサンプル(Mailtrap)

機能

  • 機能:
    • reCAPTCHA v2 使用フラグ: スパム対策で reCAPTCHA v2 を使用できるようにしました。 v3 はまだ未対応。
    • 郵便番号の補完: yubinbango/yubinbango を使用し、郵便番号の自動補完を行う機能を取り入れました
    • カレンダー: 日付入力に pickadate.js を使用
  • 開発効率化:
    • 設定ファイルでのカスタマイズ: フォーム項目の設定を外部に持たせ、設定ファイルを編集するだけでフォームの内容をある程度自動的に生成するような仕組みにしました。これは Abu al-Haul のアイディアを継承したものです。フォームの input タグを一々書くの、わりと面倒なので……(これのためにデザイン的な汎用性はなくなってしまうのは承知の上)。
    • Gulp との融合: フロント部分(Scss, JS)は Gulp でトランスパイルし、 Browsersync で自動リロードできるようにしました。
    • Mailtrap 使用フラグ: 開発中に確認しやすいように Mailtrap の使用フラグを持たせました。
    • バリデーション: 効率化のためにライブラリに頼りました。 JavaScript 側のバリデーションは validatorjs 、 PHP 側のバリデーションは vlucas/valitron を採用。

ざっとこんなところ。

名前の由来

名前は何の捻りもなく「青頭巾」そのまま。『雨月物語』ですね。

フォームなので何らかの”問いかけ”である、という発想は Abu al-Haul と同様。今回は洋の西ではなく東に材を求め、禅問答の発想から辿り着きました。

江月照松風吹 永夜清宵何所為

参考

JavaScript

validatorjs

pickadate

yubinbango

checkbox

その他

PHP

Twig

Valitron

その他

この記事を書いた人

アバター

アルム=バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。