2022.04.14
略してまけべん
Contact Form7で郵便番号から住所を自動入力（YubinBango）
コンタクトフォーム7に「郵便番号を入力すると自動的に住所が入力される機能」を追加します。
今回ご紹介する方法はプラグイン不要＆すごく簡単にできるのでおすすめです。
目次
「YubinBango」とは？
登録フォームに郵便番号を入力すると自動的に住所が入力してくれるJavascriptのライブラリです。
https://github.com/yubinbango/yubinbango
使い方
①YubinBangoライブラリを読み込む
function.phpに下記コードを貼り付けてください。
wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );②フォーム内で国名（Japan）を指定する
フォーム内に下記コードをどこでも良いので貼り付けてください。
<p class="p-country-name" style="display:none">Japan</p>③郵便番号にクラスを指定する
郵便番号入力欄のクラス指定の中に【p-postal-code】を入れます。
※【maxlength:8】は「最大8文字まで入力可能」の意味です。8文字にしておけばハイフンを入れても入れなくても動いてくれるので無難かと思います。
-------------------------------
郵便番号入力欄を1つの欄にする場合
-------------------------------
[text your-zipcode class:p-postal-code maxlength:8 size:8]
-------------------------------
郵便番号入力欄を2つの欄にする場合
-------------------------------
[text your-zipcode1 class:p-postal-code maxlength:3 size:3] - [text your-zipcode2 class:p-postal-code maxlength:4 size:4]④住所にクラスを指定する
住所入力欄のクラス指定の中に4つの住所クラスを入れます。
----------------------------------------
住所の入力項目がまとまっている場合
----------------------------------------
[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]⑤formタグにh-adrクラスを指定する
Contact Form7のショートコードの中に【html_class=”h-adr”】を追加してください。
[ contact-form-7 id="555" title="お問い合わせ" html_class="h-adr"]YubinBangoが有効になる条件まとめ
①YubinBangoライブラリが読み込まれていること
②フォーム内で国名がJapanに指定されていること
③郵便番号入力欄のクラス指定の中に【p-postal-code】が入っていること
④住所入力欄のクラス指定の中に【都道府県名（p-region）】【市町村区（p-locality）】【町域（p-street-address）】【以降の住所（p-extended-address）】が入っていること
⑤formタグにh-adrクラスを入っていること
