こんにちは、ゆうや（@yuyaphotograph）です！
この記事では、
- Contact Form 7で作ったお問い合わせフォームにメールアドレス確認機能をつけたい
- Contact Form 7でメールアドレスの確認用入力欄をコピペで作れるコードを教えてほしい
という方のお悩みを解決します！
完成形を画像で確認
この記事で紹介する方法を実践すると、添付画像のように間違ったメールアドレスを入力した場合に赤文字でアラートが表示されるようになります。
メールアドレス確認機能を作る
以下2ステップでメールアドレス確認機能を作ることができます。
- functions.phpにメールアドレス確認用のコードを追加
- コンタクトフォームの編集ページで項目を追加
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を使うときに役立つ記事まとめ
