フォルダ
Contact Form7で郵便番号から住所を自動入力する方法
- 公開日：2013/9/4
Contact Form7といえば、WordPressでは定番のお問い合わせフォームです。このContact Form7で、郵便番号を入力したら住所が自動で表示されるようにする方法をメモしておきます。
ここでは、郵便番号も住所も入力欄がひとつのテキストフィールドの場合で考えます。
1. Contact Form7のフォームで作成した郵便番号にidを設定します
1 2 3 4 | <dt>郵便番号 <span class="red">(必須)</span></dt><dd>[[text* your-zip id:zip]]</dd><dt>ご住所 <span class="red">(必須)</span></dt><dd>[[text* your-address]]</dd> |
2. テーマテンプレートにJavaScriptを記述します
フォームにonKeyupイベントを追加するため、以下のスクリプトを追記します。
1 2 3 4 5 | $(function(){ $('#zip').keyup(function(event){ AjaxZip3.zip2addr(this,'','your-address','your-address'); })}) |
AjaxZip3の書式は次のようになっています。
AjaxZip3.zip2addr('〒上３桁', '〒下４桁', '都道府県', '市区町村', '町域大字', '丁目番地');
今回は郵便番号も住所も入力欄がひとつを前提にしていますが、準備されたフォームに合わせて対応が可能です。
例えば、郵便番号は入力欄が一つで住所が都道府県をそれ以下になっている場合：
AjaxZip3.zip2addr(this', '', 'pref', 'address');
3. jsファイルを配置します
jsファイルは以下から入手できます。
http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js
配置場所は今回はテーマフォルダ/js/jquery.wpcf7.ajaxzip3.js
4. functions.phpで読み込みます
functions.phpに以下を記述します。
1 2 3 4 5 6 7 8 9 10 11 12 | // 郵便番号から住所を自動入力するfunction cf7_ajaxzip3() { wp_enqueue_script( 'ajaxzip3', array('jquery')); wp_enqueue_script( 'wpcf7-ajaxzip3', get_stylesheet_directory_uri().'/js/jquery.wpc7.ajaxzip3.js', array('ajaxzip3'));}add_action('wp_print_scripts', 'cf7_ajaxzip3'); |
wp_enqueue_scriptを使うと、bodyの閉じタグの直前にスクリプトが出力されます。
5. jQueryを読み込みます
1 2 3 4 5 6 7 8 9 10 11 12 13 | // jQuery読み込みfunction load_cdn() { if(!is_admin()) { wp_deregister_script('jquery'); wp_enqueue_script( 'jquery', array(), '1.7.2' ); }}add_action('init', 'load_cdn'); |
WordPressにはjQueryが組込まれていますが、noConfrictが含められていて関数をカプセル化しないと使えない仕様になっているので読み込み直します。
上記の形で読み込むと一般的に高速で動作します。
これで、設置完了です。
郵便番号を入力すると住所が自動で入力されるようになりました！
2015.08.27 追記
ライブラリが公開されていたGoogle Codeサービス廃止によりGitHubに移行されました。
同時にもっと便利な新しいライブラリも公開されています。
詳しくはこちら↓↓↓
郵便番号から住所を自動入力する(Contact Form 7でも使える)