[WordPress] Contact Form 7で確認用メールアドレスのチェックを確認画面で行う

（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八王子など登壇多数

最新の投稿

• 日記2024年12月24日2024年もベクトルさんの質問相談会に助けられました
• 日記2024年12月19日2024年、買ってよかったThinkPad
• 日記2024年12月14日永遠に心に残る映画のラストシーン
• 技術記事2024年10月6日WordPressでカスタムフィールドや繰り返しフィールドを使うなら「Lazy Blocks」がオススメ！