【Ajaxzip3】Contact Form7で郵便番号から住所を自動入力する方法

WordPressのプラグイン「Contact Form7」は、簡単にお問合せフォームを設置できることで有名です。

今回は、さらにユーザビリティを向上させるために郵便番号から住所を自動入力する方法を紹介します。

▲こんな感じに自動入力され、ユーザーが住所を手動で入力する手間が省けます。

郵便番号から住所を自動入力する方法

Contact Form7で郵便番号から住所を自動入力するには、

  1. Contact Form7
  2. header.php

の2箇所を編集する必要があります。

Contact Form7

Contact Form7のフォームは、次のように記述します。

郵便番号
[Text zip id:zip]

ご住所
[Text addr id:addr]

※必要に応じて、お問合せフォームの項目は追加していってください。

header.php

header.phpは、<head>タグ内に次のように記述します。(「外観」→「テーマの編集」にあります。)

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script type="text/javascript">
jQuery(function(){
  jQuery('#zip').keyup(function(event){
    AjaxZip3.zip2addr(this,'','addr','addr');
  })
})
</script>

※動作しない場合は、</body>の直前に貼り付けてください。

最後に

無事に郵便番号から住所が自動入力されましたか?

今回は、株式会社人気組が公開している「ajaxzip3」という便利なスクリプトを使って、住所が自動入力されるようにしました。

「世界一、簡単に設置できる郵便番号検索ライブラリを目指して! 」の通り、本当に導入が簡単。

こんな簡単なコピペだけで、すごくプロっぽいお問合せフォームになります。開発者には感謝です!



コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ABOUTこの記事をかいた人

サラリーマンをしながら、当ブログを運営していましたが、2018年に独立し現在はフリーランスとして活動しています。今まで、数々のWebサイト・ブログを構築してきました。このブログでは、今までの経験で得た知識を活かし、Web制作・SEO関連を中心に、最新のIT関連ニュースを発信。また、ファイナンシャル・プランナー技能士の資格を活かして金融関係の情報も発信しています。