Modules /04

GRM CF Confirm

Contact Form 7に「入力→確認→送信」の確認画面を追加するプラグイン。フォームを作り直さずに、送信前に入力内容を確認できるようになります。

Version
1.0.4
Slug
grm-cf-confirm

Overview

送る前に、
もう一度確かめられるフォームへ。

GRM CF Confirmは、Contact Form 7のフォームに「入力 → 確認 → 送信」の確認画面を追加するプラグインです。確認ボタンを押すと、入力した内容がその場で一覧表示され、内容を見直してから送信できます。

確認画面はページを移動せずに表示されるので、フォームを作り直したり、確認用のページを別に用意したりする必要はありません。フォームごとにON/OFFでき、送信後はサンクスページへ自動で移動します。

Features

  • 確認画面の追加確認ボタンを押すと、入力内容を見出しと値の一覧で表示します。「戻る」で入力画面に戻って修正でき、「送信」でそのまま送信されます。
  • フォームごとのON/OFFContact Form 7で作ったフォームの一覧から、確認画面を使うフォームだけをスイッチで選べます。
  • サンクスページへの移動送信が完了したら、フォームごとに設定したサンクスページへ自動で移動します。
  • 確認前の入力チェック必須項目の入力漏れ、メールアドレスの形式、確認用メールアドレスの一致を、確認画面を開く前にチェックします。
  • 条件によって表示する項目「法人を選んだときだけ会社名を表示する」のように、ほかの項目の選択内容によって表示する項目を切り替えられます。複数の条件を組み合わせることもできます。
  • コードジェネレーター条件表示に必要なContact Form 7のコードを、項目名と条件を入れるだけで作れます。

Screens

確認画面の表示例
確認画面。入力した内容が一覧で表示され、「戻る」で修正、「送信」で送信できます。
必須チェックのエラー表示
必須チェック。未入力のまま確認ボタンを押すと、確認画面は開かずに、足りない項目の一覧をフォームの上に表示し、該当する入力欄を赤枠で示します。
フォームごとの設定
Forms。フォームごとに確認画面のON/OFFと、送信後に移動するサンクスページのURLを設定します。
条件表示のコードジェネレーター
Code Generator。表示条件の項目名と値、項目の種類などを入れて「コード生成」を押すと、フォームに貼り付けるコードができます。

How to use

  1. フォームを用意Contact Form 7でいつもどおりフォームを作成し、ページに設置します。
  2. 確認画面をONにする「GRM CF Confirm」→ Formsで、確認画面を使うフォームのスイッチをONにします。
  3. サンクスページを設定同じ画面で、送信後に移動するサンクスページのURLを入力して保存します。
  4. 必要に応じて条件表示を追加Code Generatorで条件表示用のコードを作り、Contact Form 7のフォーム本文に貼り付けます。

Spec

対応フォームContact Form 7
設定の単位フォームごとに確認画面のON/OFF・サンクスページURL
入力チェック必須項目・メールアドレスの形式・確認用メールアドレスの一致(項目名の末尾に _confirm)
条件表示data-show-if="項目名:値"
&& で複数条件(AND)
確認画面に出さない項目クラス cf-confirm-hide を付けた項目

Start a Project

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

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

Get in Touch