WordPressでも利用可能「Zipaddr」で住所入力の手間を大幅削減！

こんにちは、Web it Works の伊東です。

今回は住所自動入力 JavaScript ライブラリ「Zipaddr」についてご紹介します。

導入方法

headタグ内に以下のコードを利用して読み込みます。

詳しくは提供者のサイトから。

<script src="https://zipaddr.github.io/zipaddrx.js" charset="UTF-8"></script>

そして入力フォームにそれぞれ指定されたidを振ります。

• 郵便番号：zip
• 都道府県：pref
• 市区町村：city
• 地域：area
• 番地：addr

郵便番号を３桁、４桁のふたつに分ける場合は

• ３桁郵便番号：zip1
• ４桁郵便番号：zip2

とします。

都道府県の入力欄に関してはselectタグでもinputタグでも利用可能です。

都道府県、市区町村などの全ての住所入力欄が一つの場合はidをaddrにすれば大丈夫です。

デモ

でもをご用意しました。郵便番号を入力してみてください。

[contact-form-7 id=”197″ title=”デモ”]

デモのHTMLソースコード

通常のHTMLコード導入する場合は以下のような記述をします。

<label> 
    郵便番号
   <input type="text" id="zip">
</label>
<label> 
    都道府県
   <input type="text" id="pref">
</label>
<label> 
   市区町村
   <input type="text" id="city">
</label>
<label> 
   その他住所
   <input type="text" id="addr">
</label>

このコードをformタグで囲み、submitボタンを付ければそのまま使えます。

WordPressプラグイン「Contact Form 7」で利用する場合

Contact Form 7 でZipaddrを利用する場合は以下のようなコードになります。

<label> 郵便番号
   [text id:zip] </label>

<label> 都道府県
    [text id:pref] </label>

<label> 市区町村
    [text id:city] </label>

<label> その他住所
    [text id:addr] </label>

[submit]

これだけで簡単に導入できます。便利！

まとめ

Zipaddr、すごく簡単でしたよね！

headタグにスクリプトコード１行で導入、指定されたid付与で実装完了。

商用無料で使えるので、是非使ってみてください！