【Contact Form 7】メールアドレス確認機能をコピペで作る方法

【Contact Form 7】メールアドレス確認機能をコピペで作る方法

こんにちは、ゆうや(@yuyaphotograph)です!

この記事では、

  • Contact Form 7で作ったお問い合わせフォームにメールアドレス確認機能をつけたい
  • Contact Form 7でメールアドレスの確認用入力欄をコピペで作れるコードを教えてほしい

という方のお悩みを解決します!

完成形を画像で確認

この記事で紹介する方法を実践すると、添付画像のように間違ったメールアドレスを入力した場合に赤文字でアラートが表示されるようになります。

Contact Form 7でメールアドレス再入力欄

メールアドレス確認機能を作る

以下2ステップでメールアドレス確認機能を作ることができます。

  1. functions.phpにメールアドレス確認用のコードを追加
  2. コンタクトフォームの編集ページで項目を追加

1つずつ見ていきましょう。

functions.phpに追記

以下の長めのコードをお使いのテーマのfunctions.phpにぺぺっと貼り付けてください。

functions.php
add_filter( 'wpcf7_validate_email', 'wpcf7_text_validation_filter_extend', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend', 11, 2 );

function wpcf7_text_validation_filter_extend( $result, $tag ) {
  global $my_email_confirm;
  $tag = new WPCF7_Shortcode( $tag );
  $name = $tag->name;
  $value = isset( $_POST[$name] )
  ? trim( wp_unslash( strtr( (string) $_POST[$name], "\n", " " ) ) )
  : '';
  if ($name == "your-email"){
    $my_email_confirm=$value;
  }
  if ($name == "your-email_confirm" && $my_email_confirm != $value){
    $result->invalidate( $tag,"確認用のメールアドレスが一致していません");
  }

  return $result;
}

「確認用のメールアドレスが一致していません」の文言はよしなに変更してくださいまし。

編集ページで項目追加

あとは、コンタクトフォームの編集ページで確認用メールアドレスの項目を追加するだけです。

以下がその例となります。

メールアドレスと確認用メールアドレスタグ
<!-- メールアドレスタグ -->
[email* your-email]
<!-- 確認用メールアドレスタグ -->
[email* your-email_confirm]

お疲れ様でした!

まとめ

以上、Contact Form 7のお問い合わせフォームで確認用メールアドレス項目を追加する方法を紹介しました。

WordPressを用いたコーポレートサイト制作案件では、ほぼ100%お問い合わせページを設置します。

その際に、確認用メールアドレス項目を要求されるケースは半々といったところ。

そういう案件に出会った方のお役に立てれば幸いです。

Contact Form 7記事まとめ

Contact Form 7を使うときに役立つ記事まとめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です