郵便番号を入力すると住所が自動入力されるJavaScript［ajaxzip3］の実装方法

［記事公開日］2019年5月8日

代表取締役

児島大

お問い合わせフォームなどで住所を入力してもらう必要がある場合、ユーザーに住所を手入力してもらうのはユーザビリティの観点から絶対に避けるべきです。
そこで、この記事ではJavaScriptをつかって、郵便番号から住所が自動反映されるようにする方法を解説します。

1 住所自動反映はなぜ必要なのか
2 ajaxzip3をつかって超簡単に実装
- 2.1 <head>内にajaxzip3を読み込みます
- 2.2 入力フォームに作ります

住所自動反映はなぜ必要なのか

サイトにより異なりますが、お問い合わせフォームでの途中離脱率は実に90%近くにのぼると言われています。
仮に、お問い合わせページが月1000ページビューあり完了率が10%の場合は、100件のお問い合わせになりますが、完了率を10%でも改善できると、お問い合わせの件数は20件にもなります。
客単価の高い商品やサービスを販売している場合には、相当な売上高の違いにつながるわけです。

そこで必要なのがお問い合わせフォームで完了率をあげるための改善ですが、これをEFO（入力フォーム最適化）といいます。
そのなかでも、効果の高いテクニックのひとつとして、郵便番号から住所を自動反映させるというテクニックがありますので、ぜひ実装していないかたは実装するようにしましょう。

ajaxzip3をつかって超簡単に実装

<head>内にajaxzip3を読み込みます

まずは、JSファイルを<head>内で読み込みます。
こちらからダウンロードして自サーバー内から読み込ませてもいいですし、Githubサーバーからの読み込みでも大丈夫です。
GitHubから読み込む場合には、下記コードを<head>内に追加します。

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

入力フォームに作ります

下記を参考にしていただき［input］タグに少し書き足すだけで実装できます。
それぞれのデモも用意していますのでお試しください。

郵便番号と住所ともに1フィールドのパターン

<form>
	<label>郵便番号</label>
	<input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
	<label>住所</label>
	<input type="text" name="addr11" size="60">
</form>

デモ

郵便番号を1フィールド、住所を都道府県・市区町村以降で2分割するパターン

<form>
	<label>郵便番号</label>
	<input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');">
	<label>都道府県</label>
	<input type="text" name="pref01" size="20">
	<label>市区町村以降</label>
	<input type="text" name="addr01" size="60">
</form>

デモ

郵便番号を3桁・4桁で2分割、住所は1フィールドのパターン

<form>
	<label>郵便番号</label>
	<input type="text" name="zip21" size="4" maxlength="3"> － <input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','addr21','addr21');">
	<label>住所</label>
	<input type="text" name="addr21" size="40">
</form>

デモ

郵便番号を3桁・4桁で2分割、住所を都道府県・市区町村・それ以降で3分割するパターン

<form>
	<label>郵便番号</label>
	<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','strt31');">
	<label>都道府県</label>
	<input type="text" name="pref31" size="20">
	<label>市区町村</label>
	<input type="text" name="addr31" size="40">
	<label>それ以降</label>
	<input type="text" name="strt31" size="40">
</form>

デモ