[WP]MW WP FORMとAjaxZip3で郵便番号から住所を自動入力する方法

WordPress

2017.07.19

AjaxZip3を使ってMW WP FORMのメールフォームで郵便番号入力時に都道府県以下を自動表示させる方法のご紹介です。

AjaxZip3でMW WP FORMの住所の自動表示
1. header.php
2. 管理画面のMW WP FORM

AjaxZip3でMW WP FORMの住所の自動表示

AjaxZip3とは何か？どのようなことができるのか？などの詳細は、以下のページもご確認ください。
https://github.com/ajaxzip3/ajaxzip3.github.io

header.php

まずはご利用のテーマのheader.phpを開いて、<head>にAjaxZip3のjavascriptを読み込ませます。

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

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

続いて、同じくheader.phpの<head>内に以下のようなコードを追加します。

<script type="text/javascript">
jQuery(function( $ ) {
    jQuery( 'input[name="mwform_zip2"]' ).keyup( function( e ) {
        AjaxZip3.zip2addr('mwform_zip1','mwform_zip2','mwform_addr1','mwform_addr2');
    } )
} );
</script>

jQuery(function( $ ) {

jQuery( 'input[name="mwform_zip2"]' ).keyup( function( e ) {

AjaxZip3.zip2addr('mwform_zip1','mwform_zip2','mwform_addr1','mwform_addr2');

} )

} );

</script>

※mwform_zip1、mwform_zip2、mwform_addr1、mwform_addr2は、MW WP FORM側の設定（nameの値）に合わせるようにします。

管理画面のMW WP FORM

あとはWordPress管理画面のMW WP FORMページで、以下のようなフォームを登録します。

<div>郵便番号</div>
<div>[mwform_text name="mwform_zip1" conv_half_alphanumeric="true" maxlength="3"] - [mwform_text name="mwform_zip2" conv_half_alphanumeric="true" maxlength="4"]</div>

<div>都道府県</div>
<div>[mwform_select name="mwform_addr1" children="北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県"]</div>

<div>住所（市区町村以下）</div>
<div>[mwform_text name="mwform_addr2" placeholder="（例）新宿区新宿1"]</div>

<div>[mwform_text name="mwform_zip1" conv_half_alphanumeric="true" maxlength="3"] - [mwform_text name="mwform_zip2" conv_half_alphanumeric="true" maxlength="4"]</div>

<div>[mwform_select name="mwform_addr1" children="北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県"]</div>

<div>住所（市区町村以下）</div>

<div>[mwform_text name="mwform_addr2" placeholder="（例）新宿区新宿1"]</div>