Contact Form 7で郵便番号を入力して住所を自動で表示させる方法

この記事は2014年3月に公開したものです。ソフトウェアやサービスの仕様が変わり、現在の情報と異なる場合があります。

こんにちは。
SOHOデザイナーのAquaForest-アクアフォレスト-です。

ワードプレスの便利なプラグイン「Contact Form 7」。
なんと郵便番号を入力すると自動で住所も表示できちゃいます！

しかもAjaxZip3を使う事で更新作業もいらず、
自動で住所情報を更新してくれます。

やり方も簡単ですのでぜひ試して下さい。

Contact Form 7のプラグイン導入は済ませておいて下さい。
プラグインを実装した際に左メニューに出てくる「お問い合わせ」をクリック。

新規で作り下記の様に入力。

郵便番号 [text* zip id:zip 10/ watermark]
住所 [text* addr id:addr 10/]

保存して出来たコードを下記のコードの一番下に貼付けて
固定ページに入れて下さい。

<script type='text/javascript' src='https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js'></script>
<script type="text/javascript">
jQuery(function(){
  jQuery('#zip').keyup(function(event){
    AjaxZip3.zip2addr(this,'','addr','addr');
  })
})
</script>
[contact-form-7 id="**" title="コンタクトフォーム 1"]

これで郵便番号を入力すると自動で住所が反映されます。