wordpressにformを追加するプラグインといえばContactForm7が有名ですが、こちら、確認画面がついていないことも同じくらい有名ですね。このプラグイン、使い勝手は最高なので、確認画面をつける方法は無いのかしらとネットをふらふらしていたら、jQueryで擬似的に確認画面（というより確認フェーズ）を間に挟むスクリプトを書いてくださっている方がいらっしゃいました。
※2012/08/02追記
確認画面があるメールフォームとしてTrustFormを試してみました。
「使用に際しては自己責任で」とのことでしたので、とりあえず自分のブログで使ってみようということで、このブログに設置してみました。
※（実際に僕宛に送れてしまうので、ご注意くださいませ。や、うっかり送っていただいても問題は全くありませんが）
使用するスクリプトのDLと、設置の仕方は上記サイトに書いてありますので詳細はそちらをご覧ください。
ContactForm7を設定し、jquery.jsと上記サイトからDLしたjsファイルをヘッダに読み込むだけです。
JSの処理の概要は以下のような感じです。(ほぼ上記サイトに書かれている内容と同一ですが・・・)
- 送信ボタンを確認ボタンへ変更
- 確認ボタンが押されたらバリデーションを行い、エラーがあればメッセージを表示。
ちなみにバリデーションは必須のチェックと、メールアドレス形式のチェックのようです。 - 入力内容に問題が無ければ、全ての入力項目にreadonly属性やdisabled属性を追加して、チェックボックスやラジオボタンについては、選択されていない内容を非表示にします。
- 確認ボタンを、送信と戻るのボタンに入れ替えます。
- もし修正が押されたら、上の処理を全部元に戻します。送信が押されたら、内容を送信します。
3の段階で表示のみの画面となるようJSで調整し、それを確認画面として使う感じですね。
個人的に、確認画面で入力枠のボーダーが表示されたままなのは微妙かなあと思ったので、元のスクリプトに、以下の記述を加えてみました。
56行 表示のみとなった時点でinputのボーダーを消す
$('.wpcf7-form input[type="text"], .wpcf7-form textarea').css({"border":"none"});
69行 修正で戻った際に、inputにボーダーを追加
$('.wpcf7-form input[type="text"], .wpcf7-form textarea').css({"border":"1px solid #999999"});
※2013/02/03追記 メールにてご指摘いただきました。
ご紹介したサイトで配布されているjsがアップデートされており、現在は上記記述は56行目→65行目、69行目→79行目になっているようです。
問題なく動作したみたいです。
確認画面に遷移する際の処理は主に54行目～。修正画面に戻る際の処理は67行目～のようですので、遷移の際に加えたい処理があれば、jsのそのあたりに追記してやればいいと思います。
ちなみに、「個人情報保護方針に同意して送信する。」などのチェック項目を設定する場合（これ、今はcontactformの標準機能であるんですね。便利便利。）チェックしないと「確認」（本来は送信）ボタン自体が押せなくなる、という仕様なので、特にこのスクリプトとぶつかるようなことはありませんでした。
やってることは、送信の前に全ての値を表示するフェーズをJSで擬似的に作り出しているだけですので、改変は、通常のHTMLやCSSの範疇で自由にできそうです。
元々案件で必要になるかもということで調べていたのですが、実際に使う機会が訪れたら有効に活用させていただきたいと思っています。作成・配布してくださった方に感謝いたします。