Contact Form 7 でお支払い方法に応じた送付先の動的表示とメール送信内容の変更

はじめに

Contact Form 7 を使用してフォームを作成する際、
お支払い方法によって送付先の表示を切り替えたい場合があります。
また、送付先の選択内容に応じてメール送信時の内容も動的に変更することが求められることがあります。

本記事では、JavaScript を使用して動的にフォームの表示を変更し、
メールの送信内容を最適化する方法を解説します。

実装の概要

本記事で実装する内容は以下のとおりです。

1. お支払い方法の選択に応じて送付先の表示を切り替える
2. 送付先で「別住所」を選択した場合のみ、詳細入力欄を表示する
3. メール送信時に、選択された内容を反映させる

この機能を実装することで、ユーザーにとって分かりやすく、
適切な情報が送信されるフォームを構築できます。

フォームの HTML 構造

Contact Form 7 でフォームを作成し、[hidden dynamic-service] を追加します。
この hidden フィールドを JavaScript で動的に更新することで、メール送信時の内容を変更できます。

<tr>
    <td>お支払い方法</td>
    <th>[radio sample-payment default:1 "サンプル当日支払い" "サンプル後日送付"]</th>
</tr>
<tr class="sample-row">
    <td>サンプル送付先</td>
    <th>[radio sample-service use_label_element default:1 "サンプル同上" "サンプル別住所"]
        <div id="sample-option2-field" class="conditional-field" style="display: none;">
            <ul>
                <li>[text sample-zip id:sample-zip placeholder "サンプル郵便番号"]</li>
                <li>[text sample-city id:sample-city placeholder "サンプル市町村"]</li>
                <li>[text sample-address id:sample-address placeholder "サンプル番地"]</li>
                <li>[text sample-name id:sample-name placeholder "サンプル会社名"]</li>
                <li>[text sample-person id:sample-person placeholder "サンプル担当者"]</li>
                <li>[tel sample-tel id:sample-tel placeholder "サンプル電話番号"]</li>
            </ul>
        </div>
    </th>
</tr>
[hidden sample-hidden-service id:sample-hidden-service]

JavaScript で動的表示を制御

以下のスクリプトを追加し、選択された内容に応じてフォームの表示を切り替えます。

document.addEventListener("DOMContentLoaded", function() {
    const paymentMethodRadios = document.querySelectorAll('input[name="sample-payment"]'); // サンプルお支払い方法
    const serviceRadios = document.querySelectorAll('input[name="sample-service"]'); // サンプル送付先
    const serviceField = document.querySelector(".sample-pay"); // サンプル送付先（ラジオボタン）の親要素
    const option2Field = document.querySelector("#sample-option2-field"); // サンプル送付先の詳細入力エリア
    const hiddenServiceField = document.getElementById("sample-hidden-service"); // hidden フィールド
    const form = document.querySelector("form"); // Contact Form 7 のフォームを取得

    // 必須項目にする対象のフィールド
    const requiredFields = [
        document.getElementById("sample-zip"),
        document.getElementById("sample-city"),
        document.getElementById("sample-locality"),
        document.getElementById("sample-address"),
        document.getElementById("sample-name"),
        document.getElementById("sample-person"),
        document.getElementById("sample-tel")
    ];

    function updateHiddenField() {
        hiddenServiceField.value = `サンプル送付先: サンプル別住所\n
郵便番号: ${document.getElementById("sample-zip").value || "未入力"}\n
都道府県: ${document.getElementById("sample-city").value || "未入力"}\n
市町村: ${document.getElementById("sample-locality").value || "未入力"}\n
番地以下: ${document.getElementById("sample-address").value || "未入力"}\n
請求書名: ${document.getElementById("sample-name").value || "未入力"}\n
ご担当者名: ${document.getElementById("sample-person").value || "未入力"}\n
電話番号: ${document.getElementById("sample-tel").value || "未入力"}`;
        console.log("hiddenServiceField の更新: ", hiddenServiceField.value);
    }

    function updateVisibility() {
        const selectedPayment = document.querySelector('input[name="sample-payment"]:checked');
        const selectedService = document.querySelector('input[name="sample-service"]:checked');

        if (selectedPayment && selectedPayment.value === "サンプル後日送付") {
            serviceField.style.display = "table-row";

            if (selectedService && selectedService.value === "サンプル別住所") {
                option2Field.style.display = "block";
                requiredFields.forEach(field => {
                    if (field) {
                        field.setAttribute("required", "required");
                    }
                });

                requiredFields.forEach(field => {
                    if (field) {
                        field.addEventListener("input", updateHiddenField);
                    }
                });

                updateHiddenField();
            } else {
                option2Field.style.display = "none";
                requiredFields.forEach(field => {
                    if (field) {
                        field.removeAttribute("required");
                    }
                });
                hiddenServiceField.value = "サンプル送付先: サンプル同上";
            }
        } else {
            serviceField.style.display = "none";
            option2Field.style.display = "none";
            requiredFields.forEach(field => {
                if (field) {
                    field.removeAttribute("required");
                }
            });
            hiddenServiceField.value = "サンプル送付先: なし";
        }
    }

    paymentMethodRadios.forEach(radio => {
        radio.addEventListener("change", updateVisibility);
    });

    serviceRadios.forEach(radio => {
        radio.addEventListener("change", updateVisibility);
    });

    if (form) {
        form.removeAttribute("novalidate");
    }

    updateVisibility();
});

メール送信時の動的内容変更

Contact Form 7 のメール設定で [sample-hidden-service] を使用します。

お支払い方法: [sample-payment]
サンプル送付先: [sample-hidden-service]

これにより、ユーザーの選択に応じた送付先情報が適切にメールで送信されます。

期待される動作

お支払い方法	送付先	メールでの送信内容
サンプル当日支払い	–	サンプル送付先: なし
サンプル後日送付	サンプル同上	サンプル送付先: サンプル同上
サンプル後日送付	サンプル別住所	詳細情報（郵便番号、都道府県、番地など）

まとめ

この方法を実装することで、

✅ お支払い方法に応じた動的な送付先表示
✅ 別住所選択時のみ詳細入力フィールドを表示
✅ メール送信時に適切な情報を送信

が可能になります。

Contact Form 7 で柔軟なフォームを実装したい場合に、ぜひ活用してください！

Favorite