こんにちは、元調剤薬局の薬剤師、今は福井県福井市でフリーのホームページ制作をやっている@ジョウです。
今回の記事は、応募フォームに関することです。
薬局などのホームページでは、薬剤師募集をするために、応募フォームを作っていることがあります。
この応募フォームで住所を書かせる場合、必ず郵便番号から自動で住所が入るような仕様にしておきましょう。
理由は、これを実装するだけで、コンバージョン(入力を完了し応募してくれる確率)が大きく上がるといわれているためです。
今回の記事では、郵便番号から自動で住所を入力させる方法に関してまとめます。
JavaScriptライブラリ『YubinBango』を使用
郵便番号から自動で住所を入力させる方法は、YubinBangoというライブラリを使用するのが一番簡単です。
自力でコードを書くと大変ですし、このライブラリは読み込みが早いのでほぼデメリットはありません。jQueryも使わないので、脱jQueryを目指している人も重宝するはず。
また、以前までは『ajaxzip3』というライブラリを使っている方もいましたが、
- コードの軽量化
- 全角数字が自動で半角になる
といったことが改善されているので、YubinBangoをしようするのが良いでしょう。
ダウンロードする場合は、ここからできます『YubinBango』(緑色のcodeボタンをクリックして、『DOWNLOAD ZIP』でDLが可能)
ですが、下記コードをhead内に書けば、ダウンロード不要です。
|
1 |
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> |
YubinBangoの読み込みが完了したら、あとは応募フォームの郵便番号と住所の項目のタイプに合わせて、コードを書きます。
フォームの書き方
フォームのコードは以下のような感じになります。
|
1 2 3 4 5 |
<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> |
①formタグにclassを指定する
まず、formタグにh-adrを指定しましょう。
②Japanを入力
YubinBangoが機能するためには、Japanを書いて非表示しておく必要があります。
③郵便番号タグでclassを指定
class=”p-postal-code”と指定します。
sizeは文字数分のサイズ、maxlength最大文字数を意味していますが、『-（ハイフン）』も考慮して8としておきましょう。8と書いておけば、ハイフンは書いても書かなくても住所は反映されます。
また、上記のコードは、郵便番号の枠が１つ(7桁)の場合です。
郵便番号が２つ(3桁＋4桁)に分かれている場合は、
|
1 2 |
<input type="text" class="p-postal-code" size="3" maxlength="3"> <input type="text" class="p-postal-code" size="4" maxlength="4"> |
と書きます。
④住所タグにclassを指定
クラスで指定するのは、
- p-region(都道府県)
- p-locality(市町村)
- p-street-address(町名番地)
- p-extended-address(それ以降)
この４つです。
枠を別々にしているならその枠にclassを指定してください。
これで実装は完了です。
まとめ
ある程度、コードを触ったことがある人なら実装は難しくないはず。応募フォームからのコンバージョンが欲しい人は絶対した方がいいですね。
実装できない人は、相談してください。
また、薬剤師からの転職相談も受けているのでよかったらどうぞ。