【JavaScript】Contact Form7に郵便番号入力による住所自動入力機能の実装方法

JavaScript Web制作 WordPress

【JavaScript】Contact Form7に郵便番号入力による住所自動入力機能の実装方法

※本記事は広告が含まれる場合があります。

なやむくん
ContactForm7のお問い合わせフォームで郵便番号を入力したら自動で住所が入力されるようにしたい…。

こちらの悩みについて解決していきます。

よくお問い合わせフォームで郵便番号を入力すると、その郵便番号に該当する住所が自動で入力される機能を見たことありませんか？

よろこびくん
住所を入力する手間が省けるので楽ですー！

この機能、実装するのは難しいと思っていませんか？

実はあるJSライブラリを活用することで簡単に実装することが可能なんです！

本記事では、ContactForm7のお問い合わせフォームに簡単に郵便番号を入力したら自動で住所が入力される機能実装手順を解説していきます。

みつた
本記事では、WordPressのプラグイン「ContactForm7」のお問い合わせフォームに対して実装する手順を紹介しますが、別のお問い合わせフォームにも実装は可能なので、ぜひ本記事を参考に実装してみて下さい！

YubinBangoライブラリの導入

郵便番号に該当する住所を自動入力されるようにするには、YubinBangoライブラリを利用します。

YubinBangoライブラリは、Githubからファイルをダウンロードします。

Githubからダウンロード

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

完成例

完成例は以下の通りです。

完成例デモ画像

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

コード解説

コード解説です。

みつた
AIに生成してもらい一部調整しています。

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氏をはじめ開発に携わった方々に感謝です。

-JavaScript, Web制作, WordPress