お問い合わせフォームを使って申し込みを行うときに、郵便番号を入力したら自動的に住所が入力される機能ってありますよね。
この郵便番号から住所が自動入力される機能が当たり前になっている最近はとても便利だな〜と思う反面、自動で入力されないフォームだったりするとユーザビリティ低くてめんどくせ〜と思っちゃったりするんですよね（笑）
実はこの機能、難しいスクリプトやphpの記述などは全くいらなくて、以外とかんたんに導入できるんです。
今日はその方法をお伝えしていきたいと思います！
Contact Form7に郵便番号から住所を自動入力する「YubinBango」ライブラリ
Contact Form 7に郵便番号を入力したら自動で住所を反映させる機能を導入するには、GitHub公開されている「YubinBangoライブラリ」を使います。
このYubinBangoライブラリはclassを指定するだけで自動入力させることができるという
超カンタン仕様！だれでもかんたんに使えるってなんてステキなんでしょうね!
それではさっそく設定してみましょう^ ^
YubinBangoライブラリを読み込む
まずはスクリプトライブラリを読み込んで郵便番号が自動入力で使えるように準備をしていきましょう。ライブラリを読み込む方法はfunction.phpへ書き込む方法と、scriptタグで読み込む方法の２種類あります。どちらでも構いませんがwordpressの方は基本的にfunction.phpへの記述で良いと思います。
functions.phpで読み込む方法
以下のコードをwordpressのfunction.phpに追記して保存します。
wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );Scriptタグで読み込む場合
以下のコードをwordpressのテンプレートに貼り付けて保存します。
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>フォーム内に国名を記述する
次に国名を判別するためにJapanを入力します。
下記のコードをコンタクトフォーム内にコピペします。場所はどこでもOKですが郵便番号のinputの近くのほうがわかりやすいと思います。
<span class="p-country-name" style="display:none;">Japan</span>郵便番号入力欄にclass指定をする
郵便番号入力欄に p-postal-code のclass指定をします。
下記フォームタグ内にあるmaxlength:8というのは、郵便番号のハイフンを入れた8ケタの文字数を指定したのもです。ハイフンがいらない場合はmaxlength:7でも大丈夫です。
[text your-zip class:p-postal-code size:8 maxlength:8]
住所にクラスを指定する
住所欄は下記のように記述します。
ひとつの入力フォームに、住所を全部入れる場合は下記のように記述します。
[text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]入力欄を「都道府県」、「市町村」、というふうに分けたい場合は以下のように記述もできます。
[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]
クラス名の意味は
| p-region | 都道府県 |
| p-locality | 市区町村 |
| p-street-address | 町域 |
| p-extended-address | 以降の住所 |
となっています。
Contact Form 7貼り付け用ショートコードの中にクラスを設定する
[contact-form-7 id=“000” title="コンタクトフォーム名” html_class="h-adr"]最後にコンタクトフォームのショートコードを、コンタクトフォームを設置したい場所にコピペすれば完成です！
まとめ
おさらいします！
YubinBangoライブラリが有効になる条件は下記の通りとなります。
- scriptタグでYubinBangoライブラリが読み込まれていること
- formタグのclass指定の中に h-adr が含まれていること
- form中で、国名(p-country-name) が Japan に指定されていること
- 郵便番号入力欄のclass指定の中に p-postal-code が含まれていること
- 住所欄のclass指定の中に、都道府県名(p-region)、市町村区(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) がそれぞれ含まれていること
となっています。
はじめは難しいんじゃないかと思っていましたが、実はあっけないくらい短時間で導入できます。
ユーザーの利便性を高めるためには必須ともいえるこの住所自動入力。とてもかんたんにできますのであなたも是非チャレンジしてみてくださいね！
