Contact form 7で郵便番号から住所を自動入力する方法として、ajaxzip3ライブラリを使用する方法をご紹介しました。
今回、ajaxzip3の後継ライブラリであるyubinbangoライブラリを使用する方法をご紹介します。
この記事を読むことで、郵便番号の入力欄が1つの場合と2つの場合、自動入力先の住所入力欄が1つの場合、複数の場合などすべてに対応できるようになります。

ajaxzip3に慣れていると少し取っつきにくいですが、yubinbangoライブラリの方がWordpressの場合は使いやすいと思います。
- yubinbangoとajaxzip3の違い
- Contact form 7でyubinbangoを使う
- yubinbangoが動かない、エラーが出た時に確認すべきこと
- まとめ
yubinbangoとajaxzip3の違い
大きな違いは、javascriptを意識する必要があるかないかだと思います。
ajaxzip3ではjavascriptを書く必要がありますが、yubinbangoではCSS classの指定だけで済みます。
WordPressでは、自分で書いたjavascriptを追加するのは面倒ですし、スクリプトが動かなかった時の解析もjavascriptの知識が必要なので、なるべく自分でjavascriptを書くのは避けたいです。
Contact form 7でyubinbangoを使う
yubinbangoが有効になる条件は、CSS classの追加だけです。それに従ってContact form 7のフォームタグにclass指定すれば大丈夫です。
yubinbangoが有効になる条件
- scriptタグでYubinBangoライブラリが読み込まれていること
例: <script src=”https://yubinbango.github.io/yubinbango/yubinbango.js” charset=”UTF-8″></script> - formタグのclass指定の中に h-adr が含まれていること
例: <form class=”h-adr”> - form中で、国名(p-country-name) が Japan に指定されていること
例1: <span class=”p-country-name” style=”display:none;”>Japan</span>
例2: <input type=”hidden” class=”p-country-name” value=”Japan”> - 郵便番号入力欄のclass指定の中に p-postal-code が含まれていること
例1: 〒<input type=”text” class=”p-postal-code” size=”8″ maxlength=”8″>
例2: 〒<input type=”text” class=”p-postal-code” size=”3″ maxlength=”3″><input type=”text” class=”p-postal-code” size=”4″ maxlength=”4″> - 住所欄のclass指定の中に、都道府県名(p-region)、市町村区(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) がそれぞれ含まれていること
scriptタグでYubinBangoライブラリが読み込まれていること
scriptタグでYubinBangoライブラリが読み込まれていること
例: <script src=”https://yubinbango.github.io/yubinbango/yubinbango.js” charset=”UTF-8″></script>
依存関係は特にないので、フッターに読み込みます。
function wpdocs_theme_name_scripts() {
wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
formタグのclass指定の中に h-adr が含まれていること
formタグのclass指定の中に h-adr が含まれていること
例: <form class=”h-adr”>
formタグにclass “h-adr”を追加する場合は、contact form 7のショートコードの引数として指定します。
[ contact-form-7 id="1" title="コンタクトフォーム" html_class="h-adr"]
form中で、国名(p-country-name) が Japan に指定されていること
form中で、国名(p-country-name) が Japan に指定されていること
例1: <span class=”p-country-name” style=”display:none;”>Japan</span>
例2: <input type=”hidden” class=”p-country-name” value=”Japan”>
form中なので、コンタクトフォームの中に以下の記述を追加します。場所はどこでもよいです。
<span class="p-country-name" style="display: none;">Japan</span>
郵便番号入力欄のclass指定の中に p-postal-code が含まれていること
郵便番号入力欄のclass指定の中に p-postal-code が含まれていること
例1: 〒<input type=”text” class=”p-postal-code” size=”8″ maxlength=”8″>
例2: 〒<input type=”text” class=”p-postal-code” size=”3″ maxlength=”3″><input type=”text” class=”p-postal-code” size=”4″ maxlength=”4″>
郵便番号入力欄が1つの場合
[text your-zipcode class:p-postal-code maxlength:8 size:8]
郵便番号入力欄が2つに分かれている場合
2つに分かれている場合も追加するclassは同じです。
[text your-zipcode1 class:p-postal-code maxlength:3 size:4]ー[text your-zipcode2 class:p-postal-code maxlength:4 size:5]
住所欄のclass指定の中に、都道府県名(p-region)、市町村区(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) がそれぞれ含まれていること
住所は、4つのclassを必ず割り当てる必要がある。どこにどういう組み合わせで割り当てるかは自由なので、1つづつに分けてもいいし、まとめて指定してもよい。
住所の入力項目がそれぞれ分かれている場合
[text your-region class:p-region]
[text your-locality class:p-locality]
[text your-street class:p-street-address]
[text your-extended class:p-extended-address]
住所の入力項目がまとまっている場合
[text your-region class:p-region class:p-locality class:p-street-address class:p-extended-address]
yubinbangoが動かない、エラーが出た時に確認すべきこと
- formタグにh-adrクラスがあるかどうか
- formタグがきちんとすべてのフォーム要素を囲んでいるかどうか
- yubinbangoに必要なすべてのclassが指定されているかどうか
まとめ
ajaxzip3とyubinbangoどちらが良いかというと、javascriptの記述が必要ないのでyubinbangoの方が使い勝手は良い気がします。
ただ、h-adrクラスの追加や、国の指定などがajaxzip3と比べて追加で必要になります。
Contact form 7の時にyubinbangoを使う時の手順は今回の記事通りに行えば、すぐに使えますので参考にしてみてください。