テクニカルノート

郵便番号を入力すると、自動で都道府県、市区町村　などが入力されるようにする方法です。

YubinBangoライブラリを利用させていただくことで、結構簡単に実現できちゃいます。
https://github.com/yubinbango/yubinbango

導入方法もとっても簡単で、ライブラリやプラグインなどダウンロードする必要もありません。

スクリプトの読み込み

まずは、外観 → テーマの編集 → header.php　を開いて、

を貼り付けます。 （もし、コンタクトフォームだけで読み込ませたいのなら、コンタクトフォーム用の固定ページを作って、header.phpを複製して、header-mailform.php　という名前に変えて、コンタクトフォーム用の固定ページテンプレートのget_headerで、get_header(‘mailform’)　と指定します。）  

コンタクトフォーム７の設定

お問い合わせ→新規追加　で新しいコンタクトフォームを作成します。
一行目に、以下のコードを入れます。

Japan

で、郵便番号、都道府県、市区町村、番地　の入力欄を付けたとすると、

郵便番号

 ［text postal-code class:p-postal-code] 

都道府県

 ［text address1 class:p-region] 

市区町村

 ［text address2 class:p-locality] 

番地以下

 ［text address3 class:p-street-address class:p-extended-address] 

のようにします。

class:p-postal-code というオプションを追加することで、inputタグに　class=”p-postal-code”　が追加されます。
 

[保存]ボタンをクリックして、コンタクトフォームの準備はOKです。

ショートコードをはりつける

固定ページなどにショートコードを貼り付けますが。。。

［contact-form-7 id="423" title="問合せ"］

このとき、html_class=”h-adr”　と入れます。

［contact-form-7 id="423" title="問合せ" html_class="h-adr"］

これは、formタグに　class=”h-adr” が追加されることを意味します。
これで、自動入力ができるようになるはずです。

こんなかんじ↓

まとめ

1.headタグ内に、スクリプトリンクをはりつける

2.コンタクトフォーム7の設定で、

Japan

を追加し、郵便番号、都道府県、市区町村、番地にクラスを設定する。 3.コンタクトフォームのショートコードをはりつける時、h-adrクラスを追加する。

［contact-form-7 id="423" title="問合せ" html_class="h-adr"］