お問い合わせフォームで郵便番号を入力したら自動で住所が入力されるような仕様にしたいときに使えるのが「YubinBango」というライブラリです。
classを指定するだけで使えるのでかなり簡単です。
この記事では、WordPressのプラグイン「Contact Form 7」でお問い合わせフォームを設置し、「YubinBango」を使いたいと思います。
YubinBangoを読み込む
まずfunctions.phpに以下のように記述してYubinBangoを読み込みます。
wp_enqueue_script( ‘yubinbango’, ‘https://yubinbango.github.io/yubinbango/yubinbango.js’, array(), null, true );
Contact Form 7での設定
次にContact Form 7でお問い合わせフォームを設置し、YubinBangoが有効になるようにしていきます。
ポイントは次の通り。
- formタグのclassでh-adrをつける
- form中で国名（p-country-name）をJapanに指定
- 郵便番号入力欄のclassでp-postal-codeをつける
- 住所入力欄のclassで都道府県（p-region）、市町村区（p-locality）、町域（p-street-address）、以降の住所（p-extended-address）をそれぞれつける
formタグのclass名にh-adrをつける必要があり、Contact Form 7はショートコードでformタグが生成されるのでショートコードに「html_class=”h-adr”」をつけます。
次にform中で国名（p-country-name）をJapanに指定をつける必要があるのですが、次のどちらかのように記述すればOKです。
<span class=”p-country-name” style=”display: none;”>Japan</span>
これは実際にフォームには表示されませんが、記述が必要です。
次に郵便番号入力欄のタグのclass名にp-postal-codeをつけます。
そして、住所の入力欄のタグのclass名に都道府県（p-region）、市町村区（p-locality）、町域（p-street-address）、以降の住所（p-extended-address）をつけます。
このようにひとつの入力欄に複数のclassをつけてもいいですし、
<input type=”text” class=”p-locality”>
<input type=”text” class=”p-street-address”>
<input type=”text” class=”p-extended-address”>
このように入力欄を分けてもいいです。
以上で完了。郵便番号入力すれば自動で住所が入力されます。
例えば、Contact Form 7で設定してみると以下のようになります。
<label> お名前 (必須)
[text* your-name] </label>
<label> メールアドレス (必須)
[email* your-email] </label>
<label> 郵便番号
[text address-postal class:p-postal-code] </label>
<label> 都道府県
[text address-pref class:p-region] </label>
<label> 市町村
[text address-city class:p-locality] </label>
<label> 番地
[text address-street class:p-street-address] </label>
<label> 内容
[textarea your-message] </label>
複数の住所入力がある場合
1つのフォームの中に複数の住所がある場合は、h-adrがついたdivなどを2つ用意し、その中に国名、郵便番号、住所欄を設けます。
[text* your-name] </label>
<label> メールアドレス (必須)
[email* your-email] </label>
<div class=”h-adr”>
<p>住所１</p>
<span class=”p-country-name” style=”display: none;”>Japan</span>
<label> 郵便番号
[text address-postal class:p-postal-code] </label>
<label> 都道府県
[text address-pref class:p-region] </label>
<label> 市町村
[text address-city class:p-locality] </label>
<label> 番地
[text address-street class:p-street-address] </label>
</div>
<div class=”h-adr”>
<p>住所２</p>
<span class=”p-country-name” style=”display: none;”>Japan</span>
<label> 郵便番号
[text address-postal class:p-postal-code] </label>
<label> 都道府県
[text address-pref class:p-region] </label>
<label> 市町村
[text address-city class:p-locality] </label>
<label> 番地
[text address-street class:p-street-address] </label>
</div>
<label> 内容
[textarea your-message] </label>
このようにすれば住所１と住所２がそれぞれ機能します。
住所入力をボタンクリック時に変更する
通常は郵便番号を入力した時点で住所が自動入力されるのですが、郵便番号を入力し、ボタンをクリックしたタイミングで住所が自動入力されるようにしたい場合があると思います。
その時は以下のようなスクリプトを書き、ボタンにpostal-searchというclass名をつけます。
postal-searchはスクリプトで指定するclass名と一致していればいいので、他の名前でもOKです。
var hadr = document.querySelector(‘.h-adr’),
cancelFlag = true;
var onKeyupCanceller = function(e) {
if(cancelFlag){
e.stopImmediatePropagation();
}
return false;
};
var postalcode = hadr.querySelectorAll(‘.p-postal-code’),
postalField = postalcode[postalcode.length – 1];
postalField.addEventListener(‘keyup’, onKeyupCanceller, false);
var btn = hadr.querySelector(‘.postal-search’);
btn.addEventListener(‘click’, function(e) {
cancelFlag = false;
let event;
if(typeof Event === ‘function’) {
event = new Event(‘keyup’);
} else {
event = document.createEvent(‘Event’);
event.initEvent(‘keyup’, true, true);
}
postalField.dispatchEvent(event);
cancelFlag = true;
});
});
まとめ
YubinBangoを使えば郵便番号から住所を自動入力する機能を簡単に実装することができ、Contact Form 7でも使用することができます。
YubinBangoライブラリを有効にするのに必要なのは下記の通りです。
- formタグのclassでh-adrをつける
- form中で国名（p-country-name）をJapanに指定
- 郵便番号入力欄のclassでp-postal-codeをつける
- 住所入力欄のclassで都道府県（p-region）、市町村区（p-locality）、町域（p-street-address）、以降の住所（p-extended-address）をそれぞれつける
Leave a Comment