wordpressの「Contact Form 7」で確認画面を表示するライブラリとなります。

※2013/01/22追記
Cherry Pie Webの方が改造してくださってます。こちらも合わせてお読みください。

デモ

http://blog.aulta.net/inquiry/

上記のお問い合せフォームを体験ください。※「送信確定」すると送信されますが・・・。

ダウンロード

ライブラリのダウンロード

javascriptファイルとcssファイルをzipしています。

設置手順

  • ダウンロードした「contactform7.zip」を解凍します。
  • 「contact-form7-confirm.js」を編集します。
  • サーバにアップします。
  • <head>タグに上記jsとcssを読み込むように加えます。
  • 「WPtouch」プラグインを使う場合は、WPtouchのテーマファイルの<head>タグにも加えます。
  • 「contact-form7-confirm.css」を編集して見た目の調整を行います。

contact-form7-confirm.jsの編集

10~19行目で設定を行います。

'path' : ['/inquiry/'],

設置するURLのドメインを省いたところを記述します。
http://blog.aulta.net/inquiry/ に設置する場合、/inquiry/ となります。
ContactForm7を複数のページに設置している場合で、下記ボタンなどが同じ設定の場合は、配列で指定できます。
'path' : ['/inquiry/', '/inquiry2/', '/inquiry3/']

'areaClassName' : 'submit-button',

送信ボタンを囲むエリアのclass名を指定します。
Contact Form 7の設定画面で、<p class="submit-button">[submit "送信"]</p> のようにclass名を付けてください。

'confirm' : '',

確認画面へ進むためのボタンを指定します。
<input type="button" class="button-confirm">
<img src="" class="button-confirm" />
上記のいずれかを指定します。class="button-confirm"を忘れないようにしてください。

'rewrite' : '',

確認画面から戻るためのボタンを指定します。
<input type="button" class="button-rewrite">
<img src="" class="button-rewrite" />
上記のいずれかを指定します。class="button-rewrite"を忘れないようにしてください。

複数のページでContactForm7を使っていて個別に設定する場合

上記で設定した、 { } の部分をコピーして、下記のように加えます。
pages : [
  {
    'path' : ['/inquiry/'],
    'button' : {
      'areaClassName' : 'submit-button',
      'confirm' : '<input class="button-confirm" type="button" value="確認へ" />',
      'rewrite' : '<input class="button-rewrite" type="button" value="書き直す" />'
  },
  {
    'path' : ['/inquiry10/'],
    'button' : {
      'areaClassName' : 'submit-button',
      'confirm' : '<input class="button-confirm" type="button" value="確認する" />',
      'rewrite' : '<input class="button-rewrite" type="button" value="戻る" />'
  }
],

テーブルレイアウトの場合

入力項目を table タグを使っている場合は、下記のように、th、tdの組合せとすることをオススメします。
この場合、THの内容を「タイトル」として認識します。

<table>
  <tr>
    <th>質問タイトル</th>
    <td>部品</td>
  </tr>
  <tr>
    <th>質問タイトル</th>
    <td>部品</td>
  </tr>
</table>

デフォルトレイアウトの場合

下記はデフォルトで設定されているhtml例です。

<p>お名前 (必須)<br />[text* your-name] </p>

この場合、下記のようにタイトル部分を<span class="title"></span>で括ります。

<p><span class="title">お名前</span> (必須)<br />[text* your-name] </p>

うまく動作しない場合

このページ下部のフッター部分を参考に、お問い合せください。