Contact Form 7でメールアドレスの確認入力を促す

WordPress（ワードプレス）を利用してブログやホームページを作成した際、利用者が運営者に連絡を取るためのメールフォームはプラグインで実現出来ます。その定番として Contact Form 7 を紹介したのは本ブログ2011年7月8日の記事 WordPressメールフォームプラグイン Contact Form 7 でした。 Contact Form 7 さえインストールすれば特に設定も必要がなく

お名前 (必須）
メールアドレス (必須）
題名
メッセージ本文
送信ボタン

が最初から使えたのでした。

しかし簡単に欲しかった機能が手に入ってみれば人間欲の出てくるものです。上の実現できるメールフォーム項目の内、メールアドレスについては他サイトのメールフォームでもよく目にする「確認のためにもう一度ご入力ください。」という確認再入力の機能が欲しくなってくるのも自然かも知れません。ところがこの機能は Contact Form 7 には2011年7月の現時点では実装されていません。では諦めるしかないかと思えば然にあらず、インターネットは異なもの味なもの、ちゃんとこの機能を実現してくれている方がいました。機能の紹介サイトが こぶたのラッパ （可愛い名前ですね）さんの2010年12月2日の記事…

Contact Form 7で確認用メールアドレスの入力フォームを加える方法です。

そこに紹介されているコードを以下に引用させていただきます。

<?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 ) {
 $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]) {
 $result['valid'] = false;
 $result['reason'][$name]
 = '確認用のメールアドレスが一致していません';
 }
 }
 }
 return $result;
}
?>

WordPressにはバージョン3より親テーマと子テーマが設けられ、テーマに含まれる一ファイル function.php についてのみは、子、親の順番で両ファイルとも読み込まれるのでした（ WordPress3の親テーマと子テーマとファイルの継承 2011年7月11日記事参照）。従って子テーマを利用している場合は上の引用コードを其の侭 function.php として保存し子テーマのディレクトリ内に配置すればいいことになります。これを Contact Form 7 側が受けるには

メールアドレス 
[email* your-email] 
メールアドレス (確認用） 
[email* your-email_confirm]

と記述するように指示されています。手元の WordPress 環境でもこの操作で機能を実現できることを確認しました。

以上で欲しかった機能は実現できる訳ですが、入力欄の隣に「確認用」と表示するのは少し無粋かも知れません。入力欄に直接その旨記されていれば更に使い勝手は向上するでしょう。その方法を紹介してくれているサイトもありました。 D-31N.COMデザインスタジオ の2011年2月25日の記事 wordpress Contactform7をカスタマイズがそれです。記事での指示は こぶたのラッパ さんでの記述に対して以下のように赤字部分を書き足すだけです。

[email* your-email_confirm watermark"確認のため再度ご入力ください"]

これにより手元の環境では以下の様に表示されました。（デザイン上の必要からコードは多少弄っていますが基本的な部分は変りません。）

機能が実装できているのが確認するために実際に異なるメールアドレスを入力して送信ボタンを押してみた処、呈された情況が以下の図です。どうやら想定通りの動きをしてくれました。

※ なお、ここで言及、動作確認している WordPress のバージョンは 2011年7月時点で最新版の 3.2 です。

1件のコメント