開発ブログ

株式会社Nextatのスタッフがお送りする技術コラムメインのブログ。

電話でのお問合わせ 075-744-6842 ([月]-[金] 10:00〜17:00)

  1. top >
  2. 開発ブログ >
  3. CMS >
  4. WordPress >
  5. WordPressのContact Form 7で郵便番号から住所を自動入力
no-image

WordPressのContact Form 7で郵便番号から住所を自動入力

こんばんは、株式会社Nextatのナカエです。

Ajaxという単語が世に溢れてから、
郵便番号から住所を自動入力させるのももはや当たり前の機能となっています。

この機能をWordPressのContact Form7に付け加える案件があったので、方法をメモしておきます。


今回はajaxzip3 を利用させて頂きました。


ajaxzip3はソースコードをたった数行加えるだけで
<script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js" charset="UTF-8"></script>

<input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
<input type="text" name="addr11" size="60">
サンプル のように住所の自動入力機能を付け加えることができます。

Contact Form 7のショートコードでフォームを生成する都合上、onKeyUp属性の指定ではなくjQueryのon()を使ってイベントを登録してやりました。
<script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js" charset="UTF-8"></script>
<script type="text/javascript">
$(function(){
  $('#zip11').on('keyup', '', function(){
    AjaxZip3.zip2addr(this,'','addr11','addr11');
  });
});
<p>郵便番号 [text zip11 id:zip11]</p>
<p>ご住所 [text addr11]</p>

まったく先人は偉大ですね。
TOPに戻る