WP Contactform7 で住所の自動入力　複数の住所入力欄

2023年5月19日

プラグインYubinbango.js　を使って自動住所入力を可能にする場合の記事はたくさん見かけましたが、
１つのフォーム内に複数の住所欄がある場合については少し探す手間があったので覚書。

そもそもこのプラグインを使うためには必要な項目がある。

1. WPにCDNの情報を読み込む
   wp_enqueue_script( 'yubinbango’, 'https://yubinbango.github.io/yubinbango/yubinbango.js’ );
2. 「h-adr」というクラスで囲われてる
3. 「p-country-name」というクラスで国名（Japan）の記載がある
4. 以下のクラス名が全て存在している
   「p-postal-code」郵便番号
   「p-region」都道府県
   「p-locality」市区町村
   「p-street-address」町域
   「p-extended-address」以降の住所

これを踏まえて、複数住所入力欄がある場合の実例です

<div class="h-adr">
<span class="p-country-name" style="display: none;">Japan</span>
<dl>
<dt>郵便番号</dt>
<dd>〒 [text your-zipcode class:p-postal-code maxlength:8]</dd>
</dl>
<dl>
<dt>都道府県</dt>
<dd>[text your-region class:p-region]</dd>
</dl>
<dl>
<dt>市区町村</dt>
<dd>[text your-locality class:p-locality]</dd>
</dl>
<dl>
<dt>町域</dt>
<dd>[text your-street class:p-street-address]</dd>
</dl>
<dl>
<dt>それ以降</dt>
<dd>[text your-extended class:p-extended-address]</dd>
</dl>
</div>

この一括りを繰り返す形です。
your-〇〇　となっているのはこのinputに対するnameになるので、
２つ目以降はそれぞれ変えていく必要があります。