最初そんな事出来るのか？と思いましたが、YubinBango.jsというライブラリを使えば簡単に出来ます。
今回はWordPressでお問い合わせフォームの有名プラグインであるContact Form7を使った時を想定して、YubinBango.jsの使い方について解説します（Contact Form7の使い方は説明していませんm(__)m）
もちろんWordPressやContact Form7でないと使えないという訳ではありません。
効率よくWordPress制作したい人はこちら
郵便番号入力で住所が自動表示される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の指定がライブラリに関係してくるので）
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約300件 今だけ！5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる！
（平均スコア）
