JavaScriptのコピペでできる郵便番号を入力すると住所を自動で表示してくれるプラグインYubinBango

個人情報を入力するフォームを使うページで「郵便番号を入れて、次に住所も都道府県で入れて」となると、ユーザーストレスのあるUX(ユーザー体験)になってしまいます。

そんな時、「YubinBango」のプラグインを使えば住所を自動表示してくれるので非常に便利です。

このプラグインは、とても使いやすくHTMLにclassを指定するだけで利用できるので、住所の入力フィールドがある場合によく利用しています。

この記事ではそんなYubinBangoの使い方について解説していきます。

かかかず

めちゃ便利なプラグインで、pardotフォームなどいろんなフォームに流用可能なのでオススメです。

実装のサンプル

早速、YubinBango実装のサンプルです。

郵便番号のフォームエリアに入力するだけで、自動でその住所を表示してくれます。設定もラクチンで、それぞれclassを指定するだけで設置も完了する手軽さです。

自動で住所入力の実装手順

実装は以下2つのステップで完了します。めちゃめちゃ簡単です。

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

  <form class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  <span class="yuubinn">〒</span><input type="text" class="p-postal-code" size="8" maxlength="8">
  <input type="text" class="p-region p-locality p-street-address p-extended-address" />

かかかず

これで設置は完了です。めちゃめちゃ簡単ですね！

実装サンプルのコピペ用コード一式

YubinBangoを使う時のJavaScriptと、HTMLのコピペ用コード一式です。

表示させたい場所にセットで貼り付けするだけで表示可能です。CSSは特に記載しないので、好みに応じてスタイリングください。

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

  <form class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  <span class="yuubinn">〒</span><input type="text" class="p-postal-code" size="8" maxlength="8">
  <input type="text" class="p-region p-locality p-street-address p-extended-address" />

プラグインを使う時の注意点

プラグインを作られた koba-ninkigumi さんのGitHubのページにも記載がありますが、注意点です。

以下4つは、このプラグインを使う時にそれぞれ指定する必要があるので、忘れず指定するようにしましょう。

かかかず

以下4つは使用するところに含ませる必要があるので注意しましょう。

formタグのclassに h-adr を含ませる

formタグのclassに h-adr が含ませる必要があります。例えば  <form class="h-adr"> のような形です。

formに Japan を指定

formの中に国名(p-country-name) が Japan に指定されている必要があります。

 <input type="hidden" class="p-country-name" value="Japan"> か、<span class="p-country-name" style="display:none;">Japan</span> のどちらかのように指定します。

formタグの中にあれば、いいので忘れず書くようにしましょう。

郵便番号入力欄のclassに p-postal-code を含ませる

郵便番号のclassに p-postal-code を含ませる必要があります。例えば  <input type="text" class="p-postal-code" size="8" maxlength="8"> のような形です。

住所欄のclassに指定のものを4つ含ませる

住所欄のclassに、都道府県名p-region・市町村区p-locality・町域p-street-address・以降の住所p-extended-address をそれぞれ含ませる必要があります。

例えば、<input type="text" class="p-region p-locality p-street-address p-extended-address"> のような形です。

参考サイト