2020.04.19 2020.10.04

簡単！郵便番号で住所自動入力！YubinBango.jsの使い方

この記事は、最初の投稿から4年以上が経過しています。

最終更新から1293日が経過しています。

「郵便番号だけで簡単に住所を自動入力できる方法を知りたい」

「YubinBango.jsの使い方を知りたい」

こんな悩みにお答えします｡

2015年からWeb制作の仕事をはじめて､160件ほどのWebサイトを制作してきました｡
ほとんどのコーポレートサイトでメールフォームは設置しています｡

この記事ではこんなことがわかります｡

郵便番号検索ライブラリ「YubinBango」の使い方
基本的な使い方デモ
WordPressプラグイン「MW WP Form」のデモ
WordPressプラグイン「Contact Form 7」のデモ

YubinBango.jsを使うことで､問い合わせフォームの住所入力が簡単にできるようになり､問い合わせや資料請求など(コンバージョン)の向上が期待できます｡

目次

YubinBango とは
設定方法
デモ
デモ (WordPressプラグインの場合)
1. MW WP Form
2. Contact Form 7
まとめ

YubinBango とは

YubinBangoとは､郵便番号を入力するだけで住所を検索､出力してくれるJavaScriptライブラリです｡
これまでよく使用していた「ajaxzip3」も便利でしたが､さらに便利､簡単になりました｡
formに使うタグにclassを設定するだけでJavaScriptを書く必要がありません｡

GitHub - yubinbango/yubinbango

Contribute to yubinbango/yubinbango development by creating an account on GitHub.

設定方法

ライブラリを読み込む

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

入力欄の親要素にclass指定に h-adr を指定する

入力欄の親要素にclass="h-adr"を指定します｡

GitHubの解説には「formタグのclass指定の中に h-adr が含まれていること」とありますが､必ずしもformタグでなくてもよいようです｡
同じフォームに複数住所を入力する場合は注意が必要です｡

<form class="h-adr">

</form>

<div class="h-adr">

</div>

国名(p-country-name) を指定する

class="h-adr"の子要素に国名(p-country-name) が Japan に指定します｡

多くの場合は､住所入力に日本まで必要ないので非表示の指定でいいと思います｡

//日本国内のみの場合はこちら
<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>

</div>

//多言語サイト等で国名も必要な場合
<div class="h-adr">
  <input type="hidden" class="p-country-name" value="Japan">

</div>

郵便番号入力欄にclass指定する

郵便番号入力欄のclass指定の中に p-postal-code を指定します｡
多くの場合は､住所入力に日本まで必要ないので非表示の指定でいいと思います｡

//入力欄ひとつの場合
<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  〒<input type="text" class="p-postal-code" size="8" maxlength="8">

</div>

//入力欄ふたつの場合
<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  〒<input type="text" class="p-postal-code" size="3" maxlength="3">
  <input type="text" class="p-postal-code" size="4" maxlength="4">

</div>

住所入力欄にclass指定する

住所欄のclass指定の中に､都道府県名(p-region)､市町村区(p-locality)､町域(p-street-address)､以降の住所(p-extended-address) をそれぞれ指定します｡

<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>

  〒<input type="text" class="p-postal-code" size="8" maxlength="8">

  <input type="text" class="p-region p-locality p-street-address p-extended-address">
</div>

デモ

基本設定

基本設定のデモ

<form class="h-adr">
  <span class="p-country-name" style="display: none;">Japan</span>

  <dl>
    <dt>郵便番号</dt>
    <dd>〒<input type="text" class="p-postal-code" size="8" maxlength="8" /></dd>
  </dl>

  <dl>
    <dt>住所</dt>
    <dd>
      <input type="text" class="p-region p-locality p-street-address p-extended-address">
    </dd>
  </dl>
</form>

住所欄を分ける設定(都道府県input)

住所欄を分ける設定(都道府県input)のデモ

