WordPressのプラグイン「Contact Form 7」で出力されたフォームをちょっとカスタマイズ──その②

メールフォームにおける住所の自動入力

メールフォームのカスタマイズ内容は以下のとおりで、今回は2番目の項目。他人様が作ったシステムにただ乗りする感じではあるけど「住所の一部を郵便番号を元に自動入力」について。

1. テキストフォーム、テキストエリアに表示される入力見本の文字色を統一
2. 住所の一部を郵便番号を元に自動入力
3. セレクト項目の文字色をテキストインプット部分、テキストエリアの色の変化に合わせる
4. チェックボックス、及びラジオボタンのON/OFFを分かりやすく＆スマホでもタップしやすく
5. ラジオボタンとテキスト入力の組み合わせ項目をできる限り分かりやすく
6. ファイルの添付のボタンをカスタマイズ
7. 利用規約に同意することで送信ボタンを活性化

ちなみに、サンプルページ・ソースの800行目～858行目までをWordPressの「Contact Form 7」にぶち込んでもらえれば、サンプルページと同じ内容のフォームが作成できる。

郵便番号の入力で住所（の一部）が自動入力されるフォームの作り方

WordPressで利用する場合は、functions.phpで「YubinBango」を読み込むように設定したが、今回のサンプルページは、前回の記事で言及しているようにWordPress上に出力されたフォームを通常のhtmlファイルに転載した状態なので、YubinBangoはサンプルページ・ソースの716行目の部分で読み込んでいる。

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

html側は、まずformに.h-adrというクラスを付与する。WordPressで使う場合には、問い合わせフォームを設置するためのショートコードにhtml_class="h-adr"を追加する事をお忘れなく。

ただ、色々と試してみたところ、formタグと.h-adrの組み合わせじゃなくてもフォームの各部位を内包するタグ、極論すればbodyタグに.h-adrが記載されていればOKのようだ。まぁ、今回のサンプルページを例に取れば、<ul class="form-fields">に.h-adrを追加しておけば、ショートコードへの追記を忘れてしまい自動入力が機能しなくて焦る、なんて事も防げるだろう。

次に、郵便番号の欄に隠し要素として<span class="p-country-name" style="display:none;">Japan</span>と記載し、続けて郵便番号のinputに、.p-postal-codeというクラスを付与する。都道府県のselectには.p-regionというクラスを与え、市区郡町村・丁目番地号のinputには.p-locality、.p-street-address、.p-address-numberの3つのクラスを追加する。建物・部屋番号のinputについては、.extended-addressを追加すればOK。

市区郡町村・丁目番地号は3つに分割して、付与するクラスもそれぞれに割り振ってもいいのだが、そうなると郵便番号によっては通常の市区郡町村や丁目、番地の想定とは違うカタチで自動入力されるものがあり、それと「必須」項目設定の関係で敢えて3つを1つにまとめている。

例えば、入力見本にしている東京都庁の住所だが、郵便番号に163-8001と入れると見本とは違う区切りで住所が自動入力されるw　市区郡町村・丁目番地号の欄には「新宿区西新宿」と入り、建物・部屋番号の欄には「２丁目８－１」と入る。つまり都庁の住所の場合、郵便番号検索ライブラリでは「２丁目８－１」という丁目番地の情報が、.extended-addressに紐付けされているのである（2019年12月現在）。

大規模なビルなどにはその周辺地域とは別の郵便番号が割り当てられる事があり、イレギュラーな紐付けがあることを前提にしている。項目名としては市区郡町村などよりも、住所1と住所2という表記、もしくは住所の入力欄は1つだけが齟齬がないかもしれない。しかし、ユーザーの入力内容をある程度コントロールしようと思うと、項目名は具体的な方がいいかなぁと思ったり思わなかったり。

そうそう、入力する郵便番号は、全角・半角の数字、ハイフン（全角・半角）の有無など想定できる入力状況全てで自動入力は反応してくれる。漢数字、ローマ数字は無理だけどw　厳密さを求めるのなら、別途JavaScriptなどで文字列を成形する必要があるだろう。今回はそこまでの厳密さは求めてないのでスルー。