【Contact Form 7】郵便番号から住所を自動入力する方法｜zipaddr-jpプラグイン連携で簡単実装

Contact Form 7で郵便番号から住所を自動入力するには？

結論から言うと、WordPressの「Contact Form 7」と「zipaddr-jp」プラグインを組み合わせることで、郵便番号を入力すると住所が自動で補完されるフォームを簡単に作成できます。

ユーザーが住所を手入力する必要がなくなるため、問い合わせや申し込みのストレスが減り、フォームの離脱率を下げたり、成約率を向上させたりする効果も期待できます。

この仕組みでは、ユーザーがフォームの「郵便番号」欄に数字を入力すると、JavaScriptによって自動的に「都道府県」「市区町村」などの住所欄に情報が入力されるようになります。

この記事では、この2つを使って郵便番号から住所を自動入力するフォームを作る手順を初心者にもわかりやすく解説していきます。

使用するプラグイン：zipaddr-jpとは？

「zipaddr-jp」は、日本郵便の郵便番号データをもとに、郵便番号から住所（都道府県・市区町村）を自動で入力してくれる無料プラグインです。
特にContact Form 7との相性が良く、多くのWordPressユーザーに利用されています。

zipaddr-jpのインストール方法と初期設定

まずは、「zipaddr-jp」プラグインをWordPressにインストールして有効化しましょう。数ステップで簡単に完了します。

1.zipaddr-jpをインストールする手順

• WordPress管理画面にログイン
• 左メニューから「プラグイン」→「新規追加」をクリック
• 検索窓に「zipaddr-jp」と入力
• 「今すぐインストール」をクリックし、完了後「有効化」

これだけで、zipaddr-jpの準備は完了です。

2.初期設定はそのままでOK

インストール後、「設定」→「zipaddr-jp」を開くと、詳細なオプション設定画面がありますが、基本的には初期設定のままで問題ありません。
以下のような設定が用意されていますが、こだわりがなければスキップしても大丈夫です。

• 自動入力を発動させるタイミング（keyupかblurか）
• フリガナ入力のON/OFF
• ID名のカスタマイズ
• レスポンシブ表示への対応

なお、必要に応じて住所の取得元サーバーや文字コード設定を変更することも可能ですが、初心者の方は触らずに進めてOKです。

Contact Form 7で郵便番号から住所を自動入力する方法

zipaddr-jpプラグインを有効化したら、次にContact Form 7のフォーム内に郵便番号と住所のフィールドを追加していきます。
設定は一見ややこしく感じるかもしれませんが、ポイントを押さえれば簡単です。

1.id属性を正しく設定する

zipaddr-jpが自動入力を正しく動作させるには、各フィールドのidを決められた名前にしておく必要があります。
以下のように設定してください

フィールド	id属性の値
郵便番号	zip
都道府県	pref
市区町村	city
番地など	addr

2.フォームに追加するコード例

以下は、Contact Form 7の「フォーム」タブに記述する例です。

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

住所を1つの欄にまとめる場合

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

<p>住所（自動入力＋番地など）（必須）<br />
[text* addr id:addr] </p>

市区町村と番地を1つの入力欄にまとめる場合

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

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

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

このコードを貼り付けるだけで、郵便番号を入力した時点で「都道府県」と「市区町村」が自動で入力されるようになります。
ユーザーの入力負担が減り、離脱率の低下にもつながります。

3.動作確認

設定が完了したら、実際にフォームを表示して郵便番号を入力してみましょう。
例えば「100-0001」などを入力すれば、自動で東京都千代田区が表示されるはずです。

住所自動入力が動かないときによくある原因と対処法

zipaddr-jpプラグインを使っても、郵便番号入力時に住所が自動的に入らない場合は、以下のポイントを確認してみましょう。

1.各入力フィールドのidが正しく設定されていない

最も多い原因です。
zipaddr-jpは、フィールドのidを使って動作するため、正しいID名を使う必要があります。

2.zipaddr-jpプラグインが有効化されていない

インストールしただけでは使えません。有効化が必要です。

3.JavaScriptが正しく読み込まれていない

テーマや他のプラグインの影響で、zipaddr-jpのスクリプトが読み込まれていないことがあります。

4.フォームを表示しているページに<form>タグが重複している

Contact Form 7は<form>タグを出力しますが、テーマや別のプラグインが余計な<form>タグを出していると、住所補完のスクリプトがうまく機能しないことがあります。

5.キャッシュ系プラグインの影響

キャッシュプラグインを利用している場合は、表示がキャッシュされ、最新のJavaScriptが動かないことも。

まとめ：Contact Form 7で郵便番号から住所を自動入力する方法

本記事では、WordPressの人気フォームプラグイン「Contact Form 7」と、郵便番号から住所を自動入力できる「zipaddr-jp」プラグインを組み合わせて、フォームの利便性を高める方法を解説しました。

おさらいポイント

• zipaddr-jpプラグインを使えば、郵便番号の入力に応じて「都道府県」「市区町村」などの住所を自動補完できる
• フォームの各入力欄には、指定されたid（例：zip / pref / city / addr）を設定する必要がある
• メール本文には対応するショートコード（例：[zip][pref][city][addr]）を忘れずに記述
• 動作確認はPC・スマホ両方で行い、補完精度とメール送信結果をチェック

郵便番号からの住所自動入力は、フォームのUX向上にとても効果的な機能です。
ぜひ、あなたのWebサイトにも取り入れてみてください。