Contact Form 7で郵便番号から住所を自動入力させる方法【YubinBango】

お問合せフォームで住所を入力してもらう時に、郵便番号を入力すると自動で住所が設定される機能がありますよね。
とても便利な機能なので自分のお問い合わせフォームにも導入してみたい!

お問い合わせフォームで有名な「Contact Form 7」プラグインを使って郵便番号から住所を自動入力させる方法を解説していきます。

WordPress有料テーマ「SWELL」を使っています

目次

YubinBangoの使い方

郵便番号から住所を自動入力させるのには、プラグインを使わずにYubinBangoというライブラリを使ってやる方法を順番に説明していきます。

プラグイン「Contact Form 7」はインストールしておいてください。

1.YubinBangoライブラリを読み込ませる

WordPressのメニューより「外観」→「テーマファイルエディタ」→「functions.php」に以下のコードを追加します。

/**
 * YubinBangoライブラリ
 */
wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );

2.Contact Form 7に郵便番号・住所の項目を追加する

WordPressのメニューより「お問い合わせ」から「新規追加」してコンタクトフォームを作成します。

以下のコードを入力します。

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

<label>住所<span class="requied" style="color:red">(必須)</span>
〒 [text your-zip1 class:p-postal-code size:3 maxlength:3]</label> - [text your-zip2 class:p-postal-code size:4 maxlength:4] 

<label>都道府県
[text* your-region class:p-region]</label>
<label>市区町村
[text* your-locality class:p-locality]</label>
<label>町名番地等
[text* your-street class:p-street-address]</label>
<label>建物名
[text your-extended class:p-extended-address]</label>

郵便番号の入力エリアを3桁と4桁の2つに分けています。

郵便番号の入力エリアを1つにすることも可能です。
その場合は以下のコードに変えてください。
郵便番号にハイフンが入っていても入っていなくても大丈夫です。

[text your-zip class:p-postal-code minlength:8 size:8]

住所の入力エリアも分けていますが1つにできます。
その場合は以下のコードに変えてください。

[text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]

作成したフォームは以下のように表示されます。

郵便番号から住所自動入力

3.作成したコンタクトフォームをページに設定する

お問い合わせフォームを作成していきます。

  1. Contact Form 7ブロックを追加する

コンタクトフォームを追加したい所の「+」ボタンをクリックする

郵便番号から住所自動入力
  1. 検索欄に「contact」と入力し、Contact Form 7をクリックする
郵便番号から住所自動入力
  1. 先程作成したコンタクトフォームを選択する

ここでは「Reservation」を選択しています。

郵便番号から住所自動入力
  1. 左上の「︙」をクリックします
郵便番号から住所自動入力
  1. 「HTMLとして編集」をクリックする
郵便番号から住所自動入力
  1. コンタクトフォームのショートコードにクラスコードを追加する

「HTML」として編集をクリックしたらhtml_class="h-adr"を追加します。

郵便番号から住所自動入力
郵便番号から住所自動入力

これで完了です。

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

郵便番号から住所自動入力



作成したお問い合わせフォームより、郵便番号を入力して自動で住所が入力されているか確認してください。

さいごに

プラグインを入れずに郵便番号を入力しただけで住所が自動で入力することができました。

簡単なのでぜひ導入してみてください。

目次