定番中の定番、ContactForm7で郵便番号入力で住所自動反映をさせたい場合の一番簡単なやり方として、私が業務上も採用している方法を備忘記録します。
function.phpに記述
ヘッダにAjaxの郵便番号スクリプトを読み込みます。
全ページに読まれても冗長なため、該当するページにのみ読み込まれるように、function.phpに下記のように指定します。
実際の案件では、複数のページにフォームが存在することが多いので、スラッグ名にて指定できるようにしてあります。
function enqueue_ajaxzip3_script() {
// 指定のページスラッグ条件を配列で指定
$page_slugs = array('contact', 'order');
// 現在のページが条件を満たす場合にスクリプトを読み込む
if (is_page($page_slugs)) {
// jQueryを読み込む
wp_enqueue_script('jquery');
// AjaxZip3の読み込み
wp_enqueue_script('ajaxzip3', 'https://ajaxzip3.github.io/ajaxzip3.js', array('jquery'), null, false);
// スクリプトを追加する
wp_add_inline_script('ajaxzip3', '
jQuery(function() {
jQuery("#zip").on("keyup", function(event) {
AjaxZip3.zip2addr(this, "", "addr", "addr");
});
});
');
}
}
add_action('wp_enqueue_scripts', 'enqueue_ajaxzip3_script');header.phpに記載しない理由は、私自身が既存テーマを利用したカスタマイズが多いためです。
この方法だと、既存テーマの子テーマでheader.phpをわざわざ作ることなく、子テーマのfunction.phpに追加するのみでいけるので非常に効率的で簡単です。
ContactForm7側に記載する方法
<label>郵便番号 <span class="free avoid-confirm">任意</span>
[text zip id:zip]</label>
<label>ご住所 <span class="must avoid-confirm">必須</span>
[text* addr id:addr]</label>※番地やアパート・ビル名まで忘れずご記入ください。
このパターンは、住所欄が1行のものです。ご注意ください。
必ず、郵便番号記入欄にはid:zip、住所反映欄にはid:addrを指定する必要がありますのでご注意下さい。
この記事を書いた人
パリスタデザイン事務所のWebデザイナー。
得意分野は、使い勝手についてきめ細やかに考えられたCMS設計・構築。
3児の母でもあります。ゲーム・パソコンが趣味。
好きが高じてEC事業部でPCや自作PCパーツ・ゲーミング関連グッズの販売も行っています。
お仕事のご依頼はこちらまで
パリスタデザイン事務所は、WordPressの構築/カスタマイズを得意としています。
Web制作に関するお仕事は、パリスタデザイン事務所までお気軽にお問い合わせください。
