お問い合わせフォームで郵便番号から住所を自動入力する便利なJSライブラリ

お問い合わせや資料請求の際、フォームに住所を入力する必要があるのは面倒な作業ですが、これを簡単にする便利なライブラリ「YubinBango.js」があります。このライブラリを使用すると、郵便番号を入力するだけで、それに紐づく住所が自動的に入力されるため、煩わしい切り替え作業や入力の手間を省くことができます。

従来よく使われていた「ajaxzip3」と「YubinBango.js」は同じ製作者によって開発されています。「ajaxzip3」のサポート終了に伴い新しいプロジェクトでは「YubinBango.js」の使用が推奨されています。「YubinBango.js」では、コードの軽量化によりページの読み込み時間が短縮され、全角で入力しても半角に自動変換されるなど、ユーザーにとってより使いやすい仕様に改善されています。

これにより、フォームでの住所入力が一瞬で完了し、ユーザビリティが向上するだけでなく、開発者にとっても非常に使い勝手の良いツールとなっています。

設置例

それでは、具体的な設置方法を確認してみましょう。まずは、最も基本的な郵便番号入力欄と住所入力欄だけのシンプルな例です。

▼html

<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>
  〒 <input type="text" class="p-postal-code" size="8" maxlength="8"><br>
  住所 <input type="text" class="p-region p-locality p-street-address p-extended-address" />
</form>

以下の入力フォームに郵便番号を入力してみましょう。全角、半角、ハイフン有無いずれにも対応しています。

郵便番号

住所

コード解説

上記の設置例では、まず「YubinBango.js」を読み込みます。

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

次にフォームタグに「h-adr」クラスを指定します。

<form class="h-adr">

フォーム内には、国名として「Japan」を指定する必要があります。

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

inputタグに適切なクラスを付与することで、郵便番号を入力すると自動で住所が入力されるようになります。

〒 <input type="text" class="p-postal-code" size="8" maxlength="8"><br>
住所 <input type="text" class="p-region p-locality p-street-address p-extended-address" />

この手順で、簡単に郵便番号から住所を自動入力する機能を実装することができます。

inputタグに使用するclass名

class名 項目
p-postal-code 郵便番号
p-region 都道府県名
p-locality 市町村区
p-street-address 町域
p-extended-address 以降の住所

まとめ

いかがでしたでしょうか？YubinBango.jsを設置することで、郵便番号を入力するだけで自動的に住所が入力される便利な機能を簡単に導入でき、ユーザーの入力手間を大幅に省くことができます。お問い合わせフォームの設置は、サイト運営側がより詳細な情報を得たいと考える一方で、ユーザー側にとっては入力の手間をできるだけ減らしたいものです。YubinBango.jsを活用して両者のニーズを満たすフォームを実現してみてはいかがでしょうか。

TOP
TOP