お問い合わせはコチラから

Contact form 7 郵便番号から住所自動入力(yubinbangoライブラリ)

サイト運営

Contact form 7で郵便番号から住所を自動入力する方法として、ajaxzip3ライブラリを使用する方法をご紹介しました。

今回、ajaxzip3の後継ライブラリであるyubinbangoライブラリを使用する方法をご紹介します。

この記事を読むことで、郵便番号の入力欄が1つの場合と2つの場合、自動入力先の住所入力欄が1つの場合、複数の場合などすべてに対応できるようになります。

ajaxzip3に慣れていると少し取っつきにくいですが、yubinbangoライブラリの方がWordpressの場合は使いやすいと思います。

yubinbangoとajaxzip3の違い

大きな違いは、javascriptを意識する必要があるかないかだと思います。

ajaxzip3ではjavascriptを書く必要がありますが、yubinbangoではCSS classの指定だけで済みます。

WordPressでは、自分で書いたjavascriptを追加するのは面倒ですし、スクリプトが動かなかった時の解析もjavascriptの知識が必要なので、なるべく自分でjavascriptを書くのは避けたいです。

Contact form 7でyubinbangoを使う

yubinbangoが有効になる条件は、CSS classの追加だけです。それに従ってContact form 7のフォームタグにclass指定すれば大丈夫です。

yubinbangoが有効になる条件

yubinbangoが有効になる条件
  1. scriptタグでYubinBangoライブラリが読み込まれていること
    例: <script src=”https://yubinbango.github.io/yubinbango/yubinbango.js” charset=”UTF-8″></script>
  2. formタグのclass指定の中に h-adr が含まれていること
    例: <form class=”h-adr”>
  3. 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”>
  4. 郵便番号入力欄の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″>
  5. 住所欄の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が動かない、エラーが出た時に確認すべきこと

yubinbangoが動かない、エラーが出た時に確認すべきこと
  1. formタグにh-adrクラスがあるかどうか
  2. formタグがきちんとすべてのフォーム要素を囲んでいるかどうか
  3. yubinbangoに必要なすべてのclassが指定されているかどうか

まとめ

ajaxzip3とyubinbangoどちらが良いかというと、javascriptの記述が必要ないのでyubinbangoの方が使い勝手は良い気がします。

ただ、h-adrクラスの追加や、国の指定などがajaxzip3と比べて追加で必要になります。

Contact form 7の時にyubinbangoを使う時の手順は今回の記事通りに行えば、すぐに使えますので参考にしてみてください。

タイトルとURLをコピーしました