【WordPress】Contact Form 7で郵便番号から住所を自動で入力する方法/プラグインなし
お問い合わせフォームcontact form 7で、郵便番号を入力すると自動で住所を表示させる方法の紹介です。
今回はプラグインを使わずに「YubinBango」というライブラリを使用した方法です。
contact form 7の導入方法はこちら
YubinBangoを読み込む
functions.phpに下記のコードをコピペして上書きします。
wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );フォーム編集画面でフォームタグ
contact form 7の編集画面のフォームタブ（HTML入力欄）で下記の３つのコードをコピペします。
1: 国を設定する
記述する場所はどこでも大丈夫です。
<span class="p-country-name" style="display:none;">Japan</span>2: 郵便番号入力用フォームタグ
下記フォームタグ内にあるminlength:8というのは、郵便番号をハイフンを入れた8ケタの文字数を指定したのもです。
ですので、ハイフンが要らない場合はminlength:7でも大丈夫です。
[text your-zipcode class:p-postal-code minlength:8 size:8]3: 住所用フォームタグを設定する
住所を表示（入力）する欄のフォームタグです。
[text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]フォームタグ内の各classの意味は下記の通りです。
| p-region | 都道府県 |
|---|---|
| p-locality | 市区町村 |
| p-street-address | 町域 |
| p-extended-address | 以降の住所 |
ショートコードを修正
最後にショートコードに
html_class="h-adr"
を追加します。
[contact-form-7 id="3298" title="コンタクトフォーム1" html_class="h-adr"]以上で完了です。
