こんにちは。開発部・アニマル部署統括のPです。
今回はお問い合わせフォームなどで使える、郵便番号から住所を自動入力してくれるプラグインをご紹介します。
ユーザー登録やお問い合わせ時に住所を入力する機会が多くありますが、住所を何度も入力するのってとっても面倒ですよね。
スマホからのアクセスユーザーも多いため、入力作業はストレスとなり、問い合わせや会員登録などのコンバージョン率を下げてしまう原因にもなります。
また、市町村の合併などがあるので郵便番号に紐づく市町村データは常に最新の状態にしておく必要があり、自前で作る場合はかなりハードルが高いです。。。（以前作ったことがありますがメンテがかなり面倒でした）
今回ご紹介する「ajaxzip3」を使えば数行のコードで簡単に実装できちゃいます。早速使い方を見ていきましょう。
【STEP.1】スクリプトの読み込み
HTMLhead内にCDNでjavascriptファイルを読み込みます。
|
1 |
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script> |
【STEP.2】フォーム部分のコーディング
KeyUpつまりタイプが終わった時に、郵便番号から住所の存在をチェックし、該当のフィールドに結果を表示します。
■ 郵便番号（7ケタ）+ 都道府県 + 市区町村
〒
都道府県：
市区町村：
|
1 2 3 4 5 6 |
<!--郵便番号（7ケタ）--> 〒 <input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');"> <!--都道府県--> 都道府県：<input type="text" name="pref01" size="20"> <!--市区町村--> 市区町村：<input type="text" name="addr01" size="60"> |
■ 郵便番号（3ケタ）- 郵便番号（4ケタ）+ 都道府県 + 市区町村
〒 －
都道府県：
市区町村：
|
1 2 3 4 5 6 |
<!--郵便番号（3ケタ）- 郵便番号（4ケタ）--> 〒 <input type="text" name="zip21" size="4" maxlength="3"> － <input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','pref21','addr21');"> <!--都道府県--> 都道府県：<input type="text" name="pref21" size="40"> <!--市区町村--> 市区町村：<input type="text" name="addr21" size="40"> |
ちなみにAjaxZip3.zip2addrの引数は以下のようになっており、表示したいテキストフィールドのnameをセットすればOK。
※ 不要な項目は省略可
AjaxZip3.zip2addr( ‘〒上3桁’, ‘〒下4桁’, ‘都道府県’, ‘市区町村’, ‘町域大字’, ‘丁目番地’ );
簡単に実装できましたね！GitHubを見たところ、プラグインの制作者は「新規の設置には yubinbangoライブラリの使用をオススメしています。」とお知らしています。
Class名を当てるだけで実装できるみたいなので、機会があればこちらも今度使ってみようと思います。
ではでは～(‘ω’)ノ
2020.12.21