Web制作 WordPress お問い合わせフォーム 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お問い合わせフォームの定番プラグイン】

続きを見る

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


郵便番号入力で住所が自動表示される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>

      以上になります。

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

       

      コーディングの時給と作業効率を上げる!
      2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
      • コピペで使えるWordPressの各テンプレート
      • 実務でよく使う見出し一覧
      • 実務でよく使うテキストのhoverアニメーション
      • 実務でよく使うボタン内の矢印9種類
      • Contact Form 7の色々・・・
      などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
      さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
      レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

      今だけ!5大無料特典あり🎁

      販売ページとレビューを見てみる


      ブログランキング・にほんブログ村へ
      • この記事を書いた人

      じゅんぺい

      タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

      -Web制作, WordPress, お問い合わせフォーム, JavaScript
      -