「Plugear Review Step for Contact Form 7」は、Contact Form 7 のフォームに 「入力 → 確認 → 送信」の確認ステップを追加するプラグインです。 確認用のフォームを複製したり、確認ページを別に作ったりする必要はありません。 WordPress.org で無料配布しており、購入手続きもライセンス認証もありません。
このページは バージョン 1.0.0 をもとに書いています。
概要
Contact Form 7 は送信ボタンを押した瞬間にメールを送ります。入力内容を見直す機会が無いため、 打ち間違いのまま送られたり、同じ内容が二重に送られたりします。このプラグインは、その手前に 確認ステップを挟みます。訪問者はボタンを押すと入力した値を確認でき、そこで初めて送信されます。
確認表示は別のパネルを作るのではなく、入力欄があったその場所を入力値に 差し替えます。ラベル・表組み・入れ子の HTML はそのまま残るので、表組みで作ったフォームは 表組みのまま、2 カラムのレイアウトは 2 カラムのまま確認できます。
できること
- フォームごとに確認ステップを ON / OFF する（既存のフォーム 1 つで完結。ショートコードの変更は不要）
- 「確認」「修正」「送信」のボタン文言をフォームごとに決める
- 未入力の項目に「未入力」にあたる文言を出すかどうかを選ぶ
- 確認へ進むとき・入力へ戻るときに、フォームの先頭までスクロールするかどうかを選ぶ
- 確認ボタンを押した時点で、全角の英数字・記号・スペースを半角に直す
- 入力エラーを Contact Form 7 と同じ見た目・同じ読み上げで表示する
確認ステップではメールを送らず、スパム判定も走りません。サーバー側で Contact Form 7 自身の検証ルールを実行して結果を返すだけです。 訪問者が送信を押したときに、Contact Form 7 の通常の送信処理が1 回だけ走ります。
動作環境
| 項目 | 要件 |
|---|---|
| WordPress | 6.0 以上 |
| PHP | 7.4 以上 |
| Contact Form 7 | 5.7 以上（必須） |
| 動作確認済み | WordPress 7.0 |
| ライセンス | GPLv2 or later |
Contact Form 7 が未導入・無効、またはバージョンが 5.7 未満のときは、このプラグインは 機能を一切登録せず、管理画面に案内を出すだけになります。フロントのフォームは 素の Contact Form 7 として通常どおり動きます。
マルチサイトは動作検証の対象外です。有効化はブロックしませんが、 検証していない環境であることをご承知おきください。
表示言語について
このプラグインは翻訳ファイルを同梱していません。WordPress.org のプラグインの翻訳は translate.wordpress.org から配信される仕組みで、日本語の翻訳はそちらに登録されてから 届きます。それまでは日本語サイトでも設定画面の項目名は英語で表示されます。
そのためこのページでは、設定項目名を英語の原文で書き、意味を日本語で添えています。
訪問者が目にするボタン文言（「確認する」「修正する」「送信する」など）は、 翻訳とは関係なくフォームごとの設定で自由に決められます。 翻訳が届く前でも、フロントは最初から日本語にできます。
インストールと有効化
- 先に Contact Form 7（5.7 以上）をインストールして有効化します。
- WordPress 管理画面の プラグイン → 新規追加 で 「Plugear Review Step for Contact Form 7」を検索してインストールします。
- プラグイン 画面で有効化します。
WordPress 6.5 以降では、このプラグインが Contact Form 7 を必須の依存として宣言しているため、 Contact Form 7 が有効でないと有効化できません。また、このプラグインが有効な間は 管理画面から Contact Form 7 を無効化・削除できなくなります。
WordPress 6.0〜6.4 ではこの仕組みが効かないため、依存が満たされていないことを 管理画面の通知でお知らせします。
Contact Form 7 のバージョンが 5.6 以下の場合、WordPress 6.5 以降でも有効化そのものは通ります。 そのときはこのプラグインが自分で判定して機能を停止し、 必要なバージョンと現在のバージョンを管理画面の通知に出します。
クイックスタート
- 管理画面の お問い合わせ → コンタクトフォーム で、確認ステップを付けたいフォームを開きます。
- Confirm Screen タブを開き、 Show a confirmation step before sending（送信の前に確認ステップを表示する）に チェックを入れます。
- 必要ならボタン文言を日本語にして、保存 します。
これだけです。フォームの中身（フォームタグ）を書き換える必要はありません。 そのフォームを設置しているページで、確認ステップが動き始めます。
「Confirm Screen」タブの設定
設定はフォームごとです。フォームを複製すると設定も一緒に複製されます。 このプラグインは管理メニューを追加しません（プラグイン全体の設定画面はありません）。
| 項目 | 意味 | 初期値 |
|---|---|---|
Confirm screenShow a confirmation step before sending |
このフォームで確認ステップを使う | OFF |
| Confirm button | 入力画面の送信ボタンに表示する文言（＝確認へ進むボタン） | 空欄（Confirm） |
| Edit button | 確認表示から入力へ戻るボタンの文言 | 空欄（Edit） |
| Send button | 確認表示から送信するボタンの文言 | 空欄（Send） |
Empty fieldsShow a placeholder for fields left empty |
未入力の項目に文言を出す | OFF |
| Empty field text | 未入力の項目に出す文言 | 空欄（Not entered） |
ScrollingScroll to the top of the form when the confirmation appears |
確認表示に切り替わったときフォームの先頭までスクロールする | ON |
ScrollingScroll to the top of the form when returning to the input screen |
入力画面へ戻るときフォームの先頭までスクロールする | ON |
ボタン文言を空欄のままにすると、そのときの表示言語に合わせた既定文言
（Confirm / Edit / Send / Not entered）が使われます。
日本語にしたい場合は「確認する」「修正する」「送信する」のように直接入力してください。
文言は 100 文字までです。
確認表示では入力欄があった場所をそのまま値に差し替えるため、 未入力の項目の行を消すことはできません（項目名はテーマやフォームの HTML 側にあるためです）。 Empty fields は「未入力と分かる文字を出すか、何も出さないか」の切り替えになります。
訪問者から見た流れ
確認ステップを ON にしたフォームでは、送信ボタンの文言が Confirm button で
設定した文言（既定は Confirm）に変わります。訪問者がそれを押すと、
サーバー側で検証が行われ、問題が無ければ確認表示に切り替わります。
確認表示の作られ方
- 置き換わるのは 入力欄そのものだけです。ラベル・表組み・fieldset・ テーマが書いた入れ子の HTML には手を触れません
- 入力欄は削除ではなく非表示にするだけなので、送信時の値が欠けることはありません
- 「修正」「送信」の 2 つのボタンは、元の送信ボタンを複製して作られます。 テーマが送信ボタンに当てているスタイルをそのまま受け継ぎます
- 元の送信ボタンは隠して残します（テーマの HTML 構造を壊さないため）
- 「修正」を押すと、確認表示のために加えた変更をすべて元に戻し、エラー表示も消えます
項目タイプ別の表示
| 項目 | 確認表示 |
|---|---|
| テキスト・メール・電話・URL・テキストエリアなど | 入力した文字列。改行はそのまま保たれます |
| チェックボックス・ラジオボタン | 選ばれた選択肢のラベル文字。選ばれていない選択肢は行ごと消えます |
承諾（[acceptance]） | チェックが入っていれば承諾文がそのまま残ります |
ドロップダウン（[select]） | 選ばれている選択肢の表示テキスト。値が空の選択肢は無視されます |
ファイル（[file]） | 選んだファイル名。ファイル自体は送信時に通常どおりアップロードされます |
| パスワード | 文字数ぶんの •（値は表示されません） |
| hidden・送信ボタン | 確認表示には出しません |
未入力の項目
Empty fields が OFF のとき、未入力の項目には何も表示されません（項目名だけが残ります）。
ON にすると Empty field text の文言（既定 Not entered）が入ります。
入力エラーが出たとき
確認ボタンを押した時点でサーバー側の検証が行われ、問題があれば確認表示には進まず、 その場でエラーが表示されます。
- エラー文は Contact Form 7 と同じ位置・同じクラス・同じ属性で出ます。 テーマがフォームのエラー用に持っている CSS はそのまま効きます
- まとめのメッセージは、そのフォームの Contact Form 7 側の設定 （「入力内容に問題があります。確認して再度お試しください。」にあたるメッセージ）を使います
- 最初のエラー項目にフォーカスとスクロールが移動します
通信に失敗した場合や、確認そのものが行えなかった場合は、 送信の文脈の文言（「送信に失敗しました」など）は出しません。 「確認画面を表示できませんでした。しばらくしてからもう一度お試しください。」にあたる 専用の文言が表示されます。まだ何も送信していないためです。
承諾（[acceptance]）と Really Simple CAPTCHA（[captchar]）は、
確認ステップでは検証しません。承諾は「送信する」という意思表示なので確認の段階では見ない、
CAPTCHA は確認の段階で検証すると本送信が必ず失敗する、というのが理由です。
どちらも送信時には通常どおり検証されます。
全角の英数字を半角に直す
スマートフォンのかな入力で数字を打つと全角（０９０…）になります。
そのままでは Contact Form 7 の検証で弾かれ、訪問者は理由が分からないまま打ち直すことになります。
このプラグインは 確認ボタンを押した瞬間だけ、対象の項目の全角の英字・数字・記号と 全角スペースを半角に直します。入力中には一切触らないので、日本語入力の変換を壊しません。 かな・漢字は変換しません。
入力欄そのものを書き換えるため、確認表示・送信される値・届くメールがすべて同じ値になります。
対象になる項目
既定では、フォームタグの型が tel / number / email / url
のものが対象です。それ以外の項目を対象にしたい場合、または既定の対象から外したい場合は、
フォームタグにオプションを書きます。
[text* your-zip hankaku] … 対象に加える
[tel your-tel hankaku:off] … 対象から外す[number] だけは直しようがありません。input[type=number] は
全角数字を受け取った時点でブラウザが値を捨ててしまうため、スクリプトから見える値が
すでに空になっているためです。全角で入力される可能性がある数値項目は
[text] に hankaku を付けて使ってください。
メールと他プラグインへの影響
確認ステップは Contact Form 7 の送信処理に一切入りません。確認の段階では
メールを送らず、スパム判定も行わず、wpcf7_* の送信系フックも発火しません。
送信に反応する他のプラグインが二重に動くことはありません。
訪問者が送信を押したときに、Contact Form 7 の通常の送信処理が 1 回だけ走ります。 届くメールは、このプラグインが無いときに届くメールと同じです。
| 気になること | 結果 |
|---|---|
| reCAPTCHA / Turnstile / Akismet | これらはスパム判定の段階で動きます。確認ステップはその段階に入らないため、 実際に送信されるときに通常どおり動きます |
| ファイル添付 | 確認表示にはファイル名が出ます。ファイルは送信時に通常どおりアップロードされます |
| フォームの複製 | 確認画面の設定も一緒に複製されます |
| JavaScript が使えない環境 | 確認ステップは挟まれず、素の Contact Form 7 として送信されます。メールは届きます |
| ページキャッシュ | キャッシュされたページの読み込み時に Contact Form 7 がフォームを初期化した場合、 確認表示は入力表示に戻ります |
見た目を整える
確認表示の大部分はもともとテーマが持っているフォームの HTML なので、 そのままテーマのスタイルが効きます。このプラグインが新しく作る要素だけ、 次のクラスでスタイルを当てられます。
| クラス | 付く場所 |
|---|---|
plg_prscf7_confirming | 確認表示中の .wpcf7 ラッパー |
plg_prscf7_value | 入力値を表示する要素 |
plg_prscf7_actions | 「修正」「送信」を包む要素 |
plg_prscf7_back | 「修正」ボタン |
plg_prscf7_send | 「送信」ボタン |
同梱している CSS は次の 3 つだけです。色・フォント・余白はテーマの領分として触りません。
- 「修正」「送信」の 2 つのボタンの間隔
- 「修正」ボタンを、背景を落として枠線だけの副ボタンに見せる（色は指定せず、テーマの文字色を使います）
- 確認表示中に Contact Form 7 のスピナーを隠す
「修正」ボタンの見た目を上書きするときは、
.wpcf7 .plg_prscf7_actions .plg_prscf7_back と同等以上の詳細度で書くか、
!important を使ってください。同梱 CSS を丸ごと読み込まないようにすることもできます
（後述の plg_prscf7_load_css）。
アクセシビリティ
- 確認表示に切り替わったこと・入力に戻ったことを、Contact Form 7 の読み上げ用領域
（
role="status"）に書き込んで支援技術に伝えます。目には見えません - 同時にフォームの先頭へフォーカスを移します（押したボタンが消えてフォーカスが 文書の先頭に飛ぶのを防ぐため）。Tab の順序には割り込みません
- エラーは Contact Form 7 と同じ二本立て（目に見える注記＋読み上げ用のリスト、
入力欄からの
aria-describedby）で出します - 「動きを減らす」設定（
prefers-reduced-motion）のときは、 スクロールをアニメーションさせず一度に移動します
開発者向け
フィルター
| フック | 既定 | 用途 |
|---|---|---|
plg_prscf7_scroll_offset |
10vh |
確認表示へスクロールしたとき、フォームの上に残す余白 |
plg_prscf7_load_css |
true |
false を返すと同梱 CSS を読み込まない |
plg_prscf7_normalize_fields |
型とオプションから決まる項目名の配列 | 半角化する項目名を差し替える |
plg_prscf7_safe_validation |
false |
true を返すと、確認ステップで他プラグインの
wpcf7_validate_* を実行せず、Contact Form 7 標準の検証だけを行う |
// 固定ヘッダーが 80px あるテーマの場合
add_filter( 'plg_prscf7_scroll_offset', function () {
return '80px';
} );
// 同梱 CSS を読み込まない
add_filter( 'plg_prscf7_load_css', '__return_false' );plg_prscf7_scroll_offset が受け付けるのは、数値＋
px / % / rem / em / vh / vw
の形式か、余白なしを意味する空文字・0 です。それ以外の値
（calc() など）を返した場合は、エラーにならず既定の 10vh が使われます。
JavaScript
AJAX でフォームを後から挿入した場合は、Contact Form 7 の wpcf7.init() と同じ流儀で
明示的に初期化します。
plgPrscf7.init( document.querySelector( '#my-container' ) );フォーム要素で次のイベントが発火します（いずれも bubbles します）。
| イベント | タイミング |
|---|---|
plg_prscf7_confirm | 確認表示に切り替えた直後 |
plg_prscf7_back | 入力表示に戻した直後 |
plg_prscf7_invalid | 項目エラーで確認へ進めなかったとき（detail に応答） |
plg_prscf7_error | 通信失敗や 4xx / 5xx のとき（detail に結果） |
REST エンドポイント
POST /wp-json/plugear-review-step-for-contact-form-7/v1/contact-forms/<id>/confirm確認ボタンを押したときにフロントが呼ぶエンドポイントです。 副作用をまったく持ちません（データベースへの書き込み・メール送信・外部への通信・ アップロードファイルの移動を一切行いません）。訪問者はログインしていないため、 Contact Form 7 のフィードバックと同じく公開エンドポイントになっています。
- リクエストは
multipart/form-dataのみ（それ以外は 415） - フォームが存在しない、または確認画面が OFF のときは 404
- 返すのは
validと項目単位のinvalid_fieldsだけで、 利用者向けの文言は含みません
アンインストール時のデータ
プラグインを削除しても、既定では何も削除されません。 フォームも確認画面の設定もそのまま残るので、入れ直せば元の状態から続けられます。
無効化したときも同様で、何も削除されません。
データを削除するためのオプションはプラグインの内部に用意されていますが、 バージョン 1.0.0 にはそれを切り替える設定画面がありません。 この版で利用者が体験する挙動は「何も削除しない」だけです。
困ったときは
確認ステップが動かず、そのまま送信されてしまう
対象のフォームで Confirm Screen タブの Show a confirmation step before sending にチェックが入っているか、 保存できているかを確認してください。設定はフォームごとです。 また、JavaScript が動かない環境では確認ステップは挟まらず、素の Contact Form 7 として送信されます。
管理画面に「is inactive」という通知が出る
Contact Form 7 が無効になっているか、バージョンが 5.7 未満です。 通知には必要なバージョンと、インストールされているバージョンが表示されます。 Contact Form 7 を有効化するか、更新してください。
設定画面が見つからない
このプラグインは独自の管理メニューを追加しません。設定は お問い合わせ → コンタクトフォーム で各フォームを開いた先の Confirm Screen タブにあります。
設定項目やボタンが英語で表示される
このプラグインは翻訳を同梱していません（配信は translate.wordpress.org 経由です）。 訪問者に見えるボタン文言は Confirm button / Edit button / Send button に直接入力すれば日本語にできます。
「修正」ボタンの見た目がテーマと合わない
2 つのボタンはどちらも元の送信ボタンの複製なので、放っておくと同じ見た目のボタンが 2 つ並びます。
同梱 CSS は「修正」側の背景を落として枠線だけにしていますが、テーマによっては合わないことがあります。
.wpcf7 .plg_prscf7_actions .plg_prscf7_back 以上の詳細度で上書きするか、
plg_prscf7_load_css フィルターで同梱 CSS を切ってください。
全角で入力された数字が半角になっていない
対象は既定で tel / number / email / url の項目です。
それ以外の項目はフォームタグに hankaku を書いてください。
[number] はブラウザが全角数字を捨てるため、半角化できません。
それでも解決しない場合
不具合の報告や質問は WordPress.org のサポートフォーラムをご利用ください。 このページ上部のリンクからアクセスできます。