WordPressの代表的な問い合わせプラグインであるContact Form7ですが、通常の仕様では確認画面が表示されません。
利用する側になってみると、内容を確認したり修正したいときに入力画面に戻れると安心です。
実は「Contact Form7」に確認画面を追加するプラグイン「Contact Form 7 add confirm」があり、簡単便利だったので設定方法をお伝えします。
Contact Form7に「Contact Form 7 add confirm」で確認画面を追加
プラグインのインストール
- WordPressの管理画面サイドメニューより「プラグイン」＞「新規追加」をクリック！
プラグインの新規追加画面より「Contact Form 7 add confirm」を検索。
- 表示されたら、今すぐインストールをクリック！
- インストールが済んだら、有効化をクリック！
Contact Form 7 add confirmの設定
フォームに「確認ボタン」と「戻って編集ボタン」を加える
続いて、使用しているお問い合わせフォームを編集します。
プラグイン「Contact Form 7 add confirm」をインストールしたことで、「確認画面へ進むボタン」と「入力画面へ戻るボタン」が付けられるようになりましたので、早速設定していきましょう。
- WordPressの管理画面の左メニューから「お問い合わせ」を選択し、確認画面を追加したいお問い合わせフォーム（ここではコンタクトフォーム１）をクリック！
新しく「送信ボタン」「確認ボタン」「戻って編集ボタン」が追加されています。
確認ボタンの追加
- 送信ボタンの上にスペースを作り、「確認ボタン」をクリック！
- 確認ボタンの作成画面が表示されるので、ラベルに「確認画面へ」と入力し、「タグを挿入」をクリック！
戻って編集ボタンを追加
続いて、「戻って編集」ボタンも追加します。
- 「確認画面へ」の上にスペースを作り「戻って編集ボタン」をクリック！
- 「戻って編集ボタン」の作成画面が表示されるので、ラベルに「戻る」と入力し、「タグを挿入」をクリック！
追加したボタンの表示を確認してみる
上記のようにお問い合わせフォームに「確認画面へ」が追加（表示）されています。
- テスト入力後、「確認画面へ」をクリック！
背景色が濃いグレーなのが気になりますが、下に「戻る」ボタンと「送信」ボタンが表示されているのがわかります。
背景色は、使っているテーマなどによるもので、上記の例の「送信」ボタンが赤色なのも、私が使っているテーマの設定によるものです。
確認画面のデザインカスタマイズ
ここでは以下の２点をカスタマイズしておきます。
- 入力欄の色が見づらい → 確認時の入力欄の色を調整する
- 確認画面である表示が無い → 確認画面である表示を加える
背景色の変更
デフォルトでは確認画面の入力箇所の背景色が濃いグレーになり文字も見えづらかったので変更します 。
背景色は background-color で指定します。薄めのグレーに指定してますが、数値を変えることで自由に変更ができます。
入力ボックスの線の色を薄めの色にして、入力画面と確認画面の違いを出しています。周りの線の色は、＃AEAEAE の値を変えることで自由に変更ができます。
これをCSSに設定すると、確認画面は以下のように変わります。
少し確認画面らしくなりました。
確認画面である表示を加える
画面遷移せず何の表示もなく確認画面になるので、確認画面であることに気付けません。送信ボタンの上部に「内容を確認して送信ボタンを押してください」などの表示を加えます。
フォーム編集画面を開き、以下のタグを追加します。
pタグに付与しているCSSクラスwpcf7c-elm-step2は「Contact Form 7 add confirm」プラグインが追加するスタイルです。最初の入力時（step1）には表示せず、確認画面になった時（step2）にこのクラスを表示する仕組みになっています。
どのように表示されるか確認してみます。
↓ ↓ ↓ ↓
これで確認画面であることに気付きやすくなり、戻るか内容を確認してから送信ボタンを押すかわかりやすくなりました。
まとめ
- お問合せフォームに確認画面を表示させるにはプラグイン「Contact Form 7 add confirm」を使えば設定も表示も簡単。
- 利用者の利便性と安心感のためにも確認画面があると良い
- デザインもカスタマイズして信頼感・安心感もUP
問い合わせ内容の送信の前に確認画面で入力確認のステップを入れることによって、問い合わせ情報に入力/送信ミスを防ぐこともできますし、ユーザーも確認できるので利便性・安心感がUPします。
お問い合わせフォームの設置がまだの方は以下の記事を参考にサクッと設置して、合わせて確認画面も追加しておきましょう。
-
-
WordPressにお問い合せフォームを設置!プラグイン「Contact Form 7」の設定!
続きを見る
こういったことができるようになると、いろいろと幅が広がりますね。
また、更にネットで収益化していきたい、他の人とは一味違うブログ運営がしてみたい、という場合には以下のメルマガにも登録してみてください。