郵便番号から住所を自動入力する送信フォームの作成

2024年9月9日 2024年9月9日 shinmic

shinmic

お客様から、新たな送信フォームの作成依頼がきました。郵便番号を入力したら住所が自動で入力されるようにして欲しいというご希望でした。個人的には、住所の自動入力には、それほど重要性は感じていないんですが、この住所の自動入力の希望はけっこう多いです。

htmlでWebページを作ってた頃は、住所の自動入力できる送信フォームを作るのって、それなりに手間だったんですが、WordPressなら、プラグインをインストールするだけで簡単にできちゃいます。ということで、住所が自動入力される送信フォームの作り方を書いておきます。

zipaddr-jpのインストール

WordPressの「新規プラグインの追加」より、zipaddr-jpを検索し、インストール、有効化します。
設定画面もありますが、特に何もいじらなくてもOKです。

Contact Form 7で自動入力作成

送信フォームは定番のContact Form 7で作成するとします。フォームタブの住所入力欄を作りたい場所に、以下のように入力します。入力欄のタグ部分以外は、お好きな形で使用してください。

<label> 郵便番号　<span style="color:red">必須</span>
   [text* zip id:zip]</label>

<label> 都道府県　<span style="color:red">必須</span>
    [text* pref id:pref] </label>

<label> 市区町村　<span style="color:red">必須</span>
    [text* city id:city] </label>

<label> 市区町村以降の住所　<span style="color:red">必須</span>
    [text* addr id:addr] </label>

今回はメールアドレスの入力欄とメッセージ入力欄の間に住所入力欄を作ってみました。

エラー: コンタクトフォームが見つかりません。

試しに郵便番号を入力してみてください。ただし、この送信フォームからは送信はできませんので、あしからず。(^^;

大事なポイントは各項目のidを次のように設定することです。

郵便番号 — zip
都道府県 — pref
市区町村 — city
市区町村以降の住所 — addr

送信フォームに住所入力が1つだけの場合は、上のパターンでOKなんですが、たまに、一つのフォーム内に複数の住所入力が必要になる場合があります。その場合は、以下の表のようにidを定義します。

郵便番号	都道府県	市区町村	市区町村以降の住所
zip （zip1）	pref	city	addr
zip2（zip21）	pref2	city2	addr2
zip3（zip31）	pref3	city3	addr3
zip4（zip41）	pref4	city4	addr4
zip5（zip51）	pref5	city5	addr5
zip6（zip61）	pref6	city6	addr6

WordPressでは、このようにプラグインをインストールすれば、住所が自動入力される送信フォームも簡単に作れてしまいます。
WordPress講座では、このような送信フォームの作成も、実際にサイトを作りながら覚えていってもらっています。Web作成の知識はないけれど、自分でホームページやブログを立ち上げてみたいという方は、お気軽にお問い合わせください。