【Contact Form 7】郵便番号から住所を自動入力する方法
「Contact Form 7」はWordPressのプラグインのひとつで、簡単にお問い合わせフォームを作成することが出来る人気のプラグインです。
住所を入力するのって意外と手間だったりしますよね。住所入力が面倒になって入力途中でやめてしまったりしたら、企業、ユーザーそれぞれにとって機会損失になってしまいます。
そのため出来るだけ必須項目を減らしたり、自動化できる個所は自動入力させる機能を追加したり、工夫が必要になります。
今回の記事では「Contact Form 7」で郵便番号から住所を自動入力する方法をご紹介します。
この記事の目次を表示
Contact Form 7で郵便番号から住所を自動入力する方法
「Contact Form 7」で郵便番号から住所を自動入力する場合、以下の手順で実装していきます。
以下の条件での解説となります。
- 郵便番号の入力欄はひとつ
- 住所の入力欄はひとつ
- ボタンをクリックしたら住所を自動入力
Contact Form 7の設定
まずは「Contact Form 7」で通常通り、フォームを作成します。以下がサンプルコードです。
<dl>
<dt>郵便番号</dt>
<dd>
<div>
<p>〒[text* zipcode1 placeholder "123-4567"]</p>
<a id="zip-button">住所検索</a>
</div>
</dd>
</dl>
<dl>
<dt>住所</dt>
<dd>
<div>
<p>[text* address1 placeholder "住所"]</p>
</div>
</dd>
</dl>ライブラリ（ajaxzip3）を読み込む
郵便番号から住所を自動入力するためのライブラリはいくつか存在していますが、今回はajaxzip3というライブラリをもとにご紹介します。
ajaxzip3を以下のように読み込みます。
<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>jQueryの記述設定
ajaxzip3を読み込んだだけでは住所を自動入力することは出来ません。続いてこのライブラリをもとに郵便番号を入力したらそれをもとに住所を自動入力させるためのjQueryコードを作成します。
$(function(){
$('#zip-button').on('click',function(){
AjaxZip3.zip2addr('zipcode1', '', 'address1', 'address1');
});
});AjaxZip3.zip2addr()には全部で5つの引数を指定することが出来ますが郵便番号の入力欄、住所の入力欄がそれぞれ1つの場合はこのように引数を指定します。
ここまで設定・記述することで郵便番号から住所を自動入力することが出来ます。
パターン別コード
上の例では「郵便番号の入力欄はひとつ」「住所の入力欄はひとつ」「ボタンをクリックしたら住所を自動入力」というパターンで詳しく解説してきましたが、実際のお問い合わせフォームの場合、サイトによって、郵便番号の入力欄が2つだったり、住所の入力欄が2つだったりと様々な組み合わせが存在しています。
そこでそれぞれのパターン別にコピペですぐに実装出来るコードをご用意しました。
郵便番号1つ、住所2つ、ボタンクリックの場合
「郵便番号1つ、住所2つ、ボタンクリック」の場合は、以下のコードで実装可能です。
<dl>
<dt>郵便番号</dt>
<dd>
<div>
<p>〒[text* zipcode1 placeholder "1234567"]</p>
<a id="zip-button">住所検索</a>
</div>
</dd>
</dl>
<dl>
<dt>住所</dt>
<dd>
<div>
<p>[text* address1 placeholder "都道府県"]</p>
<p>[text* address2 placeholder "市区町村"]</p>
</div>
</dd>
</dl><script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
$(function(){
$('#zip-button').on('click',function(){
AjaxZip3.zip2addr('zipcode1', '', 'address1', 'address2');
});
});郵便番号1つ、住所3つ、ボタンクリックの場合
「郵便番号1つ、住所3つ、ボタンクリック」の場合は、以下のコードで実装可能です。
<dl>
<dt>郵便番号</dt>
<dd>
<div>
<p>〒[text* zipcode1 placeholder "1234567"]</p>
<a id="zip-button">住所検索</a>
</div>
</dd>
</dl>
<dl>
<dt>住所</dt>
<dd>
<div>
<p>[text* address1 placeholder "都道府県"]</p>
<p>[text* address2 placeholder "市区町村"]</p>
<p>[text* address3 placeholder "番地"]</p>
</div>
</dd>
</dl><script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
$(function(){
$('#zip-button').on('click',function(){
AjaxZip3.zip2addr('zipcode1', '', 'address1', 'address2','address3');
});
});郵便番号2つ、住所1つ、ボタンクリックの場合
「郵便番号2つ、住所1つ、ボタンクリック」の場合は、以下のコードで実装可能です。
<dl>
<dt>郵便番号</dt>
<dd>
<div>
<p>〒[text* zipcode1 placeholder "123"]</p> -
<p>〒[text* zipcode2 placeholder "4567"]</p>
<a id="zip-button">住所検索</a>
</div>
</dd>
</dl>
<dl>
<dt>住所</dt>
<dd>
<div>
<p>[text* address1 placeholder "住所"]</p>
</div>
</dd>
</dl><script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
$(function(){
$('#zip-button').on('click',function(){
AjaxZip3.zip2addr('zipcode1', 'zipcode2', 'address1', 'address1');
});
});郵便番号2つ、住所2つ、ボタンクリックの場合
「郵便番号2つ、住所2つ、ボタンクリック」の場合は、以下のコードで実装可能です。
<dl>
<dt>郵便番号</dt>
<dd>
<div>
<p>〒[text* zipcode1 placeholder "123"]</p> -
<p>〒[text* zipcode2 placeholder "4567"]</p>
<a id="zip-button">住所検索</a>
</div>
</dd>
</dl>
<dl>
<dt>市区町村・番地等<span>必須</span></dt>
<dd>
<div>
<p>[text* address1 placeholder "都道府県"]</p>
<p>[text* address2 placeholder "市区町村"]</p>
</div>
</dd>
</dl><script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
$(function(){
$('#zip-button').on('click',function(){
AjaxZip3.zip2addr('zipcode1', 'zipcode2', 'address1', 'address2');
});
});郵便番号2つ、住所3つ、ボタンクリックの場合
「郵便番号2つ、住所3つ、ボタンクリック」の場合は、以下のコードで実装可能です。
<dl>
<dt>郵便番号</dt>
<dd>
<div>
<p>〒[text* zipcode1 placeholder "123"]</p> -
<p>〒[text* zipcode2 placeholder "4567"]</p>
<a id="zip-button">住所検索</a>
</div>
</dd>
</dl>
<dl>
<dt>市区町村・番地等<span>必須</span></dt>
<dd>
<div>
<p>[text* address1 placeholder "都道府県"]</p>
<p>[text* address2 placeholder "市区町村"]</p>
<p>[text* address3 placeholder "番地"]</p>
</div>
</dd>
</dl><script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
$(function(){
$('#zip-button').on('click',function(){
AjaxZip3.zip2addr('zipcode1', 'zipcode2', 'address1', 'address2','address3');
});
});ボタンクリックを省略する方法
これまでの例で、は郵便番号を入力後に「住所検索」ボタンをクリックすることで住所が自動で入力されますが、このボタンクリックの動作を省略するにはjQueryの記述を書き換えることで実装することが出来ます。
郵便番号1つ、住所1つの場合
<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
$(function(){
$('input[name="zipcode1"]').keyup(function(){
AjaxZip3.zip2addr(this, '', 'address1', 'address1');
});
});郵便番号1つ、住所2つの場合
<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
$(function(){
$('input[name="zipcode1"]').keyup(function(){
AjaxZip3.zip2addr(this, '', 'address1', 'address2');
});
});郵便番号1つ、住所3つの場合
<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
$(function(){
$('input[name="zipcode1"]').keyup(function(){
AjaxZip3.zip2addr(this, '', 'address1', 'address2', 'address3');
});
});郵便番号2つ、住所1つの場合
<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
$(function(){
$('input[name="zipcode1"],input[name="zipcode2"]').keyup(function(){
AjaxZip3.zip2addr('zipcode1', 'zipcode2', 'address1', 'address1');
});
});郵便番号2つ、住所1つの場合
<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
$(function(){
$('input[name="zipcode1"],input[name="zipcode2"]').keyup(function(){
AjaxZip3.zip2addr('zipcode1', 'zipcode2', 'address1', 'address1');
});
});郵便番号2つ、住所2つの場合
<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
$(function(){
$('input[name="zipcode1"],input[name="zipcode2"]').keyup(function(){
AjaxZip3.zip2addr('zipcode1', 'zipcode2', 'address1', 'address2');
});
});郵便番号2つ、住所3つの場合
<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
$(function(){
$('input[name="zipcode1"],input[name="zipcode2"]').keyup(function(){
AjaxZip3.zip2addr('zipcode1', 'zipcode2', 'address1', 'address2', 'address3');
});
});Contact Form 7以外のフォームの場合
この記事では「Contact Form 7」を使用してフォームを作成している場合についてご紹介しています。
その他、スクラッチで作成しているフォームの場合の郵便番号から住所を自動入力する方法は以下の記事で詳しく解説していますので良ければ合わせてご覧下さい。
まとめ
いかがでしたか？
このように少し手間を加えるだけで「Contact Form 7」で郵便番号をもとに住所を自動入力する機能を実装することが出来ます。
お問い合わせ入力の手間を省き、入力途中での離脱を防ぐためにも実装しておきたい機能ですね。
