[WP]WordPressのContact Form 7で入力確認を挟む方法

WordPress

2013.06.24

今回は WordPress のお問い合わせフォーム用プラグインContact Form 7に入力確認を設置する方法を紹介させていただきます。

特に企業サイトへContact Form 7のプラグインを導入する場合は、便利なカスタマイズではないかと思います。

※Contact Form 7のインストール方法や基本的な使い方は、別途[WP]お問い合わせフォーム用WordPressプラグイン「Contact Form 7」の基本設定の記事を参考にしてみてください。

jquery.wpcf7.confirm.jsのダウンロードと設置
エラーメッセージやレイアウトの補正
Contact Form 7で確認画面を挟む動き
補足
Contact Form 7の確認画面が上手く表示されない場合
1. jQueryファイルに関して
2. jquery.wpcf7.confirm.jsファイルの設置場所に関して

jquery.wpcf7.confirm.jsのダウンロードと設置

以下のページよりjquery.wpcf7.confirm.jsファイルをダウンロードします。
http://elearn.jp/wpman/column/c20111212_01.html

ダウンロードしたjquery.wpcf7.confirm.jsを、jqueryファイルと一緒に<head>内か </body> 直前に設置します。

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.wpcf7.confirm.js" type="text/javascript"></script>

1 2	<script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.wpcf7.confirm.js" type="text/javascript"></script>

エラーメッセージやレイアウトの補正

「送信」「確認」「修正」などのボタンや、エラーメッセージのテキストを変更することができますので、jquery.wpcf7.confirm.jsファイルを開き、11 〜 19 行目の以下の記述をサイトに合わせて補正します。

var SUBMIT_NAME = '送信';
var CONFIRM_NAME = '確認';
var MODIFY_NAME = '修正';
var SELECT_EMPTY_LABEL = '---';
var SELECT_EMPTY_VALUE = '---';
var MODIFY_BUTTON_ID = 'wpcf7-modify';
var ALERT_MESSAGE_CLASS = 'wpcf7-not-valid-tip';
var EMPTY_MESSAGE = '必須項目に記入もれがあります。';
var INVALIDE_EMAIL_MESSAGE = 'メールアドレスの形式が正しくないようです。';
var DISABLE_SELECT_COLOR = 'color:#000000';

var SUBMIT_NAME = '送信';

var CONFIRM_NAME = '確認';

var MODIFY_NAME = '修正';

var SELECT_EMPTY_LABEL = '---';

var SELECT_EMPTY_VALUE = '---';

var MODIFY_BUTTON_ID = 'wpcf7-modify';

var ALERT_MESSAGE_CLASS = 'wpcf7-not-valid-tip';

var EMPTY_MESSAGE = '必須項目に記入もれがあります。';

var INVALIDE_EMAIL_MESSAGE = 'メールアドレスの形式が正しくないようです。';

var DISABLE_SELECT_COLOR = 'color:#000000';

Contact Form 7で確認画面を挟む動き

STEP1 の入力ページ

お問い合わせページに移動すると、「送信」ボタンの部分が「確認」ボタンに変わっていますので、必要な情報を入力選択してから「確認」ボタンをクリックします。

[WP]WordPressの「Contact Form 7」で入力確認を挟む方法

この辺りの仕様について、WordPress私的マニュアル様の記事を引用させていただくと

1. 初期時に「送信」ボタンを「確認」ボタンに書き換える。

2.「確認」ボタンが押された際、パラメータのバリデーションを行い、不備があればエラーメッセージを表示する。

3. 2で不備がなければ、各テキスト項目とテキストエリアにはreadonly属性を、ドロップダウンメニューにはdisabled属性を、
チェックボックスとラジオボタンは選択されていないinputタグ前後のラベル部分と、すべてのinputタグを非表示に。さらに「確認」ボタンを「送信」ボタンに書き換え、その前に「修正」ボタンを追加する。

4.「修正」ボタンが押された際は、3で行った処理を元に戻す。

5.「送信」ボタンが押された際は、ドロップダウンメニューにはdisabled属性を取り、正式なサブミットとする。

WordPress私的マニュアル

という仕掛けになっているようです。

STEP2 の確認画面

確認画面では「修正」ボタンが新たに追加表示されています。

※レイアウト調整していないので、ボタンのバランスがおかしいですが、ご了承願います。

STEP3 の完了画面

確認フェーズの「送信」ボタンをクリックするとloading画像がクルクル回って、

あらかじめ用意した送信完了ページへ遷移（送信完了）します。

補足

Contact Fornm 7で完了画面を設置する方法は、別途こちらの記事で紹介していますので、合わせて参考にしてみてください。

Contact Form 7の確認画面が上手く表示されない場合

「お問い合わせページに『確認』ボタンが出てこない…」
「確認画面を挟むけど、すぐに勝手に完了画面に遷移してしまう…」

なんて事例が過去にありました。

確認画面が正常に動作しない場合は、jQueryファイルとjquery.wpcf7.confirm.jsの設置に関して微調整を行う必要があります。

jQueryファイルに関して

まず前提として、今回の確認画面を挟むカスタマイズはjqueryファイルが無いと使えませんので、正常に動かない場合は<head>内のソースを確認します。

過去に経験した例では、<?php wp_head(); ?>で出力される

<script type='text/javascript' 
src='http://ドメイン名/wp-includes/js/jquery/jquery.js?ver='></script>

1 2	<script type='text/javascript' src='http://ドメイン名/wp-includes/js/jquery/jquery.js?ver='></script>

の記述よりも後に、自前で用意したjQueryファイルを「2重に設置」していたがために、正常に上手く動かないことがありました。

jquery.wpcf7.confirm.jsファイルの設置場所に関して

また、<head>内にjquery.wpcf7.confirm.jsを設置する時には、jsファイルの場所を
<?php wp_head(); ?>よりも「後」にすることで正常に動くこともあるようです。

他のプラグインとのコンフリクトの問題でしょうか。