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

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

最短テンプレートの使い方

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

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

郵便番号自動入力

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

 

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

[この動画は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]

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

 

1行表示の場合
HTML入力フィールド

<!-- ▼郵便番号入力フィールド(7桁) -->
<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入力フィールド

<!-- ▼郵便番号入力フィールド(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">

 

PHPフォームでの記述

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

 

その他の記述

自動表示される住所を「1行表示」、「都道府県で2行表示に分ける場合」、それぞれの方法でHTML入力フィールドにユーザーが解りやすいように、必要なテキストを記述して下さい。

  • 郵便番号 7桁、又は3桁＋4桁
  • 住所
  • 都道府県名
  • 市町村名

 

都道府県名、市町村名が記述されたとき、その後の住所の続きである、番地、マンション名、部屋番号などを記述する下記のような入力フィールドを作成しておいても良いと思います。

 

■続きの住所
　
■マンション名・部屋番号等
　マンション名　
　部屋番号　　　

 

サービス提供側にとっては、お問い合わせフォームで色々なお客様の情報を知りたいので、項目を増やしたい気持ちは解ります。しかしユーザーは必要最低限の情報しか開示したくありません。

 

お問い合わせフォームの項目が増える程、コンバージョンは減ってしまうことは明らかです。また入力が煩わしい事もユーザーは嫌うので途中で止めてしまう場合もあります。このような事からこのコンテンツでご紹介したような自動住所表示は必須と言えます。

 

ユーザビリティはホームページ最適化、SEO対策で最も重要な事であるため、可能な作業は面倒くさがらず、作業するようにしましょう。ひとつひとつの積み重ねが集客につながります。

 

 

 
スパム防止←前のページ

 

最短HPテンプレートカテゴリートップ