WordPressのメールフォームに住所自動入力を設定しよう

2024年8月更新

フリーラジカルスタディルーム　メールフォームプラグイン　Contact Form 7　ライブラリ　YubinBango　解説

お問い合わせページにメールフォームを設置したいときに便利なプラグイン『Contact Form 7』。
設定方法はこちらのページで解説していますが、ユーザーの利便性を高めるため、さらにカスタマイズしていきましょう。
今回は、郵便番号を入力すると住所の都道府県と市町村まで自動入力できる
無料ライブラリ『YubinBango』の使い方を解説します。

Contact Form 7の設定

『Contact Form 7』でメールフォームを作成している前提で解説していきますので、
当サイトの解説、またはContact Form 7公式サイトや作者によるサポートフォーラムを参考に、メールフォームを作成しておいてください。

固定ページを作成

WordPressの固定ページで、お問い合わせページを作成します。
固定ページに設定したショートコードに『YubinBango』のクラスを追記しますので、
この時点でここまで済ませておくとスムーズです。

YubinBangoライブラリを設定

郵便番号を入力したら自動で住所フォームに市区町村までさせるライブラリ『YubinBango』を利用します。
国内では広く使用されている便利なライブラリです。YubinBango公式サイトはこちら。

functions.phpの末尾にこのコードを追加してください。

※追加する前にバックアップを取ることをおすすめします。

wp_enqueue_script( 'yubinbango', 
'https://yubinbango.github.io/yubinbango/yubinbango.js', 
array(), null, true );

functions.phpの場所

wp-content > themes > （使用しているテーマのフォルダ名） > functions.php

ほとんどの場合、ファイルの場所はこの場所にあるはずですが、テーマやカスタマイズの方法によっては他の場所に設定していることがあります。見つからない場合はサーバ管理者などに問い合わせてください。

WordPress管理画面で確認する方法

WordPress管理画面から編集を行なうことも可能です。
サイドバーの外観からテーマファイルエディター
テーマの編集をクリックします。

右のタブメニューから現在使用しているテーマ（子テーマ）を選択し、さらに下のメニューに、functions.phpがあれば、管理画面から編集可能です。

クリックしファイルの内容を開き、コードを追加します。

functions.phpは設定を間違えるとWordPressが真っ白になったり管理画面に入れなくなるなど、動作しなくなるリスクがあります。

そこでおすすめなのが Code Snippets プラグインです。
システムに関わるファイルに触らずに、PHPやJSなどを追加できます。
プロ版が用意されていますが、今回のような使用方法なら無料版でじゅうぶんです。

コンタクトフォームに追加

STEP

コンタクトフォームにクラスを追加する

作成済のお問い合わせフォームにコードを追加します。

国名を指示するクラスタグをフォームの最上部に記入します。
非表示にするため、スタイル “display:none;“を追加しています。

<span class="p-country-name" style="display:none;">Japan</span>

STEP

フォームにクラスタグを追加する

メールタグの生成ウインドウで決めたクラスタグに、YubinBangoのクラスタグを追加します。

郵便番号の入力エリアにクラスタグ
class:p-postal-code を追加します。

<tr>
	<th><label><span class="ast02">任意</span>郵便番号</label></th>
	<td>[text your-zipcode class:p-postal-code]</td>
</tr>

住所の入力エリアにクラスタグ
class:p-region
class:p-locality
class:p-street-address
を追加します。

意味はそれぞれ、
都道府県：p-region
市区：p-locality
町村：p-street-address　です。

<tr>
	<th><label><span class="ast02">任意</span>住所</label></th>
	<td>[text your-address class:p-region class:p-locality class:p-street-address]</td>
</tr>

番地・建物名等の入力エリアにクラスタグ
class:p-extended-address を追加します。

しかし、番地・建物名は自動入力されないので、
『番地・建物名・部屋番号を入力してください』『住所の続きを入力してください』などの注意書きをつけるようにしましょう。
コード例ではplaceholderタグで注意喚起しています。

<tr>
	<th><label><span class="ast02">任意</span>番地・建物名等</label></th>
	<td>[text your-addressx class:p-extended-address placeholder"住所の続きを入力"]</td>
</tr>

制作例はここをクリック

<span class="p-country-name" style="display: none;">Japan</span>

<div class="formdesign">
<table>
	<tr>
		<th><label><span class="ast01">必須</span>お名前</label></th>
		<td>[text* your-name placeholder"氏名"]</td>
	</tr>
	<tr>
		<th><label><span class="ast01">必須</span>お名前ふりがな</label></th>
		<td>[text* your-name-fu placeholder"おなまえ"]</td>
	</tr>
	<tr>
		<th><label><span class="ast01">必須</span>メールアドレス</label></th>
		<td>[email* your-email autocomplete:email]</td>
	</tr>
	<tr>
		<th><label><span class="ast02">任意</span>電話番号</label></th>
		<td>[tel your-tel]</td>
	</tr>
	<tr>
		<th><label><span class="ast02">任意</span>貴社名</label></th>
		<td>[text your-corp]</td>
	</tr>
	<tr>
		<th><label><span class="ast02">任意</span>郵便番号</label></th>
		<td>[text your-zipcode class:p-postal-code maxlength:8 placeholder"0000000（ハイフンなし）"]</td>
	</tr>
	<tr>
		<th><label><span class="ast02">任意</span>住所</label></th>
		<td>[text your-address class:p-region class:p-locality class:p-street-address placeholder"郵便番号を入力すると自動入力されます"]</td>
	</tr>
	<tr>
		<th><label><span class="ast02">任意</span>番地・建物名等</label></th>
		<td>[text your-addressx placeholder"住所の続きを入力してください"]</td>
	</tr>
	<tr>
		<th style="vertical-align:top;"><label><span class="ast01">必須</span>お問い合わせ内容</label></th>
		<td>[textarea* your-message]</td>
	</tr>
</table>

	<div class="formbtn">
	[submit class:kakunin "入力内容の確認"][multistep multistep-first first_step "/contact-confirm/"]
	</div>
</div>

Check

確認画面フォームにも同一の内容を追加してください。