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

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

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)prefcityaddr
    zip2(zip21)pref2city2addr2
    zip3(zip31)pref3city3addr3
    zip4(zip41)pref4city4addr4
    zip5(zip51)pref5city5addr5
    zip6(zip61)pref6city6addr6

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

    お気軽にお問い合わせください!(^^)

    WordPressを使って自分自身でホームページやブログを作成してみませんか!?

    投稿者プロフィール

    shinmic
    shinmic
    松本市で活動しているフリーランスの2人組です。
    地域に根差したハートフルな対応を心がけています!