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

今回は、WPのContact Form 7でユーザーが郵便番号を入力したら、自動的に住所を入力させる方法を紹介します。

自動入力させる方法はいくつかありますが、
今回は、新たにプラグインをインストールせずに実装する
「YubinBango」という無料のライブラリを使用して実装する方法です。

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

まず最初に「YubinBango」という無料のライブラリを使用します。
子テーマのfunction.phpに書き込んでフックを使う方法もありますが、
function.phpは、誤ってコードを消したりしてしまうと大規模なエラーを起こしてしまう最も繊細なページですので、
今回は安全にフォームに直接スクリプトを記載します。

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

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

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

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

<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]

以前の私の投稿を見てコンタクトフォームを構築して下さった方は、以下に変更でエラーなく自動入力されます。

<p><strong>郵便番号</strong><br />
[text* your-zip class:p-postal-code form-control placeholder "（例）1010042"]</p>

<p><strong>都道府県</strong><br />
[text your-pref class:p-region form-control placeholder "（例）東京都"]</p>

<p><strong>市区町村以降のすべての住所</strong><br />
[text your-address class:p-locality p-street-address p-extended-address form-control placeholder "（例）千代田区********"]</p>

フォームに国名を指定コードを追記

フォームに以下のコードを追加します。

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

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

ショートコードに「html_class=”h-adr”」を付け足します。
これを付け足さないとライブラリを読み込んでくれませんので注意です。

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

ショートコードが読み込まれないエラーが発生した場合
ショートコードを書き換えなくてもライブラリを読み込む実装は以下です。

<div class="h-adr">
<!-- 他のコードを記述 -->
</div>

フォームの内容を囲み、完了です。

まとめ

いかがだったでしょうか？
zipaddr-jpというプラグインで、住所を自動入力させる方法もありますが、
POPUPが出たりとメリットデメリットがありますので、プラグイン利用の方法は次回紹介します。
WordPressでフォームを作成する際には是非やってみてください。