こんにちは！
上毛印刷WEB制作担当のソーヤです。

皆さんは普段WEBサイトでお問い合わせフォームを利用していますか？
ネットで買い物をしたことある方なら、ほぼほぼ必ず利用したことがあると思います。

ちなみに当サイトにもお問い合わせフォームがあります。
ここのページです。

最近よく見かける、「住所検索」のボタンを押すと入力した郵便番号から自動的に住所を補完してくれるボタンがありますね。
これのWordPressでの実装方法についてご紹介していこうと思います。

Contact Form 7

まず一番有名なお問い合わせフォームプラグイン「Contact Form 7」をインストールします。

そうしたらContact Form 7の管理画面でフォームのHTMLを記述していきます。
こんな感じです。↓

これだとわかりづらいので、必要な部分だけ抽出するとこんな感じです。

<dl>
    <dt>郵便番号<span>必須</span></dt>
    <dd>
        <div>
            <span>〒</span>
            <span>[text* post placeholder "171-0022"]</span>
            <span><a id="js-zip">住所検索</a></span>
        </div>
    </dd>
</dl>
<dl>
    <dt>都道府県<span>必須</span></dt>
    <dd>
        <div>[select* todoufuken id:js-select first_as_label "選択してください" "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県"]</div>
    </dd>
</dl>
<dl>
    <dt>市区町村・番地等<span>必須</span></dt>
    <dd>[text* city placeholder "市区町村をご記入ください"]</dd>
</dl>

ここで重要なのが、住所自動補完をするためのボタンと「郵便番号」と「都道府県」と「市区町村・番地等」のname属性をしっかりと設定することです。

ajaxzip3

では次に住所自動補完ライブラリ「ajaxzip3」を使用していきたいと思います。

<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>

をjsファイルの手前に記述してください。
そうしたら次に、jsファイルにこう記述してください。↓

 jQuery(function(){
   jQuery(document).on('click','#js-zip',function(){
    AjaxZip3.zip2addr('post', '', 'todoufuken', 'city');
  });

AjaxZip3.zip2addrの第一引数に郵便番号のname属性「post」、第二引数は空にしてください。（郵便番号のフィールドを二つに分割する際は記述必須です）
第三引数は都道府県のname属性「todoufuken」、第四引数は市区町村・番地等のname属性「city」を記述してください。

これで完成です！

まとめ

結構簡単ですよね。
ガンガンコピペして使ってください！！