<form class="h-adr">
  <span class="p-country-name" style="display: none;">Japan</span>

  <dl>
    <dt>郵便番号</dt>
    <dd>
      <span>〒</span>
      <span>
        <input type="text" class="p-postal-code" size="3" maxlength="3" />
      </span>
      <span>-</span>
      <span>
        <input type="text" class="p-postal-code" size="4" maxlength="4" />
      </span>
    </dd>
  </dl>

  <dl>
    <dt>都道府県</dt>
    <dd>
      <input type="text" class="p-region" readonly />
    </dd>
  </dl>

  <dl>
    <dt>市町村区</dt>
    <dd>
      <input type="text" class="p-locality" readonly />
    </dd>
  </dl>

  <dl>
    <dt>町域</dt>
    <dd>
      <input type="text" class="p-street-address" />
    </dd>
  </dl>

  <dl>
    <dt>以降の住所</dt>
    <dd>
      <input type="text" class="p-extended-address" />
    </dd>
  </dl>
</form>

住所欄を分ける設定(都道府県select)

住所欄を分ける設定(都道府県select)のデモ

<form class="h-adr">
  <span class="p-country-name" style="display: none;">Japan</span>

  <dl>
    <dt>郵便番号</dt>
    <dd>
      <span>〒</span>
      <span>
        <input type="text" class="p-postal-code" size="3" maxlength="3" />
      </span>
      <span>-</span>
      <span>
        <input type="text" class="p-postal-code" size="4" maxlength="4" />
      </span>
    </dd>
  </dl>

  <dl>
    <dt>都道府県</dt>
    <dd>
      <select class="p-region">
        <option value="">-- 選択してください --</option>
        <option value="北海道">北海道</option>
        <option value="青森県">青森県</option>
        <option value="岩手県">岩手県</option>
        <option value="宮城県">宮城県</option>
        <option value="秋田県">秋田県</option>
        <option value="山形県">山形県</option>
        <option value="福島県">福島県</option>
        <option value="茨城県">茨城県</option>
        <option value="栃木県">栃木県</option>
        <option value="群馬県">群馬県</option>
        <option value="埼玉県">埼玉県</option>
        <option value="千葉県">千葉県</option>
        <option value="東京都">東京都</option>
        <option value="神奈川県">神奈川県</option>
        <option value="新潟県">新潟県</option>
        <option value="富山県">富山県</option>
        <option value="石川県">石川県</option>
        <option value="福井県">福井県</option>
        <option value="山梨県">山梨県</option>
        <option value="長野県">長野県</option>
        <option value="岐阜県">岐阜県</option>
        <option value="静岡県">静岡県</option>
        <option value="愛知県">愛知県</option>
        <option value="三重県">三重県</option>
        <option value="滋賀県">滋賀県</option>
        <option value="京都府">京都府</option>
        <option value="大阪府">大阪府</option>
        <option value="兵庫県">兵庫県</option>
        <option value="奈良県">奈良県</option>
        <option value="和歌山県">和歌山県</option>
        <option value="鳥取県">鳥取県</option>
        <option value="島根県">島根県</option>
        <option value="岡山県">岡山県</option>
        <option value="広島県">広島県</option>
        <option value="山口県">山口県</option>
        <option value="徳島県">徳島県</option>
        <option value="香川県">香川県</option>
        <option value="愛媛県">愛媛県</option>
        <option value="高知県">高知県</option>
        <option value="福岡県">福岡県</option>
        <option value="佐賀県">佐賀県</option>
        <option value="長崎県">長崎県</option>
        <option value="熊本県">熊本県</option>
        <option value="大分県">大分県</option>
        <option value="宮崎県">宮崎県</option>
        <option value="鹿児島県">鹿児島県</option>
        <option value="沖縄県">沖縄県</option>
      </select>
    </dd>
  </dl>

  <dl>
    <dt>市町村区</dt>
    <dd>
      <input type="text" class="p-locality" readonly />
    </dd>
  </dl>

  <dl>
    <dt>町域</dt>
    <dd>
      <input type="text" class="p-street-address" />
    </dd>
  </dl>

  <dl>
    <dt>以降の住所</dt>
    <dd>
      <input type="text" class="p-extended-address" />
    </dd>
  </dl>
</form>

住所欄を分ける設定(複数設置)

住所欄を分ける設定(複数設置)のデモ

