2022.4.11|WordPress

WordPress(ワードプレス)で「Contact Form 7」に確認用メールアドレス項目を追加して入力チェック機能を実装する方法

WordPress(ワードプレス)で「Contact Form 7」に確認用メールアドレス項目を追加して入力チェック機能を実装する方法

WordPress(ワードプレス)で、お問い合わせフォームを設置する場合は「Contact Form 7」のプラグインを利用して実装することができますが、「Contact Form 7」プラグインをカスタマイズする方法は沢山あります。

「Contact Form 7」プラグインを設置してお問い合わせフォームを作成しますが、「メールアドレス」項目を追加しても「メールアドレス確認」用の項目は機能として実装できません。
別でテキスト項目を追加してもう一度メールアドレスを入力してもらう項目を作る方法もありますが、この場合、最初の「メールアドレス」との判別(チェック機能実装)を行うことができません。
「メールアドレス」入力枠と「確認用メールアドレス」を判別させる場合は、「functions」にチェック機能を実装させるためのコードを記述することで、それらの違いを判別させることができます。

今回は、WordPress(ワードプレス)で「Contact Form 7」に確認用メールアドレス項目を追加して入力チェック機能を実装する方法を解説します。

確認用メールアドレス再入力チェック項目について

「Contact Form 7」プラグインを実装したお問い合わせフォームに「メールアドレス」項目と「確認用メールアドレス」の項目を追加し、2つの項目にチェック機能を実装して2つのメールアドレスが一致するかを判別できます。

「確認用メールアドレス」の項目を追加することで、訪問ユーザーの問合せメールアドレスの間違えや、ハッキング・不正アクセス防止にも繋がります。

WordPress(ワードプレス)で「Contact Form 7」に確認用メールアドレス項目を追加して入力チェック機能を実装する方法

確認用メールアドレス項目を追加して入力チェック機能を実装する方法

確認用メールアドレス項目を追加して入力チェック機能を実装する場合は、「確認用メールアドレス」の項目を追加し、「functions.php」ファイルにチェック機能を実装するコードを記述する必要があります。

1.確認用メールアドレス項目を追加

管理画面メニューの「お問い合わせ」をクリックしてコンタクトフォーム編集画面へ移動します。
コンタクトフォーム編集画面のフォームの設定で新しく「確認用メールアドレス」の項目を追加し、「保存」ボタンをクリックします。
※フォーム入力画面に追加したら、「メール設定」のメール本文内に「確認用メールアドレス」が表示されるように設定を行います。

WordPress(ワードプレス)で「Contact Form 7」に確認用メールアドレス項目を追加して入力チェック機能を実装する方法
確認用メールアドレス項目
[email* your-email_confirm]

2.チェック機能を実装するコードを記述

チェック機能を実装するには「functions.php」ファイルに記述する必要があります。
サーバーにインストールされたWordPressの「テーマ」ファイルから「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;
}

まとめ

WordPress(ワードプレス)のような動的に動かすCMSは脆弱性も弱いので、お問い合わせフォームなどで確認メールアドレスの入力項目を追加し、BOTからのアクセスを防ぐには必要ですね。
また、せっかくお問い合わせが来たのにメールアドレスが間違っていてお客さんとセッションできないとなるともったいないですね。なるべく確認メールアドレスの追加は行いましょう。