こんにちは！コーダーのゆうしです。
お問い合わせフォームや申し込みフォームに住所入力欄を設ける場合、郵便番号を入力したら住所が自動で入力される機能があると、ユーザーの手間が大幅に減ります。この記事ではWordPressのContact Form 7に YubinBango を組み合わせて郵便番号から住所を自動入力する方法を解説します。プラグイン不要でシンプルに実装できます。
YubinBangoとは？
YubinBangoは日本郵便の郵便番号データをもとに、郵便番号から住所を自動補完できるJavaScriptライブラリです。class 属性を指定するだけで動作するシンプルな設計が特徴で、Contact Form 7との相性も良く実務でよく使っています。
実装の流れ
- YubinBangoをfunctions.phpで読み込む
- Contact Form 7にフォームタグを追加する
- テンプレートファイルにショートコードを埋め込む
① YubinBangoを読み込む
functions.php に以下のコードを追加してYubinBangoを読み込みます。
wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );wp_enqueue_script でスクリプトを登録することでWordPressの仕組みに沿った正しい読み込みができます。
② Contact Form 7にフォームタグを追加する
WP管理画面の「お問い合わせ」→「フォーム」から対象のフォームを編集し、以下のコードを追加します。
<span class="p-country-name" style="display:none;">Japan</span>
<label>郵便番号
〒[text your-zip class:p-postal-code maxlength:8 size:8]</label>
<label>住所
[text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]</label>各クラスの役割
YubinBangoは特定のクラス名を持つ要素を自動で検知して住所を補完します。
| クラス名 | 役割 |
|---|---|
| p-postal-code | 郵便番号の入力欄 |
| p-region | 都道府県 |
| p-locality | 市区町村 |
| p-street-address | 町名・番地 |
| p-extended-address | 建物名・部屋番号など |
| p-country-name | 国名（非表示で Japan を指定） |
住所欄を都道府県・市区町村・番地で分けたい場合は、それぞれ別の入力フィールドにクラスを振り分けるだけで対応できます。
<label>都道府県
[text your-pref class:p-region]</label>
<label>市区町村
[text your-city class:p-locality]</label>
<label>番地
[text your-street class:p-street-address]</label>③ テンプレートファイルにショートコードを埋め込む
フォームをテンプレートファイル（page-contact.php など）に埋め込む場合は do_shortcode() を使います。html_class="h-adr" を忘れずに指定してください。 これがないとYubinBangoが正しく動作しません。
<?php echo do_shortcode('エラー: コンタクトフォームが見つかりません。
'); ?>WPのエディタにショートコードをそのまま貼り付ける場合も html_class="h-adr" を追加してください。
動作確認
実装後は実際に郵便番号を入力して住所が自動補完されるか確認してください。7桁の郵便番号を入力してフォームからフォーカスが外れたタイミングで住所が補完されます。
躓きやすいポイント
住所が自動入力されない
一番よくある原因が html_class="h-adr" の指定漏れです。ショートコードに h-adr クラスが付いていないとYubinBangoが動作しません。必ず確認してください。
郵便番号を入力しても何も起きない
YubinBangoが正しく読み込まれていない可能性があります。ブラウザの開発者ツールのネットワークタブで yubinbango.js が読み込まれているか確認してください。
住所の一部しか入力されない
p-region（都道府県）や p-locality（市区町村）などのクラスが正しく設定されているか確認してください。クラス名のスペルミスが原因のことが多いです。
まとめ
YubinBangoとContact Form 7を組み合わせることで、プラグインを追加せずに郵便番号からの住所自動入力を実装できます。ポイントは h-adr クラスの指定と各フィールドへの正しいクラス付与の2点です。住所入力があるフォームではぜひ活用してみてください。
ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。
