【MW WP Form】郵便番号で住所自動入力をボタンで実装する

問い合わせフォームなどで郵便番号から住所を自動で入力させたい時、「ajaxzip3」といったライブラリを使うと便利ですよね。

MW WP Formに同様の機能を実装する場合、郵便番号を入力して即座に住所が反映される方法については解説している記事が多くあります。

でもボタンをクリックしてから住所が入力されるタイプは解説している記事があまりないので、「MW WP Form + ajaxzip3 + 住所検索ボタン」の実装方法を紹介したいと思います。

この記事の目次

ajaxzip3を使うための準備
MW WP Formの設定
1. 郵便番号を3桁-4桁で分ける場合
2. 郵便番号を分けない場合

ajaxzip3を使うための準備

まずajaxzip3をサイトに読み込みます。functions.phpで読み込む場合は以下のコード↓

function enq_ajaxzip3() {
wp_enqueue_script( 'ajaxzip3-script', 'https://ajaxzip3.github.io/ajaxzip3.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'enq_ajaxzip3' );

function enq_ajaxzip3() {
  wp_enqueue_script( 'ajaxzip3-script', 'https://ajaxzip3.github.io/ajaxzip3.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'enq_ajaxzip3' );

function enq_ajaxzip3() {
  wp_enqueue_script( 'ajaxzip3-script', 'https://ajaxzip3.github.io/ajaxzip3.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'enq_ajaxzip3' );

headerやfooterで読み込む場合は以下のコードを使います↓

HTML

<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>

<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>

<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>

これだけで準備は完了です。

MW WP Formの設定

あとはWM WP Formの設定と、実行するスクリプトを少し書きます。

郵便番号を3桁-4桁で分ける場合

郵便番号を分ける時のHTMLは以下の通り↓

HTML

[mwform_text name="zip1" id="zip1" conv_half_alphanumeric="true"]-[mwform_text name="zip2" id="zip2" conv_half_alphanumeric="true"]
[mwform_bbutton name="btn" class="zip-button" value="button"]住所検索[/mwform_bbutton]
[mwform_select name="pref" children=":選択してください,北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県" post_raw="true"]
[mwform_text name="address"]

[mwform_text name="zip1" id="zip1" conv_half_alphanumeric="true"]-[mwform_text name="zip2" id="zip2" conv_half_alphanumeric="true"]
[mwform_bbutton name="btn" class="zip-button" value="button"]住所検索[/mwform_bbutton]
[mwform_select name="pref" children=":選択してください,北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県" post_raw="true"]
[mwform_text name="address"]

[mwform_text name="zip1" id="zip1" conv_half_alphanumeric="true"]-[mwform_text name="zip2" id="zip2" conv_half_alphanumeric="true"]
[mwform_bbutton name="btn" class="zip-button" value="button"]住所検索[/mwform_bbutton]
[mwform_select name="pref" children=":選択してください,北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県" post_raw="true"]
[mwform_text name="address"]

以下のスクリプトで実行します↓

JavaScript

jQuery(function($) {
$('.zip-button').click(function(){
AjaxZip3.zip2addr('zip1','zip2','pref','address');
});
});

jQuery(function($) {
  $('.zip-button').click(function(){
    AjaxZip3.zip2addr('zip1','zip2','pref','address');
  });
});

jQuery(function($) {
  $('.zip-button').click(function(){
    AjaxZip3.zip2addr('zip1','zip2','pref','address');
  });
});

郵便番号を分けない場合

郵便番号を一つの枠で入力させる場合は以下のコードを↓

HTML

[mwform_text name="zip" id="zip" conv_half_alphanumeric="true"]
[mwform_bbutton name="btn" class="zip-button" value="button"]住所検索[/mwform_bbutton]
[mwform_select name="pref" children=":選択してください,北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県" post_raw="true"]
[mwform_text name="address"]

[mwform_text name="zip" id="zip" conv_half_alphanumeric="true"]
[mwform_bbutton name="btn" class="zip-button" value="button"]住所検索[/mwform_bbutton]
[mwform_select name="pref" children=":選択してください,北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県" post_raw="true"]
[mwform_text name="address"]

[mwform_text name="zip" id="zip" conv_half_alphanumeric="true"]
[mwform_bbutton name="btn" class="zip-button" value="button"]住所検索[/mwform_bbutton]
[mwform_select name="pref" children=":選択してください,北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県" post_raw="true"]
[mwform_text name="address"]

スクリプトはこちら↓

JavaScript

jQuery(function($) {
$('.zip-button').click(function(){
AjaxZip3.zip2addr('zip','','pref','address');
});
});

jQuery(function($) {
  $('.zip-button').click(function(){
    AjaxZip3.zip2addr('zip','','pref','address');
  });
});

jQuery(function($) {
  $('.zip-button').click(function(){
    AjaxZip3.zip2addr('zip','','pref','address');
  });
});

簡単ですね！
スタイルなどはフォームに合わせて調整してください。

ajaxzip3を使うための準備

MW WP Formの設定

郵便番号を3桁-4桁で分ける場合

郵便番号を分けない場合

comment