ホームページ作成の技！お問い合わせフォームで住所を自動表示させる方法

このページの目次

OPEN

郵便番号の入力で住所を自動表示させる方法
1. 集客力を上げるホームページ作成

郵便番号の入力で住所を自動表示させる方法

集客力を上げるホームページ作成

最短ホームページテンプレートにはお問い合わせフォームが付属されています。簡単な記述の追加で、自動で住所が表示される方法をご案内します。

郵便番号入力で住所を自動表示方法

[この動画は9分で見れます]

Please click

チャンネル登録をして頂きますとホームページ作成に役に立つ最新動画のアップロードをお知らせします。

閲覧者さんが使いやすいホームページを作ることが集客力アップにつながります。ストレスなくユーザーがサイトを閲覧することができ、使いやすいということ！

このようなユーザビリティが最大のSEO対策になります。

そこで郵便番号を入力するだけで、住所の都道府県、市町村名までを自動で表示させる方法をご紹介します。お問い合わせフォームでは利用者が住所を記述することは多いと思います。これはあなたもご経験があると思うのですが、結構面倒ですよね。

お客様がせっかくお問い合わせをする気になっても、住所入力が煩わしくなり、問い合わせを見送る場合があります。ユーザーはわがままなものです。確実にお問い合わせフォームが集客に繋がるように、郵便番号の入力で住所を自動表示させるシステムは導入させておきましょう。

ajaxzip3とjquery.jpostal.jsを使います。

2種類の住所表示のさせ方

7桁で郵便番号を入力
都道府県名＋市町村名を1行表示

3桁＋4桁で郵便番号を入力
都道府県名＋市町村名を2行表示

2っの住所入力方法の動作確認

住所の記述欄が1行の場合の動作例

郵便番号を記述してみて下さい

郵便番号7桁　ハイフン不要　（必須）　★郵便番号の入力で都道府県、町名まで自動で記述されます。

住所　（必須）

住所の記述欄が2行の場合の動作例

郵便番号を記述してみて下さい

郵便番号 3桁＋4桁　（必須）　★郵便番号の入力で都道府県、町名まで自動で記述されます。
－
住所　（必須）
■都道府県名
■市町村名

自動表示の記述方法

共通する記述

この2っの自動表示の方法でスクリプトは共通です。まず、HTMLのフォーム記述の後に下記のスクリプトを記述します。下記をすべてコピーし、フォームの下に貼り付けてください。

HTMLの記述 [jquery.jpostal.js]

1行表示の場合

HTML入力フィールド

<input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">

<input type="text" name="addr11" size="60">

PHPフォームでの記述

$message .= "郵便番号：".$_POST{zip11}."\n";
$message .= "住所：".$_POST{addr11}."\n";

2行表示の場合

HTML入力フィールド

<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">

PHPフォームでの記述

$message .= "郵便番号：".$_POST{zip31}."\n";
$message .= "住所1：".$_POST{pref31}."\n";
$message .= "住所2：".$_POST{addr31}."\n";