Plugear Review Step for Contact Form 7 Free edition

Overview

Contact Form 7 sends a message the moment the visitor presses submit. There is no chance to look at what was typed, so typos go out as they are and the same message is sometimes sent twice. This plugin puts a confirmation step in between: the visitor presses the button, sees the values they entered, and only then sends.

The confirmation is not a separate panel. Each input is replaced in place by the value that was typed, so labels, table rows, fieldsets and every bit of markup you wrote stay exactly where they were. A form laid out in a table stays a table. A two-column layout stays two columns.

What it does

• Turns the confirmation step on or off per form — one form, one shortcode, nothing to add to the form template
• Lets you set the wording of the Confirm, Edit and Send buttons per form
• Optionally shows a placeholder for fields the visitor left empty
• Optionally scrolls to the top of the form when entering and when leaving the confirmation
• Converts full-width letters, digits and spaces to half-width when the confirm button is pressed
• Shows validation errors with Contact Form 7's own markup and accessibility wiring

Requirements

When Contact Form 7 is missing, inactive, or older than 5.7, this plugin registers nothing at all and only shows a notice in wp-admin. Your forms keep working as plain Contact Form 7.

Interface language

This plugin ships no translation files. Translations for WordPress.org plugins are delivered by translate.wordpress.org, so the plugin's own strings appear in English until a translation for your locale has been contributed and approved there.

Installing the plugin

1. Install and activate Contact Form 7 (5.7 or later) first.
2. In wp-admin, go to Plugins → Add New and search for “Plugear Review Step for Contact Form 7”, then install it.
3. Activate it on the Plugins screen.

Quick start

1. Open Contact → Contact Forms and edit the form you want a confirmation step on.
2. Open the Confirm Screen tab and tick Show a confirmation step before sending.
3. Set the button wording if you want to, and Save.

That is all. Nothing in the form template has to change. The form on your site now shows a confirmation step.

The Confirm Screen tab

Every setting is per form, and it travels with the form when you duplicate it. The plugin adds no admin menu of its own — there is no site-wide settings screen.

What the visitor sees

On a form with the confirmation step turned on, the submit button carries the wording from Confirm button (Confirm by default). When the visitor presses it, the values are validated on the server and, if everything is in order, the form switches to the confirmation.

How the confirmation is built

• Only the input controls themselves are replaced. Labels, table rows, fieldsets and any nesting your theme adds are left untouched
• Inputs are hidden, not removed, so no value is lost from the final submission
• The Edit and Send buttons are cloned from your existing submit button, so they inherit whatever your theme gives it
• The original submit button is hidden rather than removed, so your theme's markup stays intact
• Pressing Edit undoes every change made for the confirmation, including any error display

How each field type appears

Fields left empty

With Empty fields off, an empty field shows nothing — only its label remains. With it on, the wording from Empty field text (Not entered by default) is shown instead.

When something is invalid

Validation happens on the server when the confirm button is pressed. If something is invalid the form does not move on; the errors appear where they are.

• Messages appear in the same place, with the same markup and the same attributes Contact Form 7 uses itself, so your theme's styling for form errors keeps working
• The summary message is the one configured on the form in Contact Form 7 (its validation error message)
• Focus and scrolling move to the first field with an error

Converting full-width characters

On a Japanese phone keyboard, typing a number produces full-width digits (０９０…). A phone number entered that way is rejected by Contact Form 7's own validation, and the visitor is sent back to retype it without being told why.

This plugin converts full-width letters, digits, punctuation and spaces to half-width at the moment the confirm button is pressed — never while the visitor is typing, which would break Japanese input mid-conversion. Kana and kanji are left alone.

The input itself is rewritten, so the confirmation, the submitted value and the mail you receive all carry the same value.

Which fields are converted

By default, form tags whose type is tel, number, email or url. Any other field can opt in — and any default one can opt out — with an option on the form tag.

[text* your-zip hankaku]      … opt in
[tel your-tel hankaku:off]    … opt out

