WordPressで問い合わせフォームを作る際に、郵便番号を入れると住所まで自動で表示させたいシーンがあります。

Contact Form 7を使っている場合には、「zipaddr-jp」というプラグインを入れることで可能になります。

目次

郵便番号を入力すると市区町村まで自動で表示するようにしたい

問い合わせフォームや申し込みフォームで住所を入力してもらうときには、郵便番号を入れれば自動で市区町村まで表示させられると便利です。

世の中の多くのフォームもそうなっていますし、少しでも入力の手間を減らした方が離脱率が下がり、成約率・申し込み率を上げることにも繋がります。

WordPressでは問い合わせフォームを実装するためにプラグイン「Contact Form 7」を使っている方も多いと思います。

Contact Form 7単体では郵便番号からの自動入力ができませんが、「zipaddr-jp」というプラグインを合わせて使うことで自動入力ができるようになります。

なお、プラグインNinja Forms + zipaddr-jpでも同じことはできますが、僕が試した限りではプラグインFlamingoはNinja Formsに対応していません。

Flamingoを使ってデータを蓄積している場合はContact Form 7 + zipaddr-jpで実装するのがおすすめです。

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

WordPressのダッシュボード「プラグイン」→「新規追加」で「zipaddr-jp」と検索し、「インストール」→「有効化」します。

特に設定等はいじらず、初期設定のままで問題ありません。

Contact Form 7でフォームを実装

ダッシュボードの「お問い合わせ」から編集したいフォームを開きます。

zipaddr-jpを追加したことで、以下のidが使えるようになっています。

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

これをフォームに追加していけば良いわけです。

具体的には、以下のように記述します。（郵便番号の場合）

[text* zip id:zip placeholder”例）0001111″]

「placeholder”例）0001111″」のところは記載例ですので、不要であればカットしていただければと思います。

• 郵便番号
• 都道府県
• 市区町村
• 町域
• それ以下

であれば、以下のように書きます。

[text* zip id:zip placeholder”例）1500002″]

[text* pref id:pref placeholder”例）東京都”]

[text* city id:city placeholder”例）渋谷区”]

[text* addr id:addr placeholder”例）渋谷”]

「◯丁目」以下は通常の1行テキストになりますので、たとえば「room」というclassをつけて以下のように書けばOKです。

[text* room class:room placeholder”例）1-1-1渋谷マンション101″]

市区町村のところを一つにまとめ、

• 郵便番号
• 都道府県
• 市区町村
• それ以下

とするのであれば、以下のようにします。

[text* zip id:zip placeholder”例）1500002″]

[text* pref id:pref placeholder”例）東京都”]

[text* city id:city placeholder”例）渋谷区渋谷”]

[text* room class:room placeholder”例）1-1-1渋谷マンション101″]

僕はこちらの形にし、以下のような表形式のコードを書いています。

「メール」タブは以下のように書けば、実際のメールで良い感じで表示されます。

・ご住所
[zip]
[pref][city][room]

こちらのページで実装しています。

セルフマガジン『FAVPRESSO』無料送付