Contact Form 7でメールアドレスを再入力チェックしてコピペも禁止する方法

Contact Form 7のメールフォームで、メールアドレスとメールアドレス確認用のフィールドに入力した値が一致しなければエラーメッセージを表示するという方法のご紹介です。

あと、メールアドレスと確認用フィールドに入力された値はどちらもコピペ禁止にして、より入力チェックを厳しくするという方法も合わせて紹介させていただきますので、ぜひ参考にしてみてくださいね。

Contact Form 7でメールアドレスの再入力チェック

今回のフォームのカスタマイズ手順は以下の通りです。

Contact Form 7でメールアドレスの再入力チェックする手順
  1. コンタクトフォームの編集画面で、メールアドレス確認用のフィールドを追加/li>
  2. functions.phpに再入力チェックの処理を追加
  3. 再入力チェックの挙動を確認

※メールフォームのコピペ禁止は別処理になるので、そちらの方法を知りたい方はメールアドレス確認用のフィールドをコピペ禁止にするの方をご覧くださいませ。

コンタクトフォームの編集画面で、メールアドレス確認用のフィールドを追加

管理画面左メニューの「お問い合わせ」>「コンタクトフォーム」へ進み、
Contact Form 7でメールアドレスを再入力チェックしてコピペも禁止する方法

フォームの編集画面で、メールアドレスとメールアドレス確認用の2つのフィールドを用意します。
Contact Form 7でメールアドレスを再入力チェックしてコピペも禁止する方法

メールアドレス確認用のフィールドの末尾には、_confirmを追加しておきましょう。

<label> メールアドレス (必須)
[email* your-email] </label>

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

これでフォーム側の準備はOKです。

functions.phpに再入力チェックの処理を追加

テーマフォルダ内にあるfunctions.phpを開いて、こちらのページで紹介されているコードを追加します。

function wpcf7_main_validation_filter( $result, $tag ) {
  $type = $tag['type'];
  $name = $tag['name'];
  $_POST[$name] = trim( strtr( (string) $_POST[$name], "\n", " " ) );
  if ( 'email' == $type || 'email*' == $type ) {
    if (preg_match('/(.*)_confirm$/', $name, $matches)){
      $target_name = $matches[1];
      if ($_POST[$name] != $_POST[$target_name]) {
        if (method_exists($result, 'invalidate')) {
          $result->invalidate( $tag,"確認用のメールアドレスが一致していません");
      } else {
          $result['valid'] = false;
          $result['reason'][$name] = '確認用のメールアドレスが一致していません';
        }
      }
    }
  }
  return $result;
}

add_filter( 'wpcf7_validate_email', 'wpcf7_main_validation_filter', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_main_validation_filter', 11, 2 );

STORKのテーマだと、管理画面左メニューの「外観」>「テーマエディター」へ進んで、
Contact Form 7でメールアドレスを再入力チェックしてコピペも禁止する方法

functions.phpを選んでから、上のコードをコピペします。
Contact Form 7でメールアドレスを再入力チェックしてコピペも禁止する方法

管理画面上でコードを貼り付けけがうまくできない場合は、FTPでfucntions.phpのファイルの転送を行うようにしてみてください。

再入力チェックの挙動を確認

メールフォームが設置されたページへ進んで、メールアドレスと確認用の2つのフィールドに入れた値が異なるときに、以下のようなエラーメッセージが表示されることを確認しましす。
Contact Form 7でメールアドレスを再入力チェックしてコピペも禁止する方法

なお、エラーメッセージのテキストを変更したい場合は、上のfunctions.phpに貼り付けるコードの中の

確認用のメールアドレスが一致していません
の部分を別の表現に変えるとOKです。

jQueryでメールアドレス確認用のフィールドをコピペ禁止にする

メールアドレスフィールドに入力された値がそもそも間違っている場合、それを確認フィールドにコピペされたらチェックの意味がないので、

少し面倒ですが、メールアドレスと確認フィールドはテキストのコピペできないようして、メアドを手入力させるようにすると、より厳しいチェックが可能です。

この処理は個人ブログのフォームよりも、企業サイトやECサイトのようなところで使われる機会が多かもしれません。

jQueryで入力フィールドの値のコピペを禁止

管理画面左メニューの「外観」>「テーマエディター」へ進み、今度はfooter.phpを開いてから、以下のコードを追加します。

  
追加する場所は、<?php wp_footer(); ?>と</body>の間でOKです。
Contact Form 7でメールアドレスを再入力チェックしてコピペも禁止する方法

これで再度、メールフォームが設置されたページへいき、メールアドレスとメールアドレス確認用のそれぞれのフィールドでコピペできないようになっていることを確認してください。


以上で、Contact Form 7でメールアドレスを再入力チェックしてコピペも禁止するカスタマイズは完了です。

最後まで読んでいただき、ありがとうございました★

関連記事

コメントを残す