ブログ

【WordPress】MW WP Formに「郵便番号から住所自動入力」を追加する方法

お問い合わせフォームプラグイン「MW MP Form」に郵便番号から住所を自動入力させる方法をご紹介します。

MW MP Formはデフォルトの状態で「入力確認画面」が装備されたプラグインで、いつも重宝して使わせていただいております。

「ajaxzip3」のダウンロード

郵便番号自動入力の実装には「ajaxzip3」が必要です。下記サイトからダウンロードして、functions.phpに「ajaxzip3.js」と処理を記述するファイルを読み込める状態にしてください。

//Jsのファイル名や格納先のパスなどは適宜変更!
function my_script_init() {
  
  wp_enqueue_script( 'ajaxzip3', get_stylesheet_directory_uri() . '/js/ajaxzip3.js', array(), '0.51', true );
  wp_enqueue_script( 'my', get_template_directory_uri() . '/js/test.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_script_init' );

上記はjsフォルダ内のtest.jsを読み込む場合です。

MW WP Formの設定

郵便番号フィールド・都道府県フィールド・住所フィールドのname値にそれぞれ、zip・prefecture・addressの名前をつけます。郵便番号フィールドはidの追加も忘れないでください。

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

jQueryの設定

任意の名前(下記例はtest.js)を付けたJsファイルに以下のコードを記述してください。

jQuery( '#zip' ).keyup( function() {
  AjaxZip3.zip2addr( this, '', 'prefecture', 'address' );
});

設定等に問題なければ、郵便番号の入力後にフィールドからフォーカスが外れると、prefectureaddressのフィールドに都道府県住所が自動的に入力されます。

この記事を書いた人管理人

SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。

SAKURAGRAPHICAができること

最近の記事 おすすめ記事
PAGE TOP