(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 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数
最新の投稿
ご質問・ご相談などありましたら
お気軽にお問い合わせください
資料請求・お問い合わせにはメールアドレスが必要です
コメントを残す