WordPress : ContactForm7に送信前の確認画面を作る

WordPressの「ContactForm7」プラグインは簡単にメールフォームを作れますが、送信ボタンを押したらすぐにメールが送信される作りで、標準では送信内容の確認画面を作る機能がありません。

ContactForm7の機能を拡張してくれるプラグインを利用して確認画面を作る方法を紹介します。

「Contact Form 7 add confirm」で確認画面を作る

プラグインの新規追加画面より「Contact Form 7 add confirm」を検索し、インストール・有効化します。

プラグインを有効化してフォーム編集画面を開くと、「確認ボタン」と「戻って編集ボタン」が追加されています。

従来の送信ボタンは残したまま、並行して2つのボタンを追加します。

保存してフォームのページを開くと確認ボタンが反映されていることが確認できます。

入力して確認ボタンを押すと「戻って編集」も反映され、送信ボタンと2択の形で表示されることが確認できます。

メールフォームの確認画面の体裁はできましたが…表示がダメすぎるので表示をカスタマイズします。

ダメすぎる点は以下2点です。

それぞれ対応します。

画面遷移せず何の表示もなく確認画面になるので、確認画面であることに気付けません。フォーム上部に「内容を確認して送信ボタンを押してください」などの表示を加えます。

フォーム編集画面を開き、以下のタグを追加してください。

<p class="wpcf7c-elm-step2">内容を確認して送信ボタンを押してください。</p>

pタグに付与しているCSSクラスwpcf7c-elm-step2は「Contact Form 7 add confirm」プラグインが追加するスタイルです。最初の入力時（step1）には表示せず、確認画面になった時（step2）にこのクラスを表示する仕組みになっています。

これで確認画面であることに気付きやすくなりました。

「Contact Form 7 add confirm」プラグインは確認画面のとき、すべての入力欄（input,textarea等）にCSSクラスwpcf7c-confを付与します。しかしデフォルトではこのクラスのスタイル設定が読みにくいだけなので、このクラスを対象にCSSを加えます。

input.wpcf7c-conf, textarea.wpcf7c-conf {
    background: #eee !important;
    border: solid 1px #eee;
    color: #666;
}

上記CSSは一例ですが、以下のような表示にできれば入力画面と確認画面ではっきり分けられるので参考にしてください。