こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。
お問い合わせフォームで地味に多いのが、メールアドレスの入力ミス
- 確認用のメールアドレスが一致していない
- 余計なスペースが入っている（コピペで混入しがち）
- 全角が混ざっている（＠や英字が全角になってる）
これがあると、せっかくのお問い合わせに返信できない…という事故になります。
今回は Contact Form 7 で
- メールアドレス一致チェック
- 余白混入をエラー
- 全角文字が入っていたらエラー
までをまとめて対応するフォーム設定を紹介。コピペOK。
▼
こちらも便利な設定です👇
【電話番号をハイフン有無＆正しく入力チェックする方法】
あわせて読みたい
【 WordPress Contact Form 7 】電話番号をハイフン有無＆正しく入力チェックする方法【コピペOK】
Contact Form 7で電話番号の入力欄を設置したものの 『090-1234-5678 ハイフン有り』の番号や『ハイフン無し 09012345678』 どちらも許可したい…でも文字入力は防ぎたい…
目次
Contact Form 7 側のフォーム設定
まずはメールフィールド2つ作成します。
<div class="block">
<div class="item detail">メールアドレス</div>
<div class="item value">
[email* your-email]
</div>
</div>
<div class="block">
<div class="item detail">メールアドレス（確認）</div>
<div class="item value">
[email* your-email-confirm]
</div>
</div>タグは、your-email your-email-confirm を使います。
unctions.php に追加するコード
テーマの functions.php に以下を追加します。完全コピペOK
function wpcf7_validate_email_confirm_strict($result, $tag) {
$tag = new WPCF7_FormTag($tag);
$name = $tag->name;
$email = isset($_POST['your-email']) ? wp_unslash($_POST['your-email']) : '';
$email_confirm = isset($_POST['your-email-confirm']) ? wp_unslash($_POST['your-email-confirm']) : '';
if ($name === 'your-email' || $name === 'your-email-confirm') {
// 前後スペースチェック
if ($email !== trim($email) || $email_confirm !== trim($email_confirm)) {
$result->invalidate($tag, "メールアドレスの前後にスペースがあります。削除してください。");
return $result;
}
// 全角チェック
if (preg_match('/[^\x21-\x7E]/', $email) || preg_match('/[^\x21-\x7E]/', $email_confirm)) {
$result->invalidate($tag, "メールアドレスは半角で入力してください。");
return $result;
}
// 途中スペース禁止
if (preg_match('/\s/', $email) || preg_match('/\s/', $email_confirm)) {
$result->invalidate($tag, "メールアドレスにスペースは使用できません。");
return $result;
}
}
if ($name === 'your-email-confirm') {
if ($email !== $email_confirm) {
$result->invalidate($tag, "メールアドレスが一致しません。");
}
}
return $result;
}
add_filter('wpcf7_validate_email', 'wpcf7_validate_email_confirm_strict', 11, 2);
add_filter('wpcf7_validate_email*', 'wpcf7_validate_email_confirm_strict', 11, 2);メールアドレスの一致のみ
シンプルにメールアドレスの一致だけならこれだけでもOKです
// Contact Form 7 メールアドレス一致チェック
function wpcf7_validate_email_confirm($result, $tag) {
$tag = new WPCF7_FormTag($tag);
$name = $tag->name;
$email = isset($_POST['your-email']) ? trim(wp_unslash($_POST['your-email'])) : '';
$email_confirm = isset($_POST['your-email-confirm']) ? trim(wp_unslash($_POST['your-email-confirm'])) : '';
if ($name === 'your-email-confirm') {
if ($email !== $email_confirm) {
$result->invalidate($tag, "メールアドレスが一致しません。");
}
}
return $result;
}
add_filter('wpcf7_validate_email', 'wpcf7_validate_email_confirm', 11, 2);
add_filter('wpcf7_validate_email*', 'wpcf7_validate_email_confirm', 11, 2);コードの詳細
① 前後スペースチェック
前後の余計なスペースはエラー
if ($email !== trim($email)) {
$result->invalidate($tag, "メールアドレスの前後にスペースがあります。削除してください。");
}② 途中スペースチェック
途中の余計なスペースはエラー
if (preg_match('/\s/', $email)) {
$result->invalidate($tag, "メールアドレスにスペースは使用できません。");
}③ 全角チェック
全角文字が混ざっていたらエラーにします
preg_match('/[^\x21-\x7E]/', $email)まとめ
これだけでお問い合わせフォームの精度がぐっと上がります！
地味ですが、実務ではかなり大事な部分。
ぜひ試してみてください。
基本のフォームの設定の仕方はこちら👇
あわせて読みたい
WordPress お問い合わせフォーム 作り方｜コンタクトフォーム7
お問い合わせフォームのカスタマイズ最終形態版です！コピペで繰り返し使えるので保存してね！ そんな感じでWordPressのプラグインContact Form 7を作ってきます〜。 フ…
