Contact Form7で郵便番号から住所を自動入力させる方法
投稿日：2024.02.29
最終更新日：2024.03.18
最終更新日：2024.03.18
湘南在住。国立音楽大学卒業 / 96年生まれの2児母。ピアノ講師とWEB制作のお仕事をしています。
このブログではお仕事のことから日常生活のことまで、幅広く書いています。
このブログではお仕事のことから日常生活のことまで、幅広く書いています。
LPコーディングの際に 郵便番号から住所の自動入力 ができるようにというご依頼をいただくことがよくあります。
住所の自動入力だなんて聞くと「わーやだー」と叫びたくなりそうですが、待ってください。落ち着いて。超絶簡単に実装できます！（笑）「ajaxzip3」というライブラリを使用すれば超超簡単なので、ご紹介します〜！
※「YubinBango」というライブラリもあるそうで、こちらは「ajaxzip3」の製作者さんが作った最新版です。もし今から作る方は「YubinBango」で作るのが良さそうです！以下参考記事
目次
事前準備
・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での実装が推奨されているみたいなので、次は私もこちらで作ってみようと思います！