【導入も簡単】WordPressでも利用できる「Zipaddr」で住所入力の手間を削減しよう！

入力フォームで郵便番号や住所を入力するのは正直面倒ですよね。

そんな面倒な住所入力を補助できるJavaScriptライブラリ「Zipaddr」について紹介いたします。

目次

• 実装例
• 「Zipaddr」を早速使ってみる
• WordPressでZipaddrを使用する
  • Contact Form 7 でZipaddrを使用する
  • MW WP Form でZipaddrを使用する
• まとめ

実装例

Zippaddrを使用すると以下のような挙動になります。

「郵便番号」に任意の郵便番号を入力してみましょう。

郵便番号はハイフンがあってもなくても動きます。

See the Pen Untitled by Ito Hiroki (@ito-hiroki) on CodePen.

「Zipaddr」を早速使ってみる

早速ですが、「Zippaddr」のライブラリを使用してみましょう。

導入の仕方としてはheadタグ内に以下のCDNを読み込みます。

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

詳しくは公式からご覧ください。

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

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

id=”addr”のみの設定で住所の全体を取得することができます。

郵便番号<input type="text" id="zip">
住所 <input type="text" id="addr">

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

• 3桁郵便番号：zip1
• 4桁郵便番号：zip2

郵便番号<input type="text" id="zip1">-<input type="text" id="zip2">
住所 <input type="text" id="addr">

とします。

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

<!-- inputタグを使用する場合 -->
郵便番号 <input type="text" id="zip">
都道府県 <input type="text" id="pref">

<!-- selectタグを使用する場合 -->
郵便番号 <input type="text" id="zip">
都道府県 <select type="text" id="pref"></select>

selectタグを使用する場合はoptionがなくても自動で都道府県が入力されます。

その場合、valueが数字になるため、カスタマイズをしたい場合はvalueを指定したoptionを設定する必要があります。

WordPressでZipaddrを使用する

察しの良い方は気がついていると思いますが、Zipaddrではid属性さえ指定できれば簡単に導入できるため、WordPressのプラグインでも導入することが可能です。

Contact Form 7 でZipaddrを使用する

Contact Form 7 は「id:〇〇」でidを指定できます。

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

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

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

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

[submit]

MW WP Form でZipaddrを使用する

MW WP Formではフォームタグで「id=”〇〇”」といった形でid属性をします。

郵便番号 [mwform_text name="zip" id="zip" size="60"]
都道府県 [mwform_text name="pref" id="pref" size="60"]
市区町村 [mwform_text name="city" id="city" size="60"]
その他住所　[mwform_text name="addr" id="city" size="60"]

まとめ

Zipaddrは導入も簡単、かつ入力するユーザーも簡単に扱えるJavaScriptライブラリです。

あくまで「入力補助」なので、住所が違う場合はユーザーに編集してもらえるようにしましょう。（readonlyなどにはしないようにしましょう）