《Wordpress》Contact Form 7で「ajaxzip3」を使って郵便番号で住所検索する。

入力フォームプラグイン「Contact Form 7」に、郵便番号を入力すると自動で住所を入力してくれる「ajaxzip3」を導入します。

読み込みはCDNから呼び出します。

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

郵便番号のフィールドの入力をトリガーとして探しに行くようにスクリプトを記述します。

メソッドの引数には、郵便番号と、出力先のname属性を記述します。

(function($) {
  $('#zip').keyup(function(){
    AjaxZip3.zip2addr(this, '', 'pref', 'address'); // .zip2addr(郵便番号（全てor3桁）, 郵便番号（下4桁）, 都道府県, 市区町村)
  })
})(jQuery);

WordPressの管理画面のコンタクトフォームの編集画面から以下のコードを入力します。

html.contactform7

[text zipcode id:zip]
[select pref "--" "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県" ]
[text address]

おわります。