Contact Form 7に確認画面を。GRM CF Confirmのご紹介

plugin

お問い合わせを送信する前に、入力した内容をもう一度確認したい。そんな場面に対応するのが、GRM CF Confirmです。

Contact Form 7で作成したフォームに「入力 → 確認 → 送信」の流れを追加するプラグインです。当サイトのお問い合わせフォームでも使用しています。

ポップアップで確認。ページ遷移は不要

GRM CF Confirmでは、確認ボタンを押すと、入力内容がポップアップで一覧表示されます。

入力画面から確認画面へページ遷移することなく、その場で内容を見直せるのが特徴です。既存のフォームを作り直したり、確認用のページを別に用意したりする必要はありません。

修正したい場合は「戻る」で入力画面へ戻り、問題がなければ「送信」で送信できます。名前やメールアドレス、お問い合わせ内容などを、送る前にひととおり確認できます。

確認画面はフォームごとにON・OFF

確認画面を使うかどうかは、フォームごとに設定できます。

管理画面の「GRM CF Confirm」→「Forms」から、対象フォームのスイッチをONにするだけで、確認画面を有効にできます。

お問い合わせフォームには確認画面を追加し、簡単な連絡用フォームはそのまま使うなど、用途に合わせて選べます。

入力漏れやメールアドレスを確認前にチェック

確認画面を開く前に、次の項目をチェックします。

  • 必須項目が入力されているか
  • メールアドレスの形式が正しいか
  • 確認用メールアドレスが一致しているか

必須項目が未入力の場合は、確認画面へ進まず、不足している項目をフォームの上に一覧表示します。該当する入力欄は赤枠で示されるため、修正が必要な場所を確認できます。

確認用メールアドレスの一致チェックにも対応しており、項目名の末尾に _confirm を付けて設定します。

送信後はサンクスページへ

入力内容の確認は同じページ内のポップアップで行い、送信が完了した後は、設定したサンクスページへ自動で移動します。

お問い合わせへのお礼や、返信までの目安、次の案内などを専用ページにまとめることで、送信後の流れをわかりやすく伝えられます。

移動先のURLは「Forms」でフォームごとに設定できます。

選択内容に応じて入力項目を切り替え

確認画面に加えて、ほかの項目の選択内容に応じた条件表示にも対応しています。

たとえば、「法人」を選んだときだけ会社名の入力欄を表示する、といったフォームを作れます。複数の条件を組み合わせた表示も可能です。

必要な項目を選択内容に合わせて表示できるため、用途に応じてフォームの構成を整理できます。

条件表示のコード作成をサポート

条件表示に必要なコードは、「Code Generator」で作成できます。

表示条件となる項目名や値、表示する項目の種類などを入力して「コード生成」を押すと、Contact Form 7のフォーム本文に貼り付けるコードが生成されます。

条件表示の記述を一から組み立てる手間を減らし、フォームの設定を進められます。

導入の流れ

GRM CF Confirmは、Contact Form 7と組み合わせて使用します。

  1. Contact Form 7でフォームを作成し、ページに設置する
  2. 「GRM CF Confirm」→「Forms」で確認画面をONにする
  3. 送信後に移動するサンクスページのURLを設定する
  4. 必要に応じて「Code Generator」で条件表示を追加する

設定後は、入力からポップアップでの確認、修正、送信、サンクスページへの移動まで、ひととおり動作を確認してください。

当サイトのお問い合わせフォームにも採用

当サイトのお問い合わせフォームでも、GRM CF Confirmを使用しています。

入力したページを離れずに、ポップアップで内容を確認してから送信できる仕組みです。お問い合わせの際には、実際の確認画面もご覧いただけます。

詳しい機能や設定画面は、GRM CF Confirmの製品ページでご紹介しています。サイトへの導入やフォーム制作についても、お気軽にご相談ください。

Start a Project

つくりたいサイトのこと、聞かせてください。
必要な仕組みを、モジュールでかたちにします。

Tell us about the site you want to build.
We turn your ideas into modules that just work.

Get in Touch