WORDPRESS | Contact Form7 メールアドレスの再入力チェック

      2017/10/07

みなさんこんにちはALEXです。お問い合わせのフォームをユーザフレンドリーにすることは、こんなバージョンを高めるために必須になってきています。入力フォームプラグイン「Contact Form 7」をお使いの方も多いかと思います。

最近お問い合わせでも、「Contact Form 7」を使用する際メールの再入力チェックはどうすればよいのかというご質問を頂きます。

そこで今回は「Contact Form 7」にメールアドレスの再入力チェックを実装する方法を解説いたします。是非ご参考になさってください。

 

フォーム編集

WordPressの管理画面のコンタクトフォームの編集画面を開けましょう。デフォルトでは以下の画面の通りになっています。

ブラウザ上では以下のように表示されます。

味も素っ気もありません。見栄えを改善する方法は後日ご紹介いたします。

 

まず、

[email* your-email]

の下に、

[email* your-email_confirm]

を追加します。確認用のname属性に_confirmを付与します。タグは以下の通りです。

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

 

続いて、function.phpにコードを追加します。

 

function.phpの編集

 

「function.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 );

 

動作確認

では実際に、ブラウザから入力して動作するか確認してみましょう。

ブラウザから問い合わせページにアクセスします。

メールアドレス再確認の欄が追加されました。次にメールアドレスを入力。

入力欄

info@alexandcompany.net

再入力

inf@alexandcompany.net

と1文字変えて入力しました。「送信」をクリック。

 

「確認用メールアドレスが一致しません」のエラーメッセージが表示されました。

修正して再送信しました。

 

無事送信が完了しました。

 

まとめ

「Contact Form 7」を使用する際メールの再入力チェック方法をご紹介しました。

ありがとうございました。

 

連載目次

Contact Form 7でEFO

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

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

 

 - ワードプレス