お問い合わせフォームや予約フォーム、資料請求フォームなどをサイト内に作成する際、住所を入力を求める場合があります。
その際、郵便番号の入力が箇所があれば、郵便番号から住所を自動で表示できるような仕組みを実装しておくことで利用者の利便性の向上につながります。

今回は、お問い合わせフォームのプラグインとしてよく利用されているContact Form 7に導入した事例を紹介します。
その他のプラグインでは、MW WP Formでも同様の方法で導入することができます。

Contact Form７での準備

例として、Contact Form 7で以下のようにフォームを準備します。
郵便番号のzipに入力されたら、都道府県のaddress1と、市区町村address2が入力される様にします。

<p>お名前 [text your-name]</p>
<p>メールアドレス [email your-email]</p>
<p>郵便番号 [text zip]</p>
<p>都道府県 [select* address1 include_blank "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県"]</p>
<p>市区町村 [text address2] </p>
<p>番地・建物名 [text address3]</p>
[submit "送信"]

Javascript ライブラリを読み込む

郵便番号を入力した際の住所の自動入力として有名なJavascriptライブラリの「ajaxzip3」を読み込みます。

function script_ajaxzip3() {
    wp_enqueue_script( 'ajaxzip3', 'https://ajaxzip3.github.io/ajaxzip3.js', array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'script_ajaxzip3' );

ファイルをダウンロードして使用する場合は、こちらからダウンロードして読み込んでください。
https://github.com/ajaxzip3/ajaxzip3.github.io

Javascriptの記入

ライブラリを読み込んだ後は、フォームの入力項目に合わせてJavascriptを記入します。既に導入しているJavascriptに追加するかHTMLでフッターなどそれぞれの環境に合わせて記述してください。

jQuery(function( $ ) {
    jQuery( 'input[name="zip"]' ).keyup( function( e ) {
        AjaxZip3.zip2addr('zip','','address1','address2');
    } );
} );

これで準備は完了です。

あとは、それぞれの環境に合わせて変更してください。
例えば、郵便番号の入力を３桁ー４桁で分かれている場合は、zip2addrの第１引数と第２引数にそれぞれnameを指定してください。
また、都道府県と市区町村を分けない場合は、zip2addrの第３引数と第４引数のnameを同じに指定してください。