【WordPress】MW WP Formで郵便番号の自動入力を行いたい(YubinBango編)

JavaScript , WordPress

WordPressでお問い合わせやお申し込みなどのフォームを簡単に作成できるプラグイン・MW WP Formで、郵便番号から住所を自動で入力するサンプルを紹介します。

郵便番号による住所の自動入力には、導入がJavaScriptで比較的容易なYubinBangoを使わせていただきます。

YubinBangoライブラリの読み込み設定

まずはfunctions.phpにYubinBangoライブラリを読み込む記述します。

<script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

functions.php

// オリジナルテーマ用JS読み込み
function my_scripts() {

  // yubinbango
  wp_enqueue_script( 'yubinbango', '//yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );

}
add_action( 'wp_enqueue_scripts', 'my_scripts');

続けてMW WP FormのFormタグにクラスを付与する関数を記述します。

functions.php

// MW WP Formのクラスをyubinbangoのクラスに変更する
function mwform_form_class() {
?>
<script>
jQuery(function($) {
  $( '.mw_wp_form form' ).attr( 'class', 'h-adr' );
});
</script>
<?php
}
add_action( 'wp_head', 'mwform_form_class', 10000 );

これでFormタグに’h-adr’が付与されます。※参考MW WP Formで出力される内にクラスを指定したい

MW WP Form側での設定

国名を設定

MW WP Formのフォームの編集画面で、国名(今回はJapan)を下記のように記述します。

<span class="p-country-name" style="display: none;">Japan</span>

郵便番号入力フォームタグを設置

MW WP Formの機能でフォームタグを下記のように挿入します(name属性やサイズは任意のものに変更してください)。

[mwform_text name="郵便番号" class="p-postal-code" size="10"]

住所が出力されるフォームタグを設置

同じく住所が自動で入力されるフォームタグを下記のように挿入します。

[mwform_text name="住所" class="p-region p-locality p-street-address p-extended-address" size="60"]

これで郵便番号を入力すると自動で住所が出力されます。さらに細かい設定(入力フォームタグを別けるなど)はYubinBangoの公式サイトをご覧ください。

関連記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

*

関連記事