Contact Form 7に、郵便番号による住所自動入力機能をつける テーマ販売あり

問い合わせフォームとかで郵便番号を入れたら自動で住所が入力されるやつ。
それをContact Form 7を使ってやってみましょう。

ajaxzip3.jsという外部ファイルとそれを制御するためのjsを読み込むために、テーマのfunctions.phpに以下を記述します。

add_action( 'wp_enqueue_scripts', 'my_ajaxzip3' );
function my_ajaxzip3() {
	wp_enqueue_script( 'ajaxzip3', 'https://ajaxzip3.github.io/ajaxzip3.js' );
}

add_action( 'wp_enqueue_scripts', 'autozip' );
function autozip() {
	wp_enqueue_script( 'autozip', get_stylesheet_directory_uri() . '/assets/js/autozip.js' );
}

次に /テーマディレクトリ/assets/js/ に、制御用のautozip.jsを置き、中身を以下の通り記載します。

jQuery(document).ready(function($){
  $("#zip").keyup(function(){
    var zip = $(this).parents('tr').next().find('input').attr('name');
    //郵便番号の次の入力項目を探してます

    AjaxZip3.zip2addr(this, '', zip, zip);
    //AjaxZip3.zip2addr( '〒上3桁', '〒下4桁', '都道府県', '市区町村' );
  });
});

完成です。
あとは、Contact Form 7の編集画面でこんな感じ（参考）で記述すれば完成です。

//前後省略
<tr>
<th>郵便番号（半角数字）
<span class="small">（例：104-6040）</span></th>
<td class="form">[ text* zip id:zip class:zip 20/20]
<span class="small">郵便番号を入れると自動的に住所が入力されます</span></td>
</tr>
<tr>
<th>ご住所 <span class="required">必須</span></th>
<td class="form">[ text* address1 id:address1 25/40]</td>
</tr>
<tr>
<th>番地・ビル・マンション名</th>
<td class="form">[ text address2 25/40]</td> //番地以降は手入力してもらいます
</tr>
//省略

※　[ のあとに半角スペース入れてますのでコピペの際はご注意
　
　
あるいは、入力フォームに名前を付けてあげて、名前指定で自動挿入してもいいですね。
autozip.js

jQuery(document).ready(function($){
  $("#zip").keyup(function(){
    AjaxZip3.zip2addr(this,'','pref','city');
    //AjaxZip3.zip2addr( '〒上3桁', '〒下4桁', '都道府県', '市区町村' );
  });
});

この場合のContact Form 7側の記述はこのようになります。

//前後省略
<tr>
<th>郵便番号（半角数字）
<span class="small">（例：104-6040）</span></th>
<td>[ text* zip id:zip class:zip 20/20]
<span class="small">郵便番号を入れると自動的に住所が入力されます</span></td>
</tr>
<tr>
<th>都道府県 <span class="required">必須</span></th>
<td>[ select* pref include_blank "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県"]</td>
</tr>
<tr>
<th>市区町村以降</th>
<td>[ text city 60/60]</td>
</tr>
//省略

※　[ のあとに半角スペース入れてますのでコピペの際はご注意

---

【この事例を解決するためのWordPressテーマを購入できます】

現在あなたが利用されているWordPressテーマを活かしたまま、このページの事例を解決できるWordPressテーマを、子テーマとして購入できます。
この子テーマを有効化するだけで、現在お使いのデザインテーマにこの事例解決の機能が自動付与されます。
デザインが入っていないため、一般より格段に低い価格（事例の難易度により200円～1.3万円）です。
※ テーマは買い切りです
※ 自由に改変してお使いいただいて構いません
※ すでに子テーマでサイト運用されている方は、当該子テーマをマージしてください