今回は、Contact Form 7 を利用している問い合わせフォームで、メールアドレスの再入力チェックをする方法をご紹介します。
再入力チェックとは、
- 通常のメールアドレスの他に、確認用のメールアドレスを入力してもらう
- 通常のメールアドレス確認用のメールアドレスが同じものになっているか？
のチェックをする機能です。
これにより、メールアドレスの誤入力を防ぐ事が出来ます。
Contactform7を使って問い合わせフォームを作る方法に関しては、以下を参考にしてください。
目次
メールアドレスの再入力チェックを行うための手順
以下手順にて実施します。
- 1.通常のメールアドレスと確認用のメールアドレスの項目を作成する
- 2.function.phpにコードを追加する
- 3.動作確認
加えて、メールアドレスのコピペを禁止にする方法もご紹介します。
手順1：通常のメールアドレスと確認用のメールアドレスの項目を作成する
まずは、通常のメールアドレスと確認用のメールアドレスの項目を作成します。
左メニュー[お問い合わせ]をクリックし、遷移させるフォームをクリック
通常のメールアドレスと確認用のメールアドレスの項目を作成
フォームの中に、以下項目を入力してください。
<label> メールアドレス (必須)
[email* your-email] </label>
<label> 確認用メールアドレス (必須)
[email* your-email_confirm] </label>この際に、項目名に関しては必ず以下としてください。
[email* your-email] [email* your-email_confirm]入力イメージ
手順2：function.phpにコードを追加する
※作業を開始する前に、必ずバックアップを取ってください。
設定ミスがあると、真っ白になります。
FTPソフトを利用し、function.phpをダウンロード
function.phpは、wp-content/themes/テーマ名のフォルダの中にあります。
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 );追記イメージ
function.phpをアップロード
アップロードする際には、元々のファイルの消さないように、
- サーバにある、function.phpをfunction.php_orgなどに名前を変更
- コードを追記したfunction.phpをアップロード
といった形で実施してください。
手順3：動作確認
メールアドレスが異なっている時の確認
問い合わせフォームの通常用と確認用のメールアドレスに異なったメールアドレスを入力して見てください。
「確認用のメールアドレスが一致していません」と表示されればOKです。
メールアドレスが合っている時の確認
念のため、メールアドレスがきちんと入力されている時に、正常にお問い合わせが出来ているかも確認してください。
補足：メールアドレスのコピペを禁止にする方法
左メニュー[お問い合わせ]をクリックし、遷移させるフォームをクリック
フォームに以下コードを追加
- 出来るだけphpファイルを開かない。
- 余計なページに余計なコードを書かない。
ことを考え、フォーム内にコードを設置していますが、お問い合わせフォームが複数あり、複数のフォームで再入力チェックを行う場合には、コードをfooter.phpなどに追加する事で、1度の記載で済む形にするのも良いと思います。
ラベルにコピペが出来ない旨を追記
コピペが出来ないことを追記しておかないと、「このフォームおかしいのか？」と思われてしまう場合もあります。
そのため、コピペが出来ない旨を追記しておきましょう。
項目の追加は、必ずお客様に合わせて実施
今回は、Contact Form 7 を利用している問い合わせフォームでメールアドレスの再入力チェックをおこなう方法と、コピペの入力を禁止する方法ご紹介させて頂きました。
メールアドレスの再入力チェックを行う事で、メールアドレスの誤入力を防ぐ事が出来ます。
ただし、
- 入力項目が増える
- コピペを禁止する事で手間が増える
事により、「問い合わせフォームまで来たけど、面倒だから問い合わせを辞める」といった事につながってしまう可能性もありますので、お客様の状況に合わせて項目の有無を判断してください。
おすすめ記事Web屋が紹介。WordPressを使う上で、良く使うプラグインとあえて使わないプラグイン
おすすめ記事WordPressは簡単じゃない？WordPressを使う上で必要なシステムメンテナンス。
投稿者プロフィール
こんにちは。㈱シンラウンド代表の中島 達（@NakajimaSatoru）です。