goodpageロゴ

Contact Form7で郵便番号から住所を自動入力させる方法

Contact Form7で郵便番号から住所を自動入力させる方法

投稿日:2024.02.29
最終更新日:2024.03.18
湘南在住。国立音楽大学卒業 / 96年生まれの2児母。ピアノ講師とWEB制作のお仕事をしています。
このブログではお仕事のことから日常生活のことまで、幅広く書いています。

LPコーディングの際に 郵便番号から住所の自動入力 ができるようにというご依頼をいただくことがよくあります。

住所の自動入力だなんて聞くと「わーやだー」と叫びたくなりそうですが、待ってください。落ち着いて。超絶簡単に実装できます!(笑)「ajaxzip3」というライブラリを使用すれば超超簡単なので、ご紹介します〜!

事前準備

・wordpressで使用
・フォームはcontactform7
・都道府県はドロップダウンで出てくる

まずはajaxzip3のスクリプトを読み込みます!

<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>

それからfunctions.phpに以下を追加。

function my_script_init() {
	wp_enqueue_script( 'ajaxzip3', get_stylesheet_directory_uri() . '/js/ajaxzip3.js', array(), '0.51', true );
	wp_enqueue_script( 'my', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_script_init' );

contactform7を使用します!

<dt class="contact-form__input__text">郵便番号</dt>
<dd class="contact-form__input">[text your-zip id:your-zip]</dd>
<dt class="contact-form__input__text">都道府県</dt>
<dd class="contact-form__input">
[select your-pref id:your-pref include_blank "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県"]</dd>
/* ↑都道府県はドロップダウンで出したいのでselectを使用 */
<dt class="contact-form__input__text">市区町村</dt>
<dd class="contact-form__input">[text your-add]</dd>
<dt class="contact-form__input__text">以降の住所</dt>
<dd class="contact-form__input">[text strt]</dd>

script.jsに以下を追加

jQuery( '#your-zip' ).keyup( function() {
	AjaxZip3.zip2addr( this, '', 'your-pref', 'your-add' );
});

以上です!簡単で嬉しい…。

実際の動きはこんな感じです↓

全く関係ないですがこの住所は横須賀美術館です!今年2024年3月20日からジブリ展があるので今から楽しみなのです〜(関係なさすぎてすんません笑)

鈴木敏夫とジブリ展

コンタクトフォーム内に2つ住所欄がある場合

不動産LPとかだと現住所+物件所在地の2箇所に住所欄を作るなんてこともあるかと思うのですが、その時にはidが被らないように作ればおkです。当たり前の話ですが…

jQuery( '#your-zip' ).keyup( function() {
	AjaxZip3.zip2addr( this, '', 'your-pref', 'your-add' );
});
jQuery( '#your-zip2' ).keyup( function() {
	AjaxZip3.zip2addr( this, '', 'your-pref2', 'your-add2' );
});

script.jsにはこんな感じで書きました。

まとめ

以上がajaxzip3での実装方法です。今はYubinBangoでの実装が推奨されているみたいなので、次は私もこちらで作ってみようと思います!

Contact

お問い合わせ

お見積もりやご相談は無料ですので
お気軽にお問い合わせください!

お問い合わせフォーム