
こちらの悩みについて解決していきます。
よくお問い合わせフォームで郵便番号を入力すると、その郵便番号に該当する住所が自動で入力される機能を見たことありませんか?

この機能、実装するのは難しいと思っていませんか?
実はあるJSライブラリを活用することで簡単に実装することが可能なんです!
本記事では、ContactForm7のお問い合わせフォームに簡単に郵便番号を入力したら自動で住所が入力される機能実装手順を解説していきます。

YubinBangoライブラリの導入
郵便番号に該当する住所を自動入力されるようにするには、YubinBangoライブラリを利用します。
YubinBangoライブラリは、Githubからファイルをダウンロードします。

ダウンロードしたZipフォルダの中身を確認します。必要なのは「yubinbango.js」ですので、そのファイルを読み込みます。
完成例
完成例は以下の通りです。

このように郵便番号を入力すると、該当する住所が自動で表示されるようになっています。
コード解説
コード解説です。

ContactForm7
ここでYubinBangoライブラリに関する記述が含まれています。
<div class="h-adr">
<span class="p-country-name" style="display: none">Japan</span>
<div class="contact-form">
<div class="form-group">
<label> 郵便番号 <span class="required">*</span> </label>
[text your-zipcode class:p-postal-code]
</div>
<div class="form-group">
<label> 都道府県 <span class="required">*</span> </label>
[select* your-prefecture class:p-region "" "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県"]
</div>
<div class="form-group">
<label> 市区町村 <span class="required">*</span> </label>
[text* your-address class:p-locality class:p-street-address]
</div>
<div class="submit-container">
[submit "確認画面へ"]
</div>
</div>
</div>
YubinBangoライブラリを正常に動作させるには以下のクラスとコードが必要になります。
コード | 内容 |
h-adr クラス | 自動入力を適用させるフォーム全体を囲むdiv タグに適用 |
<span class="p-country-name" style="display: none">Japan</span> | 表示はさせず、クラス名にp-country-name と、国名をタグで囲む |
p-postal-code クラス | 郵便番号を入力するinputタグに適用 |
p-region クラス | 都道府県を入力するinput(select)タグに適用 |
p-locality クラス、p-street-address クラス | 市区町村と以降の住所を入力するinputタグに適用 |
HTML(PHP)
完成例に使用したフロントのコードです。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo wp_get_document_title(); ?></title>
<meta name="description" content="">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" type="image/x-icon">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="header">
<div class="logo"> <a href="<?php echo home_url(); ?>">My WordPress</a> </div>
<nav class="nav">
<ul>
<li><a href="<?php echo home_url(); ?>">ホーム</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<footer class="footer">
<div class="footer-content">
<p>© <?php echo date('Y'); ?> My WordPress. All Rights Reserved.</p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
<?php get_header(); ?>
<main>
<section id="contact" class="contact-section">
<div class="inner">
<h2 class="contact-title">お問い合わせ</h2>
<?php echo do_shortcode(''); ?>
</div>
</section>
</main>
<?php get_footer(); ?>
※do_shortcode('');
には、ContactForm7側で生成されたショートコードを記述します。
CSS
完成例のレイアウトにしているCSSは以下の通りです。
.contact-section {
text-align: center;
padding: 80px 20px;
background-color: #e0e0e0;
.contact-title {
font-size: 32px;
font-weight: bold;
color: #333;
position: relative;
display: inline-block;
padding-bottom: 10px;
&::after {
content: "";
display: block;
width: 50px;
height: 4px;
background-color: #ffcc00;
margin: 10px auto 0;
}
}
.contact-form {
margin-top: 40px;
label {
display: flex;
align-items: baseline;
font-weight: bold;
font-size: 16px;
margin-bottom: 10px;
.required {
color: #d35b5b;
font-size: 14px;
margin-left: 5px;
}
}
.form-group {
display: flex;
margin-bottom: 10px;
label {
width: 150px;
text-align: left;
}
.wpcf7-form-control-wrap {
flex: 1;
width: 100%;
}
input,
select {
width: 100%;
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
text-align: left;
background-color: #fff;
transition: 0.3s;
&:focus {
border-color: #333;
outline: none;
}
}
}
.submit-container {
margin-top: 20px;
text-align: center;
input[type="submit"] {
width: 250px;
text-align: center;
background-color: #333;
color: #fff;
font-size: 18px;
padding: 10px 20px;
border: none;
border-radius: 50px;
cursor: pointer;
transition: 0.3s;
&:hover {
color: #ffcc00;
}
}
.wpcf7-spinner {
display: none;
}
}
}
}
まとめ
ここまで読んでいただきありがとうございました。
今回は、郵便番号を入力した際に自動で住所が入力されるための実装手順を紹介しましたが、YubinBangoライブラリはとても便利な機能ですね。作成してくれたkoba-ninkigumi氏をはじめ開発に携わった方々に感謝です。