The mail and other plugins

The confirmation step never enters Contact Form 7's submission flow. At that stage no mail is sent, no spam check is charged, and none of the wpcf7_* submission hooks fire. Other plugins that act on a submission cannot be triggered twice.

When the visitor presses Send, Contact Form 7 runs its normal submission exactly once. The mail you receive is the same mail you would have received without this plugin.

Styling the confirmation

Most of the confirmation is your own markup, already styled by your theme. For the parts this plugin adds, style these classes.

Only three rules ship as CSS. Colour, fonts and spacing are left to your theme.

• The gap between the Edit and Send buttons
• A secondary look for the Edit button — background removed, a border drawn in the current text colour, so no palette is imposed on your theme
• Hiding Contact Form 7's spinner while the confirmation is shown

Accessibility

• Entering and leaving the confirmation is announced through Contact Form 7's own role="status" region. It is not shown visually — for sighted visitors the change of display is the signal
• Focus moves to the top of the form at the same time, so it does not fall to the document when the pressed button is hidden. It does not join the Tab order
• Errors use the same two-part wiring as Contact Form 7: a visible tip plus a screen-reader list item referenced from the input with aria-describedby
• When prefers-reduced-motion is set, scrolling jumps instead of animating

For developers

Filters

// A theme with an 80px sticky header
add_filter( 'plg_prscf7_scroll_offset', function () {
	return '80px';
} );

// Do not load the bundled stylesheet
add_filter( 'plg_prscf7_load_css', '__return_false' );

JavaScript

Forms inserted after page load are initialised explicitly, the same contract Contact Form 7 uses with wpcf7.init().

plgPrscf7.init( document.querySelector( '#my-container' ) );

These events are dispatched on the form element, and they bubble.

REST endpoint

POST /wp-json/plugear-review-step-for-contact-form-7/v1/contact-forms/<id>/confirm

This is what the front end calls when the confirm button is pressed. It has no side effects at all: it writes nothing to the database, sends no mail, makes no outbound request and moves no uploaded file. Visitors are not logged in, so — like Contact Form 7's own feedback endpoint — it is public.

• The request must be multipart/form-data; anything else is a 415
• A form that does not exist, and a form with the confirmation turned off, both return 404
• The response carries only valid and the per-field invalid_fields — never a message meant for the visitor

Data and uninstalling

Nothing is deleted by default when you delete the plugin. Your forms and their confirmation settings are left alone, so reinstalling picks up where you left off.

Deactivating changes nothing either.

Troubleshooting

The form submits without showing a confirmation

Check that Show a confirmation step before sending is ticked — and saved — on that particular form, in its Confirm Screen tab; the setting is per form. Note also that where JavaScript is unavailable the confirmation step is skipped and the form behaves like plain Contact Form 7.

wp-admin says the plugin “is inactive”

Contact Form 7 is either inactive or older than 5.7. The notice names both the version required and the version installed. Activate or update Contact Form 7.

I cannot find the settings screen

There isn't one. This plugin adds no admin menu of its own — everything lives in the Confirm Screen tab of each form under Contact → Contact Forms.

The settings are in English on my localized site

The plugin ships no translations; they are delivered by translate.wordpress.org once contributed and approved for your locale. The wording your visitors see is unaffected — type it into Confirm button, Edit button and Send button in any language you like.

The Edit button does not fit my theme

Both buttons are clones of your submit button, so without help they would look like two identical primary buttons. The bundled CSS drops the background of the Edit button and draws a border instead, which does not suit every theme. Override it with a selector at least as specific as .wpcf7 .plg_prscf7_actions .plg_prscf7_back, or turn the stylesheet off with the plg_prscf7_load_css filter.

Full-width digits are not being converted

By default only tel, number, email and url fields are converted; add hankaku to the form tag for anything else. [number] cannot be converted, because the browser discards full-width digits before the script runs.

Still stuck

Please use the WordPress.org support forum for questions and bug reports. There is a link at the top of this page.