Web it Works

2021.02.22

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

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

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

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

とします。

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

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

デモ

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


    デモの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タグにスクリプトコード1行で導入、指定されたid付与で実装完了。

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

     
    >
    Web制作
    >
    WordPressでも利用可能「Zipaddr」で住所入力の手間を大幅削減!