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

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

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

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

フォーム画面

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です。