Web制作 JavaScript

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

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

あわせて読みたい
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

郵便番号入力で住所が自動表示される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』での書き方は以下の記事を参照下さい。

あわせて読みたい
WordPressオリジナルテーマの作り方③(functions.php編)
WordPressオリジナルテーマの作り方③(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のショートコードにコード追加

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>

      まとめ

      今回は郵便番号入力で住所が自動表示されるJavaScriptのライブラリ『YubinBango.js』の使い方を解説しました。

      今回はContact Form 7を例に解説してきましたが、静的サイトの場合は[text ~]の部分をinputタグに置き換えて貰えれば大丈夫です(classの指定がライブラリに関係してくるので)

      以上になります。

       

      Web制作おすすめ教材と案件獲得サービス
      当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
      こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
      また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
      スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
      この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

      -Web制作, JavaScript
      -