<form>
  <div class="h-adr">
    <span class="p-country-name" style="display: none;">Japan</span>

    <dl>
      <dt>郵便番号</dt>
      <dd>
        <span>〒</span>
        <span>
          <input type="text" class="p-postal-code" size="3" maxlength="3" />
        </span>
        <span>-</span>
        <span>
          <input type="text" class="p-postal-code" size="4" maxlength="4" />
        </span>
      </dd>
    </dl>

    <dl>
      <dt>都道府県</dt>
      <dd>
        <input type="text" class="p-region" readonly />
      </dd>
    </dl>

    <dl>
      <dt>市町村区</dt>
      <dd>
        <input type="text" class="p-locality" readonly />
      </dd>
    </dl>

    <dl>
      <dt>町域</dt>
      <dd>
        <input type="text" class="p-street-address" />
      </dd>
    </dl>

    <dl>
      <dt>以降の住所</dt>
      <dd>
        <input type="text" class="p-extended-address" />
      </dd>
    </dl>
  </div>

  <div class="h-adr">
    <span class="p-country-name" style="display: none;">Japan</span>

    <dl>
      <dt>郵便番号</dt>
      <dd>
        <span>〒</span>
        <span>
          <input type="text" class="p-postal-code" size="3" maxlength="3" />
        </span>
        <span>-</span>
        <span>
          <input type="text" class="p-postal-code" size="4" maxlength="4" />
        </span>
      </dd>
    </dl>

    <dl>
      <dt>都道府県</dt>
      <dd>
        <input type="text" class="p-region" readonly />
      </dd>
    </dl>

    <dl>
      <dt>市町村区</dt>
      <dd>
        <input type="text" class="p-locality" readonly />
      </dd>
    </dl>

    <dl>
      <dt>町域</dt>
      <dd>
        <input type="text" class="p-street-address" />
      </dd>
    </dl>

    <dl>
      <dt>以降の住所</dt>
      <dd>
        <input type="text" class="p-extended-address" />
      </dd>
    </dl>
  </div>
</form>

デモ (WordPressプラグインの場合)

MW WP Form

<div class="h-adr">
  <span class="p-country-name" style="display: none;">Japan</span>

  <dl>
    <dt>郵便番号</dt>
    <dd>
      <span>〒</span>
      <span>
        [mwform_text name="postal-code1" class="p-postal-code" size="3" maxlength="3"]
      </span>
      <span>-</span>
      <span>
        [mwform_text name="postal-code2" class="p-postal-code" size="4" maxlength="4"]
      </span>
    </dd>
  </dl>

  <dl>
    <dt>都道府県</dt>
    <dd>
      [mwform_text name="region" class="p-region"]
    </dd>
  </dl>

  <dl>
    <dt>市町村区</dt>
    <dd>
      [mwform_text name="locality" class="p-locality"]
    </dd>
  </dl>

  <dl>
    <dt>町域</dt>
    <dd>
      [mwform_text name="street-address" class="p-street-address"]
    </dd>
  </dl>
</div>

MW WP Formの使い方やカスタマイズについては､以下､記事にまとめています｡

フォームカスタマイズに便利！MW WP Formの使い方まとめ【WordPress】

WordPressのメールフォームをカスタマイズする方法を知りたいですか？この記事では、カスタマイズに便利なプラグインMW WP Formの使い方、カスタマイズ方法などをまとめて紹介しています。ぜひご覧ください。

Contact Form 7

<div class="h-adr">
  <span class="p-country-name" style="display: none;">Japan</span>

  <dl>
    <dt>郵便番号</dt>
    <dd>
      <span>〒</span>
      <span>
        [text postal-code1 class:p-postal-code size:3 maxlength:3]
      </span>
      <span>-</span>
      <span>
        [text postal-code2 class:p-postal-code size:4 maxlength:4]
      </span>
    </dd>
  </dl>

  <dl>
    <dt>都道府県</dt>
    <dd>
      [text region class:p-region]
    </dd>
  </dl>

  <dl>
    <dt>市町村区</dt>
    <dd>
      [text locality class:p-locality]
    </dd>
  </dl>

  <dl>
    <dt>町域</dt>
    <dd>
      [text street-address class:p-street-address]
    </dd>
  </dl>
</div>

住所自動入力以外のメールフォーム最適化の方法をこちらの記事で紹介しています｡