Contact Form 7 で郵便番号から住所を自動入力する

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

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

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

スクリプトの読み込み

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

の間に

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

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

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

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"]
    nakaike