【設置簡単】フォームの郵便番号から住所を自動で入力させるプラグインYubinBango.js

WEBサイトからお問い合わせや予約をする時には入力フォームに項目を入力して送信しますが、この時、入力事項が多いと途中でやめてしまいたくなるユーザーは多いのではないでしょうか？
そこで、郵便番号から住所を自動で入力してくれる、便利なプラグインの「YubinBango.js」をご紹介します。

YubinBango.jsとは

YubinBango.jsとは入力した郵便番号から住所を自動入力してくれるプラグインで、入力するユーザーの手間を省いてくれる優れものなプラグインです。

YubinBango.jsの実装方法

まずはYubinBango.jsをgithubのページにアクセスしてダウンロードします。

ライブラリを読み込みます

必要なファイルのダウンロードが出来ましら、次にそのファイルを読み込ませます。

ダウンロードするファイル

• yubinbango.js

CDNで読み込む場合はこちら

githubのURLを設定して直接読み込むこともできます。

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

ファイルをダウンロードしたら、headタグ、もしくはbodyタグの閉じタグの直前にscriptタグを入れます。

<script src="../js/yubinbango.js"></script>

親要素に.h-adrを付けてフォームをマークアップします

フォームの親要素に、.h-adrを付けてマークアップして行きます。
この時、親要素はdivタグでもformタグでも構いません。

次に.p-country-nameをつけたinput要素を配置します。(この要素は非表示の要素となります)
後は郵便番号を入力するp-postal-code、住所のp-regionやp-locality、p-street-addressのクラス名を持つタグを配置です。
以下のクラスが用意されているので、用途に応じて各クラスを付けていきます。

使用できるクラス

.p-postal-code	郵便番号
.p-region	都道府県に使用します
.p-region-id	都道府県（ID）の項目にに使用します
.p-locality	市区町村の項目にに使用します
.p-street-address	町域の項目にに使用します
.p-extended-address	それ以降の住所の項目にに使用します

以下は、サンプルのコードになります。

<div class="h-adr">
  <form>
　　　　<span class="p-country-name" style="display:none;">Japan</span>
    この中にフォームをマークアップしていきます
  </form>
</div>

設定は以上となります。
必要に応じてクラスを使い分けていきましょう。
設定が完了しましたら、入力のテストを行い郵便番号を入力して、住所欄に住所が反映されるかどうかの動作確認を行いましょう。

まとめ

郵便番号から住所を自動で入力させるプラグインYubinBango.jsについて、ご紹介しましたがいかがだったでしょうか？

お問い合わせやご予約フォームは、項目が多かったりすると、ユーザーが途中で入力をやめてしまう事があります。
そんな時に、ユーザーの負担を和らげるYubinBango.jsなどがフォームの最適化に役立つかと思います。
ご興味のある方は是非使ってみて下さい。