（2014年7月19日 Contact Form 7 3.9 で大幅な内部構造の変更が行われましたが、下記のカスタマイズに関しましては3.9での確認を行っておりません。ご了解ください。
動作確認のご連絡などいただけますと大変うれしいです）
Contact Form 7 には確認用メールアドレスというものがない
様々な機能を持っている「Contact Form 7」ですが、結構欲しいのに標準にはない機能の一つが、確認用メールアドレスの整合チェック機能です。
連絡用メールアドレスや、メールアドレスをIDとして使用する場合など、間違えてしまうと致命的になるものを2度入力させるというケースは、よくあると思います。
これは、下記のサイトにある方法で実現できます。
Contact Form 7で確認用メールアドレスの入力フォームを加える方法
こちらのページに書いてあるコードを functions.php に貼り付け、確認用メールアドレスのフィールドの名前を元のメールアドレスのフィールドの名前に「_confirm」を追加したものにするだけなので、PHPがよくわからなくても実装できます。
ところが、他のカスタマイズと同時に使おうと思うと、運用で問題を生じることがあります。
そのカスタマイズとは「確認画面の表示」です。
確認画面と確認用メールアドレス
確認画面については、Contact Form 7 の作者の方がメールフォームには不要なものであると考えられていて、今後も実装される予定はないようです。
http://ja.forums.wordpress.org/topic/648
そのため、別の方法で確認画面を実装する方法がいくつか公開されています。
たとえば、下記の方法などが有名です。
wordpressのcontact form 7で確認画面を出す手軽なライブラリ
これらの手法と、先ほどの確認用メールアドレスの整合チェックを併用しても、特にシステム的には問題ありません。
しかし、併用して実際に入力を行ってみると、
確認用メールアドレスに違うメールアドレスを入力しても、確認画面ではエラーが出ず、送信ボタンを押した後で、整合チェックが行われてエラーが出る
という問題が生じます。
確認画面を出す方法としては、JavaScriptの処理を割り込ませてフォーム内容の確認を行うという手法が用いられています。
つまり、Contact Form 7 が行っている確認作業をJavaScriptで事前にそっくり行ってしまい、送信ボタンを押した後で行われる Contact Form 7 のチェックをパスさせてしまおうということなのですが、Contact Form 7の標準機能でない確認用メールアドレスの整合チェックは含まれていません。
そのため、確認画面を出すJavaScriptでは、確認用メールアドレスに対しては「メールアドレスとして書式が正しいかどうかのチェック」しか行われず、送信ボタンを押した後で確認用メールアドレスの整合チェックに引っかかってしまうというわけです。
この問題の解決のために、確認画面を出すJavaScriptにて、確認用メールアドレスの整合チェックも行うように改造してみます。
ライブラリの改造
※以下の改造は、私が独自に行ったものです。作者の方に問い合わせをされないようにお願いいたします。
まず、確認画面を出すためのライブラリを下記よりダウンロードします。
wordpressのcontact form 7で確認画面を出す手軽なライブラリ
ダウンロードしたら、上記のページに書いてある通りに設定を行います。
まず、contact-form7-confirm.js を編集して、フォームを設置しているURLの指定と、送信ボタン、確認ボタン、戻るボタンの指定を行います。
次に、Contact Form 7 のフォーム設定画面で、各フォームのタイトルを <span class=”title”><span>でくくります。
また、確認用メールアドレスの入力フィールドも作成します。
名前は、元のメールアドレスのフィールド名に「_confirm」を追加したものにします。
ここでいったん、cssファイルと上記設定済みのjsファイルをサーバーにアップして、確認画面が正常に動作するか確認をしてください。
（確認用メールアドレスのフィールドについては、書式のチェックしか行われません）
動作の確認ができたら、確認用メールアドレスの整合チェックを組み込む改造を行います。
contact-form7-confirm.js を開いて、エラーメッセージの設定をします。
25行目あたりにemailに関する設定があるので、その下に、email_confirmという項目を追加します。
直前の「｝」のあとにカンマを入れ忘れないように注意してください。
email : {
match : /^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{2,}$/,
before : '',
after : 'を確認してください。'
},
email_confirm : {
before : '',
after : 'が合っていません。'
}次に、192行目あたり（上記を追加した後だと196行目あたり）にあるメールアドレスの書式チェックを行っている部分を見つけます。
この続きに、下記を追記します。
} else if (child.hasClass('wpcf7-validates-as-email')) {
var email_conf_name = 'span.'+child.attr('name')+'_confirm input';
if ( jQuery(email_conf_name)[0] ) {
if (jQuery.trim( child.val()) != jQuery.trim(jQuery(email_conf_name).val())) {
error.append(jQuery('<li>').text(option.validates.email.before + title.replace('必須', '') + option.validates.email_confirm.after));
jQuery(this).parents('tr').addClass('error');
}
}
}修正したら、contact-form7-confirm.js を上書きしてサーバー上のファイルを更新してください。
なお、この修正を行った場合は、「wordpressのcontact form 7で確認画面を出す手軽なライブラリ」で行った functions.php への追記は削除してください。（残っていても問題はありませんが必要ありません）
これで、確認画面を出す時点で確認用メールアドレスの整合チェックも行われ、エラーも表示されます。
聞くところによれば、メールフォームの確認画面というのは、日本独自の文化なのだそうです。
最近は、日本人の方が開発された確認画面付きのメールフォームプラグインもいくつか登場してきているようです。
セキュリティ面・カスタマイズ性などで、現時点では Contact Form 7 のほうがまだまだ優れているのですが、今後開発が進んで、プラグインの選択肢が増えてくればいいですね。
この記事を書いた人
-
FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き
1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2025 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordCamp Kansai 2016 セッションスピーカー
WordBench京都、WordBench神戸、WordBench奈良、WordPress Meetup八王子など登壇多数
最新の投稿
ブログ2025年11月16日WordCamp Kansai 2025 で「触れるけど壊れないWordPressの作り方」についてお話しました
技術記事2025年6月15日ブロックテーマ時代のWordPress制作ワークフローとは
技術記事2025年3月7日WordPressに百千鳥フォントを入れて遊んでみました
ブログ2025年1月3日移転のお知らせ（2024年）
ご質問・ご相談などありましたら
お気軽にお問い合わせください
資料請求・お問い合わせにはメールアドレスが必要です
コメントを残す