郵便番号入力時に自動で住所入力 MW WP Formでの実装方法

郵便番号を入力した次の瞬間、都道府県と、住所が入るアレです。

デモを見る(他サイトにリンクします。)
AjaxZip3の使い方 | Webサイト制作支援 | ShanaBrian Website

参考

導入手順

ajaxzip3の読み込み (functions.phpに記載)

[code lang=php]
<?php
function ajaxzip3_scripts() {
wp_enqueue_script( 'ajaxzip3-script', 'https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js', array( 'jquery' ), '20140807', true );
}
add_action( 'wp_enqueue_scripts', 'ajaxzip3_scripts' );
[/code]

WordPress内で動かすための設定 (nameとzip2addr内は適時修正)

[code lang=jscript]
<script type="text/javascript">
jQuery(function( $ ) {
jQuery( 'input[name="zip2"]' ).keyup( function( e ) {
AjaxZip3.zip2addr('zip1','zip2','address1','address2');
} )
} );
</script>
[/code]

Formの指定

[code lang=html]
<dl><dt>住所<span>*</span><em>郵便番号を入力いただくと自動的に住所が入力されます。</em></dt>
<dd><h6>郵便番号</h6>
[mwform_text name="zip1" id="zip1" size="10" placeholder="半角英数" conv_half_alphanumeric="true"]-[mwform_text name="zip2" id="zip2" size="10" placeholder="半角英数" conv_half_alphanumeric="true"]
<h6>都道府県</h6>
[mwform_select name="address1" id="address1" children="北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県"]
<h6>市区町村</h6>
[mwform_text name="address2" id="address2" size="10" ]
<h6>町名番地等</h6>
[mwform_text name="strt21" id="strt21" size="10"]
<h6>建物名</h6>
[mwform_text name="apart" size="20"]
</dd></dl>
[/code]

この他にも、MW WP Form はすごいっす

バリデーションが豊富

  • メールアドレスを2回入力させて、同じだった場合のみOK
  • カタカナの全角入力のみOK
  • 等など

CSVにデータ保存可能

  • フォーム内の項目良い、任意の項目のみを保存可能

確認画面や完了画面を任意のURLに設定可能

  • 入力画面URL
  • 確認画面URL
  • 完了画面URL
  • エラー画面URL

MW WP Formについて詳しくはこちら!