はじめまして。開発担当の萩原です。
今回の記事ではContactForm7の最新バージョン(この時点では4.4.2)で動作する
「確認用メールアドレス」のバリデート(入力チェック)のコードを紹介させていただきたいと思います。
弊社では自社のメディアサイトの運営以外にもウェブサイトの制作をさせていただいていたりもします。
その際、WordPressを使って制作しているのですが、よくあるのがお問い合わせフォームの実装時に、
エンドユーザの情報入力項目として「メールアドレス」と「確認用メールアドレス」を配置したいというご要望です。
お問い合わせフォーム自体は「ContactForm7」という
非常に有名で便利なプラグインがあるので比較的容易に実装できるのですが、
こちらのプラグインには「確認用メールアドレス」のバリデート機能がありません。
ですが、沢山の方が使っているプラグインですので、この機能の追加方法もたくさん紹介されております。
Contact Form 7で確認用メールアドレスの入力フォームを加える方法
contact form 7に確認用メールアドレスの項目を設置する方法
WordPressの問合せフォームプラグイン「Contact Form 7」にメールアドレス入力確認機能を追加する
など、他にもたくさんあります。
※どちらのサイトも最近のバージョンで動作するものを紹介されております
弊社でも独自に機能を拡張して確認用メールアドレスのバリデートを追加していたのですが、
ContactForm7のバージョンを上げたところ、上手く動かなくなってしまったということがありまして、
最新バージョンのContactForm7で動作するコードを改めて実装することとなりました。
実装方法ですが、functions.phpなどに以下のコードを追記してください。
※既に旧バージョンのコードが入っているという方は、既存のコードを以下のコードと差し替えてください
|
|
/* ContactForm7の「確認用メールアドレス」のバリデートを追加します */ add_filter('wpcf7_validate_email', 'wpcf7_text_validation_filter_extend_email', 11, 2); add_filter('wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend_email', 11, 2); function wpcf7_text_validation_filter_extend_email($result, $tag) { $tagObj = new WPCF7_Shortcode($tag); if(preg_match('/(.*)_confirm$/', $tagObj->name, $matches)){ $target_name = $matches[1]; if($_POST[$tagObj->name] != $_POST[$target_name]){ $result->invalidate($tagObj, "確認用メールアドレスが一致していません"); } } return $result; } |
処理内容を説明させていただきますと、
2-3行目：もともと存在するContactForm7の「email」と「email*」のバリデーションのフックに、今回実装した関数(wpcf7_text_validation_filter_extend_email)を追加します。関数追加後の流れとしては、必須入力チェック(既存)->メールアドレスチェック(既存)->今回の追加する確認用メールアドレスチェックとなります。
4行目：確認用メールアドレスのバリデーション関数を定義します。パラメータの$resultはContactForm7の入力チェックのオブジェクトで、$tagはContactForm7の管理画面で設定した入力項目(例：[mail your-email])の情報を持った配列が入ります。
6行目：入力エラーが発生した際に必要となる、$tagのデータをもとにWPCF7_Shortcodeオブジェクトを生成します。
8行目：管理画面で設定した入力項目名が”xxxx_confirm”であるかをチェックします。”xxxx_confirm”でない場合、確認用メールアドレスの入力チェックは行わず、14行目まで進みます。
9行目：”xxxx_confirm”の文字列から、”xxxx”の部分を取得します。
10行目：フォームで入力された、”xxxx_confirm”と”xxxx”の値が一致しているかチェックします。一致していなかった場合11行目に進みます。
11行目：入力チェックのオブジェクトに6行目で生成したWPCF7_Shortcodeオブジェクトとエラー文言を追加します。
14行目：入力チェックのオブジェクトを返します。
となります。
管理画面では、
|
|
[mail your-email] [mail your-email_confirm] |
というように設定していただけば確認用メールアドレスのバリデーションが使えるようになります。
※”your-email”の部分は任意の名前を設定していただいて大丈夫です
また、
|
|
[mail your-email-1] [mail your-email-1_confirm] [mail your-email-2] [mail your-email-2_confirm] |
とように、”_confirm”のあり/なしの組み合わせで複数配置すれば、
確認用メールアドレスの項目が複数設置できます。
補足ですが、他サイト様で紹介されているコードでは、よく8行目の前に
|
|
if(($type == 'email') || ($type == 'email*')) |
というような条件分岐が入ってるものを見かけますが、
2行目と3行目のadd_filter()時に「email」と「email*」に限定しているので
今回のwpcf7_text_validation_filter_extend_email()の中で$typeのチェックは
必要ないのでないかと思います。
ご参考になりましたら幸いです。