郵便番号の入力で住所を自動表示させる方法
集客力を上げるホームページ作成
最短ホームページテンプレートにはお問い合わせフォームが付属されています。簡単な記述の追加で、自動で住所が表示される方法をご案内します。
郵便番号入力で住所を自動表示方法
[この動画は9分で見れます]
Please click
閲覧者さんが使いやすいホームページを作ることが集客力アップにつながります。ストレスなくユーザーがサイトを閲覧することができ、使いやすいということ！
このようなユーザビリティが最大のSEO対策になります。
そこで郵便番号を入力するだけで、住所の都道府県、市町村名までを自動で表示させる方法をご紹介します。お問い合わせフォームでは利用者が住所を記述することは多いと思います。これはあなたもご経験があると思うのですが、結構面倒ですよね。
お客様がせっかくお問い合わせをする気になっても、住所入力が煩わしくなり、問い合わせを見送る場合があります。ユーザーはわがままなものです。確実に お問い合わせフォームが集客に繋がるように、郵便番号の入力で住所を自動表示させるシステムは導入させておきましょう。
ajaxzip3とjquery.jpostal.jsを使います。
2種類の住所表示のさせ方
- 7桁で郵便番号を入力
都道府県名＋市町村名を1行表示
- 3桁＋4桁で郵便番号を入力
都道府県名＋市町村名を2行表示
2っの住所入力方法の動作確認
住所の記述欄が1行の場合の動作例
住所の記述欄が2行の場合の動作例
自動表示の記述方法
共通する記述
この2っの自動表示の方法でスクリプトは共通です。まず、HTMLのフォーム記述の後に下記のスクリプトを記述します。下記をすべてコピーし、フォームの下に貼り付けてください。
HTMLの記述 [jquery.jpostal.js]
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
1行表示の場合
<!-- ▼郵便番号入力フィールド(7桁) -->
<input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
<!-- ▼住所入力フィールド(都道府県+以降の住所) -->
<input type="text" name="addr11" size="60">
$message .= "郵便番号：".$_POST{zip11}."\n";
$message .= "住所：".$_POST{addr11}."\n";
2行表示の場合
<!-- ▼郵便番号入力フィールド(3桁+4桁) -->
<input type="text" name="zip31" size="4" maxlength="3"> − <input type="text" name="zip32" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip31','zip32','pref31','addr31','addr31');">
<!-- ▼住所入力フィールド(都道府県) -->
<input type="text" name="pref31" size="20">
<!-- ▼住所入力フィールド(都道府県以降の住所) -->
<input type="text" name="addr31" size="40">
$message .= "郵便番号：".$_POST{zip31}."\n";
$message .= "住所1：".$_POST{pref31}."\n";
$message .= "住所2：".$_POST{addr31}."\n";
その他の記述
自動表示される住所を「1行表示」、「都道府県で2行表示に分ける場合」、それぞれの方法でHTML入力フィールドにユーザーが解りやすいように、必要なテキストを記述して下さい。
- 郵便番号 7桁、又は3桁＋4桁
- 住所
- 都道府県名
- 市町村名
都道府県名、市町村名が記述されたとき、その後の住所の続きである、番地、マンション名、部屋番号などを記述する下記のような入力フィールドを作成しておいても良いと思います。
