Contact Form7で郵便番号から住所を自動入力！【YubinBango】

Contact Form 7とは

WordPressに簡単にお問い合わせやお申し込みなどのフォームを設置することができるプラグインです。
無料で利用でき、プラグインの更新やサポートも頻繁に行われているため、安心して利用することができます。

参考：Contact Form 7

Contact Form 7で郵便番号から住所を自動入力させたい場合に使える方法を解説します。
YubinBangoというJavaScriptのライブラリを使用します。

完成イメージ

下記のようなフォームで、郵便番号を入力すると、住所が自動で入力されるようにしていきたいと思います！

YubinBangoライブラリの読み込み

外観>テーマファイルエディターを選択します。

使用しているテーマのfunctions.phpを開きます。

function.phpに、コードを記載して保存します。
（最下部に記述する形でOKです）

※コードは下記をコピペしてください

/*YubinBangoライブラリ*/

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

STEP

functions.phpを編集するときの注意点

functions.phpはテーマの機能的な情報が記述してある大切なファイルとなります。
誤った情報を入力してしまうと、エラーが起こり、元の状態に戻すことが困難になることがあります。
必ずバックアップを取り、不具合が起きた際にも復旧ができるように対策をしておくようにすると安心です。

また、functions.phpに記述した内容はテーマのアップデートで消えてしまうことがあります。
更新のあるテーマをお使いの場合には、Code Snippetsなどのプラグインを使用して、記述をおこなうことをおすすめします。

フォームの作成

管理画面の
ダッシュボード>お問い合わせ
からContact Form7の「新規追加」をクリックします。

タイトルを入力し、フォームタブの中に内容を入力し、保存します。

※フォームタブの中には下記をコピペしてください

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

<h2>住所自動入力フォーム</h2>

<label> 氏名<span style="color:red">（必須）</span>
    [text* your-name autocomplete:name] </label>

<label> メールアドレス<span style="color:red">（必須）</span>
    [email* your-email autocomplete:email] </label>

<label>郵便番号<span style="color:red">（必須）</span>
〒　[text* your-post1 class:p-postal-code size:3 maxlength:3]</label> - [text* your-post2 class:p-postal-code size:4 maxlength:4]</label>

<label>ご住所<span style="color:red">（必須）</span>
[text* your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]</label>

[submit "送信"]

STEP

上記の赤文字、青文字、緑文字の部分が重要となります。
ここを正しく記述しないとうまく作動しないので、注意が必要です。

POINT！

赤文字・・・国名を指定します
青文字・・・郵便番号の入力欄のclass指定で、 p-postal-code を指定します
緑文字・・・住所欄のclass指定で､都道府県名(p-region)､市町村区(p-locality)､町域(p-street-address)､以降の住所(p-extended-address) をそれぞれ指定します

ページにフォームを設置する

作成したお問い合わせフォームをページに設置します。
ブロックの追加ボタンをクリックし、Contact Form 7を選択します。

プルダウンから、先ほど作成したお問い合わせフォームを選択します。

STEP

フォームのHTMLを編集する

フォームのブロックを選択すると出てくる、「︙」マークをクリックし、HTMLとして編集を選択します。

html_class="h-adr"
を追加します。

※上記を追加する直前に半角スペースを入れてください

すると、画像のように、
「このブロックには、想定されていないか無効なコンテンツが含まれています。」とメッセージが表示されますがこのままでOKです！

STEP

お問合せフォームをテストする

お問い合わせフォームが設置できたら、ページをプレビューして確認をおこないます。

設置したお問い合わせフォームに、郵便番号を入力してみます。
すると、このように、郵便番号から住所が自動で入力されます！

STEP

YubinBangoライブラリを使用すると、簡単に郵便番号から住所が自動入力されるフォームが作成できます！

プラグインをあまり使いたくないという方にもおすすめの方法です。ぜひ、試されてみてください。

投稿者プロフィール

Mayu: Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。

Contact Form 7とは