フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【Contact Form 7】確認用メールアドレスが一致するかチェックする方法

Contact Form 7
WordPress
バリデーション
メールアドレス
一致

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

Contact Form 7は簡単にお問い合わせフォームを作ることが出来るWordPressの人気プラグイン。
プラグインに限らず、お問い合わせフォームではメールアドレスの入力フィールドを2つ設置することがよくあります。
入力欄が1つだけだと、もしメールアドレスの入力を間違えた場合、連絡する術が無くなってしまう恐れがあるため、2つ設置します。
メールアドレスの入力欄を2つ設置した場合、その2つの入力データが一致するかチェックする必要がありますが、Contact Form 7に標準ではその機能は用意されていません。

Contact Form 7の場合は、フックを使いカスタマイズすることで2つのメールアドレス入力欄の入力データが一致するかチェックすることが出来ます。
この記事ではContact Form 7で、2つのメールアドレス入力欄の入力データが一致するかチェックする方法をご紹介したいと思います。

完成コード

Contact Form 7のフォームの設定は以下のようにします。

<label>メールアドレス:[email* your-email]</label>
<label>メールアドレス(確認用):[email* confirm-email]</label>

[submit "送信"]

name属性はそれぞれ、your-emailconfirm-emailとします。

続いて、有効化されているテーマのfunctions.phpに以下のバリデーション用のユーザー関数を記述します。

// メールアドレスフィールドのバリデーションを追加
add_filter('wpcf7_validate_email', 'custom_email_confirmation_validation', 10, 2);
add_filter('wpcf7_validate_email*', 'custom_email_confirmation_validation', 10, 2);

function custom_email_confirmation_validation($result, $tag) {

    // フォームタグの名前を確認して、確認用メールアドレスフィールドのバリデーションを行う
    if ($tag->name == 'confirm-email') {
        // メインのメールアドレスと確認用メールアドレスを取得
        $your_email = isset($_POST['your-email']) ? trim($_POST['your-email']) : '';
        $confirm_email = isset($_POST['confirm-email']) ? trim($_POST['confirm-email']) : '';

        // メールアドレスが一致しない場合、エラーメッセージを追加
        if ($your_email !== $confirm_email) {
            $result->invalidate($tag, 'メールアドレスが一致しません');
        }
    }

    return $result;
}

name属性をそれぞれ、your-emailconfirm-emailとしていれば、上のコードをコピペするだけで実装することが出来ます。

コードの解説

ここからはコードの解説です。

フィルターフックの追加

add_filter('wpcf7_validate_email*', 'custom_email_confirmation_validation', 10, 2);
add_filter('wpcf7_validate_email', 'custom_email_confirmation_validation', 10, 2);

ユーザー関数のcustom_email_confirmation_validation()をContact Form 7のフィルターフックのwpcf7_validate_emailwpcf7_validate_email*、それぞれに設定します。
2つ設定するのは、メールアドレスの入力欄が必須、必須でない、どちらの場合にも対応するためです。

wpcf7_validate_email*が必須用、wpcf7_validate_emailが必須ではない場合用です。

バリデーション用のユーザー定義の関数を作成

次に、バリデーション用のユーザー定義の関数を作成します。この関数は、name属性がconfirm-emailフィールドの値をチェックし、your-emailフィールドと一致するかどうかを確認します。

if ($tag->name == 'confirm-email') { ... }

name属性がconfirm-emailフィールドの場合に、2つの入力欄が一致するかのチェックを行うためのif文です。
このif文の分岐により、name属性がconfirm-emailの場合だけ、動作するようになります。

$your_email = isset($_POST['your-email']) ? trim($_POST['your-email']) : '';
$confirm_email = isset($_POST['confirm-email']) ? trim($_POST['confirm-email']) : '';

2つのメールアドレスの入力値を取得し、それぞれ$your_email$confirm_emailの変数に格納します。

if ($your_email !== $confirm_email) {
    $result->invalidate($tag, 'メールアドレスが一致しません');
}

2つのメールアドレスの入力値を比較し、一致しない(!==)場合、[email* confirm-email]のエラー文章に「メールアドレスが一致しません」をセットします。
このエラー文章が送信ボタンを押された時、[email* confirm-email]の入力欄のすぐ下に表示されるようになります。

これにより、Contact Form 7のフォーム送信時に、メールアドレスと確認用メールアドレスが一致しているかどうかがチェックされ、一致しない場合はエラーメッセージが表示されるようになります。

まとめ

いかがでしたか?
メールアドレスの入力欄を2つ設置した場合は、このコードも忘れずに記述し、入力内容が一致するかチェックするようにしましょう。