【簡単】contact form 7に郵便番号から住所自動入力機能を入れる方法
お問い合わせフォームにwordpressのcontact form 7（コンタクトフォーム7）を使っている。
contact form 7に郵便番号を入れると住所が自動入力される機能を追加したい。
本記事ではYubinBangoプラグインを使って、このような悩みを解決します。
YubinBangoプラグインを導入
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
YubinBangoプラグインを導入すると住所自動入力が使えるようになります。
上記スクリプトをフォームを使用してるページテンプレートの最下部（body終了タグ手前）に配置してください。
ショートコードタグにクラスを付与
[contact-form-7 id="123" title="コンタクトフォーム 1" html_class="h-adr"]
コンタクトフォーム7を埋め込むショートコードにhtml_class=”h-adr”を付与します。
付与する事で、formタグにh-adrクラスを追加できます。
フォーム編集画面で国名を指定
<span class="p-country-name" style="display: none;">Japan</span>
contact form 7のフォーム編集画面で国名を指定したタグを追加します。
本記事では日本の住所を読み込みたいのでp-country-nameクラスが付与されたタグに中身がJapanと記述されたコードを追加します。
フォーム編集画面で郵便番号をいれるフィールドを作成
[text your-zipcode class:p-postal-code]
contact form 7のフォーム編集画面で郵便番号をいれたい場所にp-postal-codeクラスが付与されたショートコードを指定します。
郵便番号を区番号と町域番号で入力欄を二つに分けたい場合
[text your-zipcode1 class:p-postal-code]-[text your-zipcode2 class:p-postal-code]
郵便番号を区番号と町域番号で二つに分けた場合は上記のようにショートコードを二つ生成して、同じp-postal-codeクラスを付与すれば大丈夫です。
フォーム編集画面で自動入力される住所欄を作成
//都道府県名
[text your-region class:p-region]
//市町村名
[text your-locality class:p-locality]
//町域
[text your-street class:p-street-address]
//それ以降の住所
[text your-extended class:p-extended-address]
contact form 7のフォーム編集画面で自動入力される住所欄を作成します。
それぞれ以下クラスが付与されたショートコードを入れるとその場所に住所が自動入力されます。
都道府県名：p-regionクラスを付与
市町村名：p-localityクラスを付与
町域：p-street-addressクラスを付与
上記以降の住所：your-extendedクラスを付与
住所を一括で入れたい場合
[text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]
住所を入力欄を分けないで一括で入れたい場合は上記のようにclassプロパティを続けて付与すれば大丈夫です。
以上で郵便番号から住所を自動入力させるフォームの完成です。
まとめ
住所を自動入力させるプラグインはいくつかありますが、YubinBangoプラグインはCDNで実装できて導入がとても簡単でお勧めです。
contact form 7以外でも、もちろん使えるフォームはあるのでぜひ参考にしてみてください。
以上で解説を終わります。
