概要説明
郵便番号を入力するとフォームの住所が自動入力される機能をWordPressのContact Form 7で実装。資料請求フォームなどで活用できるカスタマイズ。
script ファイルの読み込み
functions.php
/*----------------------------------------------------
郵便番号から住所を自動で入力(お問い合わせページ用)
----------------------------------------------------*/
if ( !function_exists( 'my_script_contact' ) ){
function my_script_contact() {
wp_enqueue_script( 'ajaxzip3', 'https://ajaxzip3.github.io/ajaxzip3.js' );
wp_enqueue_script( 'page-contact', get_template_directory_uri() . '/js/contact.js');
}
add_action( 'wp_enqueue_scripts', 'my_script_contact' );
}
contact.js ファイルを新規作成してアップロード
contact.js
jQuery(function($){
$( '#zip' ).keyup( function() {
AjaxZip3.zip2addr( this, '', 'prefecture', 'address' );
});
});
Contact Form 7 フォーム設定
<label> 郵便番号
[text zip id:zip] </label>
<label> 都道府県
[select prefecture "--" "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県" ]</label>
<label> 住所
[text address] </label>
フォーム確認
郵便番号を入力して自動的に住所が設定されるかを確認
