Contact form 7 でメールアドレス入力チェックを行う方法




WordPressでは殆どの人がプラグインの「Contact form 7」を使ってメールフォームを簡単に作られていると思います
検索すればContact form 7 のカスタマイズ手法などもたくさんアップされています。
それは私のブログでもカスタマイズ方法を書いています→Contact Form 7 カッコいいカスタマイズ
で、今回はクライアントさんにお願いされた「メールアドレスの記入間違いチェック」を搭載する方法になります。

いや~~、実は目からウロコでした^^;

コピペがあるので、間違いチェックはもう必要ないと思っておりました。
実際に、Contact form 7の公式にもその旨が書かれているほどですから、
私の多くのクライアントさんにも搭載しておりません。。

で、今回ご依頼が有りましたので探しました。

いやー。たくさんのやり方がありましたが、
一番使い勝手がよく、簡単な設定ができる設定を、今回は備忘録も兼ねて

こちらでも公開したいと思います。

基本的にWordPressの管理画面から操作できます

まずは下記のタグをコピーして下さい

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;
}

次に管理画面の「プラグイン」「プラグインエディター」をクリック

「使用するプラグインを選択」「①Contact form 7」を表示して「選択」ボタンをクリック。

プラグインファイルの中の「②wp-contact-form-7.php」を選択。すると大体67行目くらいで終わっているので、その下にさっきの追加phpタグをペースト。


ペーストしたら一番下の「ファイルを更新」をクリックでOK。

※たまにプラグインの変更が出来ませんと警告が出てクルクル状態が続いたら。FTPでサーバーの中に入って書き加える方法で解決します。
「WordPressフォルダ」→「wp-content」→「plugins」→「contact-form-7」→「wp-contact-form-7.php」で該当ファイルになります。

次は実際にフォームタグを挿入します。
まず、「お問い合わせ」→「新規追加」をクリック。

フォームタグの所にタグを追加します。
タグはこちらから↓コピペして下さい。

<p>メールアドレス【確認用】 (必須)<br />
[email* your-email_confirm] </p>

下記の部分に↓ペーストして下さい。

後は保存ボタンを押せば完了です。

きちんとメールアドレスの再入力フォームが表示されています。
(※もちろんメールアドレスが一致しないと送信できません)

【ご注意】私がブログで書いているカスタマイズ用のタグならば
こちらのタグを挿入して下さい。(あくまでもカスタマイズ用です)

<th> <span class="haveto">【※】</span><span>メールアドレス【確認用】</span></th> <td>[email* your-email_confirm class:mailsp placeholder"再度ご入力下さい"] </td> </tr>

きちんとデザインされます。