Contact Form 7に確認画面を設置する
Contact Form 7の初期設定では問い合わせフォームへの入力内容を確認する画面が表示されません。Contact Form 7で確認画面を表示するにはContact Form 7 add confirmプラグインを使う方法があります。
以下、使い方を説明します。
Contact Form 7に確認画面を設置する
「プラグイン」‐「新規追加」メニューからContact Form 7 add confirmプラグインをインストール、有効化します。
確認画面を機能させるため、「確認」ボタンや「戻る」ボタンを設置する必要があります。
それには、「お問い合わせ」‐「コンタクトフォーム」メニューで問い合わせフォームの編集画面を開いて、フォームに「確認」ボタン(1)や「戻って編集」ボタン(2)を追加します。
「送信」ボタンは設置済みだとします。
ボタンの設置順は自由ですが、細かいレイアウトを気にするのであれば確認、戻る、送信の順が良いかもしれません。
[confirm "確認する"][back "戻る"][submit "送信"]
これで設定は完了です。問い合わせフォームの入力画面を表示すると、「送信」ボタンの代わりに「確認」ボタンが表示されているはずです。
内容を入力して「確認」ボタンをクリックすると、内容を確認する画面が表示されます。
「送信」ボタンをクリックするとメールが送信されます。「戻る」ボタンをクリックすると入力画面に戻って編集できます。
確認画面のスタイル設定
確認画面のフィールドには「wpcf7c-conf」というクラス名が付いているのでCSSでデザインを制御できます。たとえば、確認画面でフィールドの背景色や枠線を非表示にするCSSは次のようになります。
/* 確認画面のフィールド背景色や枠線を消す */
.wpcf7c-conf, .wpcf7c-conf:focus {
background-color: transparent;
border: none;
}
子テーマのstyle.cssまたは「外観」-「CSSカスタマイズ」などのメニューに入力してください。
表示結果は次のようになります。
入力・確認・完了画面に別々のメッセージを表示
確認画面を作成したり、入力・確認・完了画面を別々にする場合、冒頭に表示するメッセージも別々にしたいことがあります。たとえば、こんな感じです。
- 入力画面 --- 当社へのお問い合わせはこちらからお願いします。
- 確認画面 --- 入力内容を確認して「送信」ボタンをクリックしてください。
- 完了画面 --- お問い合わせありがとうございます。
Contact Form 7 add confirmプラグインでは個々の画面だけに表示されるクラスがあるので画面ごとに表示したいメッセージを切り替えることができます。
- 入力画面だけに表示される --- wpcf7c-elm-step1
- 確認画面だけに表示される --- wpcf7c-elm-step2
- 完了画面だけに表示される --- wpcf7c-elm-step3
つまり、次のようなブロックを作成すれば、1つのコンタクトフォーム編集画面で別々の画面のメッセージを制御することができます。
<p class="wpcf7c-elm-step1">当社へのお問い合わせはこちらからお願いします。</p> <p class="wpcf7c-elm-step2">入力内容を確認して「送信」ボタンをクリックしてください。</p> <p class="wpcf7c-elm-step3">お問い合わせありがとうございます。</p>
入力したイメージは次のようになります。
各画面の表示結果は次のようになります。
そもそもメールフォームに確認画面は必要？
問い合わせフォームや申し込みフォームを作成するとき「そもそも確認画面って必要なの？」が疑問かもしれません。確かに作るメリットがなければ面倒な思いをして作る必要もないですよね。
使い勝手の面で言えば「確認画面があった方が親切」くらいの気持ちかもしれませんが、法的に言えば特定商取引法は無視できません。悪徳業者から消費者を守るための法律です。
インターネット犯罪に限りませんが悪徳業者の典型的な手口は、意に反して（契約するつもりがないのに）契約させることです。
ですから消費者を守る特定商取引法では「顧客の意に反して契約の申込みをさせようとする行為の禁止」（第14条）が規定されています。
詳しくは上記サイトも参考に条文やガイドラインを参考にしていただければと思います。
インターネット通販など、サービスや商品の申し込みを行うシステムにおいては申し込み内容を確認する画面を設置したり、申し込みということがハッキリわかるような画面が求められています。
つまり、単純なメールフォームには確認画面は不要かもしれませんが、少なくとも料金のかかる申し込みや商品の購入などの商取引においては確認画面は必須と言って良いでしょう。