郵便番号入力で住所が自動表示されるJavaScriptのライブラリ『YubinBango.js』の使い方

お問い合わせフォームで郵便番号を入力すると住所が自動で表示されるようしたいけど出来る？

最初は『そんな事出来るのか？』と思いましたが『YubinBango.js』というJavaScriptのライブラリを使えば簡単に出来ます。

今回はWordPressでお問い合わせフォームの有名なプラグインである『Contact Form 7』を使った時を想定して、YubinBango.jsの使い方について解説します。

もちろんWordPressやContact Form7でないと使えないという訳ではありません。

Contact Form 7の基本的な使い方はこちらの記事を参照ください。

郵便番号入力で住所が自動表示されるJavaScriptのライブラリ『YubinBango.js』の使い方

まずは『YubinBango.js』を読み込みます。

ファイルのダウンロードなどは不要なので、以下のコードで読み込みましょう。

/* headタグで読み込む場合 */
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

/* functions.phpで読み込む場合 */
wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );

『functions.php』での書き方は以下の記事を参照下さい。

フォームの親要素にclass="h-adr"を付ける

まず『formタグ』か『divタグ』にclass="h-adr"を付けて囲みます。

Contact Form 7の場合はformタグを書く必要はないので<div class="h-adr"></div>で囲えば大丈夫ですが、divタグを増やしたくなくてformタグに書きたい場合は、Contact Form 7のショートコードの中にこちらを入れればOKです。

html_class="h-adr"

Contact Form 7のショートコードにコード追加

コード貼るとそのままフォームになってしまうので画像を貼りました。

国名を指定する

この国名を指定したコードを書かないと動作しないので気を付けて下さい。

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

これは先ほどのclass="h-adr"の子要素に書きます。

郵便番号入力欄

郵便番号入力欄にはp-postal-codeというclassを付けます。

また番号を7桁で入力する場合と、3桁と4桁に分けたい場合があると思います。

その違いは以下になります。

<!-- 7桁 -->
[text postal-code2 class:p-postal-code size:8 maxlength:8]
<!-- 3桁と4桁 -->
[text postal-code1 class:p-postal-code size:3 maxlength:3]
[text postal-code2 class:p-postal-code size:4 maxlength:4]

7桁の場合『size』と『maxlength』が『7』だと、ハイフンを入れた場合『000-000』と『数字6桁』しか入力出来ませんが、両方とも8にしておけばハイフンを入れても入れなくても表示されます。

住所入力欄

住所入力欄も決まったclassを付ける必要があります。

都道府県：p-region
市町村区：p-locality
町域：p-street-address
以降の住所：p-extended-address

それぞれ別々に指定することも出来ますし、一緒にしたい場合はこのようになります。

[text region class:p-region class:p-locality class:p-street-address class:p-extended-address]

textのあとの『region』については自動返信などで設定するために必要な名前で、ここは自由に変更可能です。

また通常のinputタグの場合はclassを複数にする場合はこのように書くので間違えないようにご注意下さい（こっちの方が慣れてると思いますが）

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

『YubinBango.js』を使ったお問い合わせフォームのデモ

デモを用意したので実際に入力してご確認下さい。

郵便番号入力欄が1つで、住所入力欄も1つの場合

郵便番号はハイフンがあってもなくても大丈夫になっています。

以下はContact Form 7の編集画面に書いたコードです。

<span class="p-country-name" style="display: none;">Japan</span>
<dl>
  <dt>郵便番号</dt>
  <dd>
    [text postal-code1 class:p-postal-code size:8 maxlength:8]
  </dd>
</dl>
<dl>
  <dt>住所</dt>
  <dd>
    [text region class:p-region class:p-locality class:p-street-address class:p-extended-address]
  </dd>
</dl>

先ほど書きましたが、HTMLにclass="h-adr"を付けなかった場合はdivタグに同じようにclassを付けるので、以下のようになります。

<div class="h-adr">
  <span class="p-country-name" style="display: none;">Japan</span>
  <dl>
    <dt>郵便番号</dt>
    <dd>
      [text postal-code1 class:p-postal-code size:8 maxlength:8]
    </dd>
  </dl>
  <dl>
    <dt>住所</dt>
    <dd>
      [text region class:p-region class:p-locality class:p-street-address class:p-extended-address]
    </dd>
  </dl>
</div>

郵便番号入力欄が2つで、住所入力欄は別々に分かれている場合

ちょっとデザインをしてないので見にくいですが、郵便番号の上が最初の3桁で下が4桁になります。

また以降の住所である『p-extended-address』がありますが、特にない場合は何も表示されません。

あと郵便番号が存在しない場合も何も表示されません。

<span class="p-country-name" style="display: none;">Japan</span>
<dl>
  <dt>郵便番号</dt>
  <dd>
    [text postal-code1 class:p-postal-code size:3 maxlength:3]
    [text postal-code2 class:p-postal-code size:4 maxlength:4]
  </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>
<dl>
  <dt>以降の住所</dt>
  <dd>
    [text extended-address class:p-extended-address]
  </dd>
</dl>