Contact Form 7 で住所の自動入力を実装する方法

2026.01.23
WordPress

Contact Form 7 にYubinBango.jsを使用して、郵便番号から住所を自動入力するフォームを作成する手順の備忘録です。

YubinBango.js は、郵便番号から住所を表示する機能を実装できるJavaScriptのライブラリです。

郵便番号のフォームに数字を入力すると、自動で該当する住所を表示するフォームを実装することができます。

メール送信フォームを実装できるWordPressプラグイン「Contact Form 7」と組み合わせることで、郵便番号から住所を自動入力するフォームを実装できます。

YubinBango.js の詳しい使い方は、こちらの記事でまとめています。

YubinBango.js で住所自動入力フォームを作成する方法

YubinBango.js を使って、郵便番号から住所を自動入力するフォームを作成する手順の備忘録です。 YubinBango.js は、郵便番号から住所を表示する機能を実装できるJavaScript…

ライブラリの読み込み

はじめに、functions.phpに下記コードを記述してYubinBango.js のライブラリを読み込みます。

function add_yubinbango_files() {
  wp_enqueue_script('yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true);
}
add_action( 'wp_enqueue_scripts', 'add_yubinbango_files' );

wp_enqueue_script()関数を使用してYubinBango.js のJavaScriptファイルを読み込みます。

クラスを設定する

続いて、Contact Form 7 で作成したお問い合わせフォームにYubinBango.js を使用するためのclassを設定します。

<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  <label>〒 [text your-code class:p-postal-code]</label>
  <label>[text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]</label>
</div>

住所の入力欄を囲むdivタグを用意して、class="h-adr"を指定します。

郵便番号から表示する住所の国名を指定するspanタグを追加して、入力フォームのinputタグを出力する箇所にclassを設定します。

Contact Form 7 を保存して、郵便番号から住所が自動登録されるフォームの完成です。

住所を分割する

住所の入力フォームを複数に分割する場合、各フォームに以下の一覧がから該当のclassを設定します。

p-region … 都道府県
p-locality … 市区町村
p-street-address … 町域
p-extended-address … 町域以降の住所

例えば、都道府県と市区町村以下を分割したい場合は、p-regionとその他のclassを分けて設定します。

<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  <label>〒 [text your-code class:p-postal-code]</label>
  <label><span>都道府県</span>[text your-address1 class:p-region]</label>
  <label>[text your-address2 class:p-locality class:p-street-address class:p-extended-address]</label>
</div>

さらに全てのclassで細分したい場合は、以下のコードになります。各フォームに一つずつclassが設定されます。

<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  <label>〒 [text your-code class:p-postal-code class:size_s]</label>
  <label><span>都道府県</span>[text your-address1 class:p-region]</label>
  <label><span>市町村区</span>[text your-address2 class:p-locality]</label>
  <label><span>町域</span>[text your-address3 class:p-street-address]</label>
  <label><span>以降の住所</span>[text your-address4 class:p-extended-address]</label>
</div>

郵便番号から値が取得できないフォームの部分は、空白となります。