リアルタイムでのメールアドレスチェック

Contact Form 7でメールアドレス確認のリアルタイムバリデーションを実装する方法

メールアドレスが一致するまで送信ボタンを無効化し、ユーザーにリアルタイムでフィードバックを提供する方法を解説します。

---

実装手順

1. フォームにID属性を設定

Contact Form 7のフォーム編集画面で、各フィールドにid属性を設定します。

[email* your-email id:your-email]
[email* confirm-email id:confirm-email]
[submit id:js-submit "送信する"]

ポイント:

• メールアドレスフィールドに id:your-email
• 確認用フィールドに id:confirm-email
• 送信ボタンに id:js-submit

---

2. JavaScriptコードを追加

テーマのJavaScriptファイルまたはContact Form 7の「追加設定」に以下を追加します。

document.addEventListener("DOMContentLoaded", function () {

    const emailInput = document.getElementById("your-email");
    const confirmEmailInput = document.getElementById("confirm-email");
    const submitButton = document.getElementById("js-submit");

    // メールアドレスのパターン
    const mailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    // 両方の入力フィールドにイベントリスナーを追加
    [emailInput, confirmEmailInput].forEach((input) => {
        input.addEventListener("input", validateEmails);
    });

    function validateEmails() {
        const email = emailInput.value.trim();
        const confirmEmail = confirmEmailInput.value.trim();

        // 両方のフィールドが入力されているか確認
        if (email && confirmEmail) {
            // パターンに一致しているか確認
            const isValidPattern =
                mailPattern.test(email) && mailPattern.test(confirmEmail);
            // 両方のアドレスが一致しているか確認
            const isMatching = email === confirmEmail;

            if (isValidPattern && isMatching) {
                // 条件が満たされている場合、disabledクラスを削除
                submitButton.classList.remove("disabled");
            } else {
                // 条件が満たされていない場合、disabledクラスを追加
                submitButton.classList.add("disabled");
            }
        } else {
            // どちらかのフィールドが空の場合、disabledクラスを追加
            submitButton.classList.add("disabled");
        }
    }

    // 初期状態でdisabledクラスを追加しておく
    submitButton.classList.add("disabled");
});

---

3. CSSで送信ボタンのスタイルを設定

.submit-button.disabled {
    cursor: not-allowed;
    background: #a1a1a1;
    pointer-events: none;
}

---

コードの解説

チェック内容

このJavaScriptは以下の3つをリアルタイムでチェックします:

1. 両方のフィールドに入力があるか
2. メールアドレスの形式が正しいか（正規表現でチェック）
3. 2つのメールアドレスが一致しているか

全ての条件を満たすと、送信ボタンからdisabledクラスが削除されます。

正規表現パターン

const mailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

• @と.が含まれているかを確認
• 空白文字がないかをチェック

イベントリスナー

[emailInput, confirmEmailInput].forEach((input) => {
    input.addEventListener("input", validateEmails);
});

両方の入力フィールドに対して、入力されるたびにvalidateEmails()関数を実行します。

---

動作の流れ

1. ページ読み込み時、送信ボタンはdisabled状態
2. ユーザーがメールアドレスを入力するたびにチェック実行
3. 全ての条件を満たしたら送信ボタンが有効化
4. 条件を満たさなくなったら再び無効化

---

注意事項

サーバーサイドバリデーションも必須

このJavaScriptだけでは不十分です。 JavaScriptは簡単に無効化できるため、必ずPHPによるサーバーサイドバリデーションも併用してください。

詳しくは「コンタクトフォームのメールダブルチェック」の記事を参照してください。

フィールド名の統一

• Contact Form 7のフィールド名: your-email, confirm-email
• JavaScript内のID指定: "your-email", "confirm-email"

これらが一致していないと動作しません。

---

この実装により、ユーザーがリアルタイムで入力ミスに気付け、不完全な状態での送信を防げます。JavaScriptとPHPの両方でバリデーションを行うことで、安全で使いやすいフォームが完成します。