WordPressでお問い合わせフォームを作成するときに人気のプラグイン「Contact Form 7」。1千万サイト以上で利用されています。そのプラグインも人によっては色々と拡張したくなるもので、そんな中のひとつが「郵便番号を入力したら住所が自動的に入力されるようにしたい」というものです。そんな希望を実装する方法です。
目次
Contact Form 7 フォームの設定
以下のようにフォームを設定します。
ご住所<strong class="hissu">必須</strong><br>
〒 [text postal-code class:postal-code size:10 placeholder "123-4567"]<br>
[text* address class:address placeholder "住所"]postal-codeクラス：郵便番号入力欄addressクラス：住所表示欄
JavaScriptの追加
テーマのfunctions.phpにJavaScriptを読み込むコードを追加します。
//ContactForm7で郵便番号を自動入力
function enqueue_postcode_script() {
wp_enqueue_script(
'postcode-autofill',
get_template_directory_uri() . '/js/postcode-autofill.js', // 適宜パスを修正
array('jquery'),
null,
true
);
}
add_action('wp_enqueue_scripts', 'enqueue_postcode_script');
JavaScriptコードの作成
テーマのjsフォルダにpostcode-autofill.jsを作成し、以下を記述します。
jQuery(document).ready(function ($) {
$('.postal-code').on('input', function () {
const postalCode = $(this).val().replace(/[^0-9]/g, ''); // 数字以外を除去
const addressField = $('.address');
if (postalCode.length === 7) {
// 郵便番号APIへのリクエスト
$.ajax({
url: `https://zipcloud.ibsnet.co.jp/api/search?zipcode=${postalCode}`,
dataType: 'jsonp',
success: function (data) {
if (data.results) {
const result = data.results[0];
const address = `${result.address1} ${result.address2} ${result.address3}`;
addressField.val(address); // 住所を自動入力
} else {
alert('該当する住所が見つかりませんでした。');
addressField.val('');
}
},
error: function () {
alert('住所検索に失敗しました。');
},
});
}
});
});以上でContactForm7で郵便番号を入力したら住所が自動的に入力されるようになります。
