WordPressカスタマイズ事例

Contact Form 7に、郵便番号による住所自動入力機能をつける

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

ajaxzip3.jsという外部ファイルとそれを制御するためのjs(後述)を読み込みます。
テーマのfunction.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_template_directory_uri() . '/assets/js/autozip.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>
//省略

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


その他のWordPressカスタマイズ事例