Contact Form 7 確認画面の追加

≪ Contact Form 7 を利用している場合で、確認画面を追加したい場合の方法 ≫

説明: http://kotori-blog.com/wordpress/contact-form-7/

「Contact Form 7」の編集画面から「確認ボタン」と「戻って編集ボタン」を追加する

【手順メモ】

1. Contact Form 7 add confirm というプラグインをインストールして有効化します。

2. Contact Form 7で作成している「問い合わせ」フォーム編集画面のツールボックスに、
「確認ボタン」 と 「戻って編集」ボタンが追加されているので、対象となるフォームに両方とも追加します。

例)

<P class=”wpcf7c-elm-step2″>上記の内容でよろしければ<span style=”color:orangered;”>送信</span>ボタンを押して下さい。</p>
<p>[confirm “確認”][submit “送信”][back “戻って編集”]</p>

※ 上記で class = wpcf7c-elm-step2 は 確認画面でしか表示されないクラスなので、確認画面だけに表示したいテキスト等を記述できます。

同様に、 wpcf7c-elm-step1 (入力画面のみのクラス)、 wpcf7c-elm-step3(完了画面のみのクラス)が利用できます。

以上で、確認ボタン、送信ボタン、戻って編集ボタンが、入力画面と確認画面にそれぞれ配置されます。

【留意事項】

1.確認画面は、 Ajax で制御しているので、画面遷移はおきません。

2.「確認画面で表示される」とうたっている wpcf7c-conf が何故か表示されません。(要確認)

このため、確認画面の 入力フォームのスタイルをあれこれ変更しようとしても出来ません。
もちろん入力自体はガードされています。

wpcf7c-elm-step2 は利用できるので、 テーマの編集(style.css) に当クラスが制御している箇所については制御可能です。

例)  テーマの編集(style.css)

/* Contact Form 7 確認画面の スタイルを指定 */
.wpcf7c-elm-step2 {
background-color:#FFFACD;
}

– End –