BLOG

【簡単】『Contact Form 7』に郵便番号検索を導入する方法(zipaddr-jp利用)

kanri
本記事はこんな方にオススメです
  • WordPress『Contact Form 7』に郵便番号検索を導入したい方
  • プラグイン『zipaddr-jp』の使い方について知りたい方
  • WordPressを利用している or 利用予定 の方
  • Webデザイナーを目指している方

今回は、WordPressのフォーム作成プラグイン『Contact Form 7』に郵便番号検索を導入する方法について解説します。

プラグイン『zipaddr-jp』を使えば、プログラミング無しで簡単に郵便番号検索を導入することができます。

プラグイン「zipaddr-jp」をインストール

まずは、プラグイン「zipaddr-jp」をインストールしましょう。

1.[プラグイン]-[新規追加]をクリック

2.「zipaddr-jp」と検索し、[今すぐインストール]をクリック

3.[有効化]をクリック

「Contact Form 7」に「zipaddr-jp」で郵便番号検索を導入する方法

「Contact Form 7」の入力欄に、「zipaddr-jp」の機能を使うためのid名を付けるだけで、郵便番号検索が導入できます。

「zipaddr-jp」で郵便番号検索を導入するためのid名一覧

入力項目id名
郵便番号zip
郵便番号(分割)zip – zip1
都道府県pref
市区city
町村area
その他addr
都道府県以外をまとめるpref – addr
町村以降をまとめるpref – city – addr
住所をすべてまとめるaddr

「Contact Form 7」入力欄の記載例

1<tr>
2<th>郵便番号<span>必須</span></th>
3<td>〒 [text* your-zipcode minlength:7 size:8 id:zip] </td>
4</tr>
5
6<tr>
7<th>住所<span>必須</span></th>
8<td>[text* your-address id:addr]</td>
9</tr>
えりー
えりー

「id:zip」などを付けるだけなので、簡単ですね!

下図のようなかたちで、郵便番号を入れると住所が自動入力されます。

▼実際の動作は、当サイトのフォームでご確認いただけます。
https://kusou-design.com/contact/

最後に:WordPressについてのご相談等もお気軽にどうぞ!

空創デザインオフィスでは、ホームページ制作、WordPress導入、自分でホームページを作りたい方やWebデザイナーになりたい方へのサポートなども承っております。

下記ボタンよりお気軽にお問い合わせください!(お見積りは無料です)

ABOUT ME
えりー
えりー
Web・グラフィックデザイナー / ブロガー
フリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
就職活動に苦戦 → ブラック企業に就職 → ホワイト企業に転職 → 起業
自身の経験を元に、Webやデザインのこと、転職・就職のことなどを発信していきます。
記事URLをコピーしました