MW WP Form　住所入力補完

WordPressでお問合せフォームといえば、Contact Form 7が有名ですが、
最近はMW WP Formが非常に使い勝手がよく、おすすめです。

主なメリットは以下の点
・確認画面が表示可能
・同一URL・個別URLでの画面変遷が可能
・豊富なバリデーションルール
・問い合わせデータを保存可能

また、郵便番号による住所入力の補完も簡単に実装可能です。
今回はその手順を紹介します。

以下のサイトを参考にさせていただきました。
http://megane-blog.com/2014/08/06/1204

■ajaxzip3を読み込む
head内に下記を記述します。

<script type='text/javascript' src='https://ajaxzip3.github.io/ajaxzip3.js?ver=20140807'></script>

■script実行
name設定が次の場合→郵便番号”zip”、都道府県”area”、市区町村”city”

<script type="text/javascript">
jQuery(function( $ ) {
    jQuery( 'input[name="zip"]' ).keyup( function( e ) {
        AjaxZip3.zip2addr('zip','','area','city');
    } )
	if($('#mw_wp_form_mw-wp-form-xxxx').hasClass('mw_wp_form mw_wp_form_confirm')){
		$(".comments").css('display', 'none');
	}
} );
</script>

■Formのソース

<tr class="address">
<th>郵便番号</th>
<td>[mwform_text name="zip" class="zip" size="40" placeholder="例)123-4557"]</td>
</tr>
<tr>
<th>ご住所</th>
<td>
<p><b>都道府県</b><br />
 [mwform_text name="area" class="area" size="40"]</p>
<p><b>市町村・番地</b><br />
 [mwform_text name="city" class="city" size="40"]</p>
<p><b>建物・部屋番号</b><br />
 [mwform_text name="build" class="build" size="40" placeholder=""]</p>
</td>
</tr>

さらに、MW WP Formには「URL引数を有効にする」オプションもあります。

次回はこのオプションを使ったカスタマイズを紹介します。