郵便番号から住所を自動入力する送信フォームの作成
お客様から、新たな送信フォームの作成依頼がきました。郵便番号を入力したら住所が自動で入力されるようにして欲しいというご希望でした。個人的には、住所の自動入力には、それほど重要性は感じていないんですが、この住所の自動入力の希望はけっこう多いです。
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作成の知識はないけれど、自分でホームページやブログを立ち上げてみたいという方は、お気軽にお問い合わせください。
お気軽にお問い合わせください!(^^)
WordPressを使って自分自身でホームページやブログを作成してみませんか!?
投稿者プロフィール
最新の投稿
- お知らせ2024年10月2日10月の安曇野風景写真館
- イタリア語講座2024年9月13日#8 フォームを出すモカポットを買ってみました。
- WordPress講座2024年9月9日郵便番号から住所を自動入力する送信フォームの作成
- 雑学講座2024年9月7日新旧千円札の北里柴三郎と野口英世を喋らせてみた