ものづくりのブログ

うちのネコを題材にしたものづくりができたらいいなと思っていろいろ奮闘してます。

WordPress の "Contact Form 7"というプラグインを使って郵便番号から住所を自動入力する方法

ホームページを自作しようといろいろ奮闘してます。
今回は WordPress で問い合わせフォームを作成する際に郵便番号から住所を自動入力する方法について調べたので、ここにまとめておきます。

zipaddr-jp プラグインとは

WordPress で zipaddr-jp というプラグインを使えば、 "Contact Form 7" などで作成したメールフォームで入力した郵便番号から住所(都道府県や市町村)を自動で入力することができるようです。

zipaddr-jp プラグインのインストール

「プラグイン」‐>「新規追加」メニューから zipaddr-jp プラグインを選択しインストールを有効化します。
f:id:a1026302:20201002110940j:plain

「zipaddr-jp」メニューで動作設定できますが、ひとまず初期設定のまま進めます。
f:id:a1026302:20201002111144j:plain


"Contact Form 7" との連携

「問い合わせ」‐「コンタクトフォーム」メニューから、レイアウトを変更したいフォームの「編集」をクリックして編集画面を開きます。
f:id:a1026302:20201002135151j:plain


「郵便番号」「都道府県」「市区町村」用のタグを作成

「フォーム」タブでメールフォームのレイアウト(タグ)を確認して、「郵便番号」「都道府県」「市区町村」を追加する場所を決めます。
f:id:a1026302:20201002135503j:plain



「郵便番号」「都道府県」「市区町村」を設定するためのテキストボックスを作成します。ポイントは各項目のidを次のように設定することです。

  • 郵便番号 --- zip
  • 都道府県 --- pref
  • 市区町村 --- city
  • 町域 --- addr

郵便番号・都道府県・市区町村・住所のタグ

<label>郵便番号 (必須)<br />
    [text* zip id:zip] </label>
 
<label>都道府県 (必須)<br />
    [text* pref id:pref] </label>
 
<label>市区町村 (必須)<br />
    [text* city id:city] </label>

<label>それ以降の住所 (必須)<br />
    [text* addr id:addr] </label>


フォームの表示イメージは以下の通りです。
f:id:a1026302:20201002141310j:plain


送信メールのメッセージ本文の組み立て

次に「メール」タブの「メッセージ本文」の修正を行います。
f:id:a1026302:20201002141655j:plain

郵便番号:[zip]
住所:[pref][city][addr]