WordPress

【WordPress】郵便番号入力で住所を自動入力する方法

※ 当サイトではアフィリエイト広告を利用しています

【WordPress】郵便番号入力で住所を自動入力する方

この記事では「郵便番号入力で住所を自動入力する方法」について解説します。

お問い合わせフォームでは、郵便番号や住所を入力することが多いですが、ある方法を使えば郵便番号を入力するだけで簡単に住所を自動入力させることができます。

この記事を読むと...
  • 郵便番号入力で住所を自動入力する方法が分かる
  • ContactForm7で住所を自動入力する方法が分かる
  • MW WP Formで住所を自動入力する方法が分かる

なお、ここではお問い合わせフォームを「Contact Form 7」と「MW WP Form」の2パターンを使って解説しています。それぞれの使い方に関しては、以下の記事で解説しています。

郵便番号入力で住所自動入力の実装方法

郵便番号を自動入力するには、郵便番号から住所を自動入力する「YubinBango」というライブラリで実現できます。

ざっくり以下のような手順で設定できます。

郵便番号自動入力手順

YubinBango導入方法

YubinBangoライブラリの公式URLは以下になります。

https://github.com/yubinbango/yubinbango

まずYubinBangoライブラリを読み込む必要があります。functions.phpに以下の記述をします。

wp_enqueue_script('yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), false, true);

Contact Form 7に導入する場合

formタグには「h-adr」というclassを付与する必要があります。

以下のContact Form 7ショートコードの記述でh-adrを付与することができます。

例:page-contact.php

<!-- お問い合わせフォーム -->
<?php echo do_shortcode('[contact form7のショートコードを入力 html_class="h-adr"]'); ?>

国の設定

YubinBangoを使用するためには、「国の判別」をするための記述が必要になります。

以下のコードを記述しましょう。

Contact Form 7の設定エディターの一番上に、以下の記述をします。

<input type="hidden" class="p-country-name" value="Japan">

Contact Form 7の設定

Contact Form 7には以下のお問い合わせコードを記述します。(CSSは適宜スタイリングします)

<input type="hidden" class="p-country-name" value="Japan">
<div class="zip">
〒 [text your-zip1 class:p-postal-code size:3 maxlength:3] - [text your-zip2 class:p-postal-code size:4 maxlength:4]
</div>
都道府県 [text your-region class:p-region]
ご住所[text your-locality class:p-locality]
マンション・ビル名 [text your-extended class:p-extended-address]

[submit class:p-button "送信"]
郵便番号自動入力

郵便番号を入力するinputタグには、「p-postal-code」というクラスが必要です。

また、それぞれ自動入力させたい住所フォームには以下のクラスを付与する必要があります。

住所付与するclass
都道県名p-region
市町村区p-locality
町域p-street-address
以降の住所p-extended-address

設定がうまくできていれば、以下のように郵便番号を入力すると自動的に住所が入力されます。

これで設定できました。以下のような図解イメージです。

郵便番号自動入力

MW WP Formに導入する場合

MW WP Formでも、formタグには「h-adr」というclassを付与する必要があります。

MW WP Formのformタグにそのクラスを付与するために、functions.phpに以下の記述をします。

function add_yubinbango_class()
{
  echo <<<EOC
<script>
  jQuery('.mw_wp_form form').addClass('h-adr');
</script>
EOC;
}
add_action('wp_print_footer_scripts', 'add_yubinbango_class');

国名の設定

こちらもContact Form 7と同様に国の設定が必要です。

例:page-contact.php

<!-- 国の判別設定 -->
<input type="hidden" class="p-country-name" value="Japan">

<!-- お問い合わせフォーム -->
<?php echo do_shortcode('[mwform_formkey key="39"]'); ?>

MW WP Formの設定

MW WP Formのエディターには以下のお問い合わせコードを記述します。(CSSは適宜スタイリングします)


[mwform_zip name="zip-code" class="p-postal-code required"]
都道府県
[mwform_text name="pref" class="p-region" size="60" value=""]
ご住所
[mwform_text name="address" class="p-locality p-street-address p-extended-address required" size="60"]
マンション・ビル名
[mwform_text name="bldg" size="60"]
[mwform_submit name="mwform_submit-591" value="送信する" class="p-button"]
郵便番号自動入力

やり方はContact Forn 7と同じで、郵便番号を入力するinputタグには、「p-postal-code」というクラスが必要です。

また、自動入力させたい住所フォームにも、それぞれ専用のクラスを付与する必要があります。

住所付与するclass
都道県名p-region
市町村区p-locality
町域p-street-address
以降の住所p-extended-address

これで設定できました。

まとめ

郵便番号入力で住所を自動入力する方法について解説しました。

YubinBangoライブラリで簡単に実装できますが、いくつか必要な記述があるので、設定方法を忘れないようにしましょう。

  • この記事を書いた人
アバター画像

こうだい

兼業でWeb制作事業|31歳|本業畑違いで知識0から学習開始→1年目で初案件獲得→2年で月の兼業受注金額70万円達成|4年目で100万円達成|兼業でも稼げることを確信|Web制作メンター|制作費無料のホームページ制作事業運営|コーディング・ホームページ制作についてお気軽にお問い合わせください

-WordPress
-,