【051】WordPress｜Contact Form 7で郵便番号から住所を自動入力させる

こんにちは！
アニメ好き農業系Webデザイナーオジサンです。

記事の投稿が滞りまくっておりますが、決してアニメを見過ぎている訳ではありません。
最近は休日にホームセンターに行ってはウインドウショッピングという提で夏野菜の苗に病的に手を出してしまっている始末です・・・

今育てている夏野菜は、ミニトマト・きゅうり・オクラ・ピーマン等々。

フォーム入力で郵便番号から住所を自動で入力させる方法

さて、本題ですがWordPressのプラグイン【Contact Form 7】を使用してフォームを作る際に、郵便番号を入力したら住所が自動で表示される機能を追加する際に、新たにプラグインをインストールせずに実装する方法を備忘録も兼ねて書いておきます。
意外と簡単です。

ライブラリをリンクさせる

まず最初に「YubinBango」という無料のライブラリを使用します。

子テーマのfunction.phpに書き込んでフックを使う方法もありますが、ここではフォームに直接書き込む方法を記載しておきます。

フォームに直接スクリプトを記載する

Contact Form 7のフォーム作成画面一番上に下記のスクリプトを記載します。

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

この下にいつも通り必要項目を足しながらフォームを作っていきます。

その際に「YubinBango」のライブラリから情報を読み込むため、住所の項目に下記のclassを割り当てます。

• 住所　　　　class

• 都道府県　　p-region

• 市区町村　　p-locality

• 町域　　　　p-street-address

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

お名前
[text* your-name]
郵便番号
[text* zip class:p-postal-code placeholder"住所自動入力"]
都道府県
[text pref class:p-region]
市区町村
[text city class:p-locality class:p-street-address]

ざっとこんな感じになります。

ショートコードに必要な情報を追記する

このように作成したフォームを最終的に固定ページに設置する訳ですが、その際ショートコードに「html_class=”h-adr”」を付け足します。
これを付け足さないとライブラリを読み込んでくれませんので注意です。

[contact-form-7 id="数字" title="お問い合わせ" html_class="h-adr"]

これで完成です。

いかがだったでしょうか？結構簡単ですよね。
WordPressでフォームを作成する際には是非やってみてください。