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

郵便番号入力すると住所が自動表示されるYubinBango.jsの使い方

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

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

今回はWordPressでお問い合わせフォームの有名プラグインであるContact Form7を使った時を想定して、YubinBango.jsの使い方について解説します（Contact Form7の使い方は説明していませんm(__)m）

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

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

 

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

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

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

html_class="h-adr"

を入れればOKです。

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

 

国名を指定する

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

<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"/>

 

デモ

デモを用意したのでご確認下さい。

 

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

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

    郵便番号
    住所

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

    <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 Form7を例に解説してきましたが、静的サイトの場合は[text ～]の部分をinputタグに置き換えて貰えれば大丈夫です（classの指定がライブラリに関係してくるので）

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