[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行目あたり)にあるメールアドレスの書式チェックを行っている部分を見つけます。

if (child.hasClass('wpcf7-text')){
  if (child.hasClass('wpcf7-validates-as-required') && child.val().length == 0){
    error.append(jQuery('<li>').text(option.validates.required.before + title.replace('必須', '') + option.validates.required.after));
    jQuery(this).parents('tr').addClass('error');
  } else if (child.hasClass('wpcf7-validates-as-email') && ( ! child.val().match(option.validates.email.match))){
    error.append(jQuery('<li>').text(option.validates.email.before + title.replace('必須', '') + option.validates.email.after));
    jQuery(this).parents('tr').addClass('error');

この続きに、下記を追記します。

  } 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 のほうがまだまだ優れているのですが、今後開発が進んで、プラグインの選択肢が増えてくればいいですね。 

[WordPress] Contact Form 7で確認用メールアドレスのチェックを確認画面で行う” に対して 6 件のコメントがあります

  1. Ralph Lauren UK より:

    ここに、あなたの投稿を見ていい!

  2. WP より:

    error.append(jQuery(””).text(option.validates.email.before + title.replace(‘必須’, ”) + option.validates.email_confirm.after));
    この行ですが、
    (””)
    ここのシングルクオートが重なっているとうまく動作しないようですが、私の環境だけでしょうか??

  3. さくらぎけい より:

    シングルクオートが重なっているのはタイプミスでしたので、修正しておきました。
    ご指摘ありがとうございました。

  4. SUNNY より:

    素敵なライブラリ、ありがとうございます。
    JSとCSSはサーバーのどこにアップすればいいのですか?
    またその際、アップするだけでいいのでしょうか?

  5. さくらぎけい より:

    JSとCSSのアップ先はどこでもかまいませんが、普通はテーマディレクトリにJSディレクトリとCSSディレクトリを作ってアップすると思います。
    また当然ですが、テンプレートもしくは functions.php で読み込む必要があります。
    正直申し上げて、上記のことがおわかりにならないうちは、このカスタマイズはされないほうが良いのではないかと思いますよ。

  6. SUNNY より:

    ありがとうございます。
    参考にさせていただきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です