「コンタクトフォーム７」+「YubinBango」で郵便番号から住所を自動入力する方法

コンタクトフォーム７のカスタマイズで、郵便番号を入力すると、住所が自動で入力されるあれのやり方です。
私でも５分くらいでできました(*’ω’*)！

１．YubinBangoライブラリを読み込む。

下記のコードをfunctions.phpにコピペするだけ( ^^)

　wp_enqueue_script('yubinbango','https://yubinbango.github.io/yubinbango/yubinbango.js',array(),false,true);　

２．コンタクトフォーム7のショートコードにclassをつける。

お問い合わせページなどの固定ページで、お問い合わせフォームを表示させるためのショートコードに「html_class=”h-adr”」をつけます。

[contact-form-7 id="1" title="お問い合わせフォーム" html_class="h-adr"]

コンタクトフォームの編集でフォーム内に下記をコピペします。

ダッシュボードのお問い合わせ＞コンタクトフォーム＞該当のコンタクトフォーム名＞フォーム（タブ）　とすすみ、下記一行をフォーム内のどこでもいいのでコピペします。

<p class="p-country-name" style="display:none">Japan</p>

郵便番号と住所入力欄を作ります。

郵便番号と住所の入力欄は、どちらもテキストフォームタグで作成しました。
郵便番号の入力欄には「class:p-postal-code」というクラス、

住所の入力欄には「class:p-region」「class:p-locality」「class:p-street-address」のクラスを入れておきます。あとは、メールのタブに住所と郵便番号のメールタグをいれて完成です。

<label> 郵便番号
   [text your-zip-code class:p-postal-code] </label>
<label> ご住所
    [text your-address class:p-region class:p-locality class:p-street-address] </label>

参考にさせていただいたサイト様

コンタクトフォーム7で郵便番号から住所を自動入力させる方法｜WEB TIPS～ホームページ制作の覚え書き

2018年11月13日2020年10月10日Tweet コンタクトフォーム7で一番よくやる（やれと言われる）カスタマイ...つづきを読む【WEB TIPS】

whitewood-hp.com