Contact Form 7で郵便番号から住所を自動入力(zipaddr-jp)

プラグイン
この記事は約4分で読めます。

お問い合わせフォームの入力を効率化する定番テクニックといえば、「郵便番号から住所を自動で入力する」です。WordPressでもzipaddr-jpプラグインを使えば、Contact Form 7などで作成したメールフォームで入力した郵便番号から住所(都道府県や市町村)を自動で入力することができます。

今回は、Contact Form 7の問い合わせフォームを例に、zipaddr-jpプラグインを使って郵便番号から住所を自動入力する方法を紹介します。

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

「プラグイン」‐「新規追加」メニューからzipaddr-jpプラグインをインストール、有効化します。
「設定」‐「zipaddr-jp」メニューで動作設定できますが、ひとまず初期設定のまま進めます。
設定内容は以下のページも参考にしてください。
zipaddr-jpプラグインのページ

Contact Form 7との連携

メールフォーム作成プラグイン「Contact Form 7」とzipaddr-jpプラグインを連携する方法を紹介します。すでにContact Form 7を使って簡単な問い合わせフォームを作ったことがある方を想定して説明します。

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

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

「フォーム」タブでメールフォームのレイアウト(タグ)を確認して、「郵便番号」「都道府県」「市区町村」を追加する場所をイメージしましょう。ここでは、「メールアドレス」と「メッセージ本文」の間に追加しますが、基本的には好きな場所で大丈夫です。

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

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

具体的なタグの例を以下に紹介します。

<p>郵便番号 (必須)<br />
[text* zip id:zip] </p>

<p>都道府県 (必須)<br />
[text* pref id:pref] </p>

<p>市区町村 (必須)<br />
[text* city id:city] </p>

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

各項目のidが合っていれば、ピッタリ同じレイアウトにする必要はありません。
このタグを「フォーム」タブの適当な場所(例:「メールアドレス」と「メッセージ本文」の間)に入力します。

市区町村以降の住所を1つにまとめる場合

「それ以降の住所」(addr)を省略して市区町村と1つにまとめることもできます。

<p>郵便番号 (必須)<br />
[text* zip id:zip] </p>

<p>都道府県 (必須)<br />
[text* pref id:pref] </p>

<p>市区町村以降の住所 (必須)<br />
[text* city id:city] </p>

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

上記の作業と一緒に「メール」タブの「メッセージ本文」の修正を忘れないようにしましょう。入力した住所をメール本文に反映するために必要です。

組み立てた住所のタグは次のようになります。
郵便番号:[zip]
住所:[pref][city]

1行にまとめることもできます。
住所:[zip] [pref][city]

市区町村と町域を分ける場合は次のようになります。
郵便番号:[zip]
住所:[pref][city][addr]

好きなフォーマットのタグを「メッセージ本文」に入力しておきましょう。これで、メールに郵便番号と住所が入ってくるはずです。

コメント