ワードプレス

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

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

1.YubinBangoライブラリを読み込む。

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

[php] wp_enqueue_script(‘yubinbango’,’https://yubinbango.github.io/yubinbango/yubinbango.js’,array(),false,true); [/php]

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

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

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

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

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

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

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

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

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

[html]<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>[/html]

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

コンタクトフォーム7で郵便番号から住所を自動入力させる方法

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA