WORDPRESS | Contact Form 7 郵便番号から住所を自動入力する

   

みなさんこんにちはALEXです。EFOキャンペーンもいよいよあと2件です。合計8件の記事を執筆しました。

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

今回は入力フォームの住所入力を自動入力する方法について解説します。郵便番号から住所を表示するライブラリーAjaxZip3を使えば、膨大な数の郵便番号から住所を取得することができます。

郵便番号は3桁+4桁、住所は「都道府県」「市区町村」「番地」の3項目の入力とします。

フォーム画面

Contact Form 7 のフォーム編集画面で以下のタグを入力します。

郵便番号
[text zip1 id:zip1]-[text zip2 id:zip2]

都道府県
[text prefecture id:prefecture]

市区町村 
[text city id:city]

番地 
[text street id:street]

 

これでOKです。

 

Function.phpの編集

Function.phpに以下のタグを入力します。

function add_head_link() {
    echo '<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>';
    echo "
    <script type=\"text/javascript\">
    jQuery(function($){
    $(\"#zip\").attr('onKeyUp', 'AjaxZip3.zip2addr(this,\'\',\'address\',\'address\');');
    $(\"#zip2\").attr('onKeyUp', 'AjaxZip3.zip2addr(\'zip1\',\'zip2\',\'prefecture\',\'city\',\'street\');');
});";
    echo '</script>';
}
add_action('wp_head', 'add_head_link');

 

これでOKです。

入力画面を確認する

 

実際の画面を確認します。入力前は以下の通りです。

郵便番号に当社所在地の郵便番号「140-0014」を入力すると以下のようになります、

これは便利です。作業時間5分もかからず住所の自動入力が実現しました。

 

まとめ

ライブラリーAjaxZip3を使用して郵便番号入力から自動的に住所を表示する方法をご紹介しました。

 

ありがとうございました。

 

連載目次

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

 - ワードプレス