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」と検索し、「インストール」→「有効化」します。

プラグイン「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″]

 

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

Contact Form 7でのコードの記述の仕方

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

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

 

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

サービスメニュー

Postscript執筆後記

今日は決算、夕方に新規のお客様と打ち合わせ。

お昼に最近独立されたスタッフさんのキッチンカーに行ってきました。
肉がやわらかく、味付けも絶妙で美味しかったです。

Something New一日一新

キッチンカー ほおばる
セルフマガジン表示用のテンプレート作成

\本を出版しました/

\セルフマガジン無料送付/

Seiji Aihara / 相原 征爾

Seiji Aihara / 相原 征爾

お金・時間・やりがいなどのバランスを取り人生を楽しむことをサポートする、東京の30代税理士。ひとり社長。
ブログ「FAVPRESSO」は平日毎日更新。

得意な仕事はクラウド会計の導入・ペーパーレス化・経理業務効率化・各種シミュレーション・独立支援など。
遠方・オンライン・スポット対応可能です。
簿記がわからなくても、一から経理ができるようにお伝えします。
Windows・Mac両対応。

音楽、映画、インターネット、カレー、クラフトビールが大好き。
名刺、ロゴ、WordPressテーマ、本の表紙から音楽まで自作する、自称超クリエイティブ。

詳しいプロフィールはこちら
税理士事務所のHP・サービス一覧はこちら

著書 『独立して人生を楽しむ方法』