Tech
How to Add a Confirmation Screen to Contact Form 7 | No-Code Implementation
Contact Form 7 (CF7) has no built-in confirmation screen. Here's how to build an input → confirm → submit → complete flow that prevents misdirected submissions and drop-offs, covering both a custom JavaScript approach and a plugin, including a free, no-code option.
Contact Form 7 (CF7) is the de facto standard for WordPress forms, but it has no built-in screen for reviewing input before submission. Click the submit button, and the submission goes through immediately, with no confirmation step in between.
Without a confirmation screen on inquiry or application forms, users are more likely to make mistakes or submit incorrectly, leading to incomplete inquiries such as wrong contact details or messages that get cut off midway. This is especially costly for B2B quote requests and reservation forms.
This article explains two ways to add a confirmation screen to CF7: building one yourself with JavaScript, and implementing one with a plugin.
Why Doesn’t Contact Form 7 Have a Confirmation Screen?
CF7 is designed around simplicity, with a single-step “input → submit” philosophy at its core. A two-step “input → confirm → submit” flow isn’t included as a standard feature.
The once-popular confirmation screen add-on (Contact Form 7 add confirm) hasn’t been updated in roughly eight years, and it frequently fails to work correctly with the latest versions of CF7 and WordPress. That leaves two options: build it yourself, or use a compatible plugin. If you were using add confirm and need migration steps, see 3 Alternatives to Contact Form 7 add confirm Now That It’s Discontinued.
Method 1: Building a Simple Confirmation Screen with JavaScript
Ease of implementation ★☆☆
At a minimum, you can use JavaScript to simulate showing entered values in a confirmation area before submission. Place a confirmation button and a display area in the form, and have the button press populate the entered values.
[text* your-name placeholder "Your Name"]
[email* your-email placeholder "Email Address"]
[textarea your-message placeholder "Your Message"]
<div class="cf7-confirm-area" style="display:none;"></div>
<button type="button" class="cf7-confirm-btn">Review My Entries</button>
[submit class="cf7-submit-hidden" "Submit"]
In your theme’s functions.php or a dedicated JS file, write the logic that displays entered values in the confirmation area when the confirmation button is pressed.
That said, this approach has limits.
- Validation ends up managed in two places alongside CF7 itself, which is easy to break
- Formatting complex fields like radio buttons, checkboxes, and file attachments becomes tedious
- Building out the “edit” button behavior, scroll position, and mobile support can balloon into hundreds of lines
- You’ll need to maintain it yourself whenever a CF7 or WordPress update breaks it
This works fine for a simple form with just a name and email, but the maintenance cost doesn’t pay off once you have more fields or run multiple forms.
Method 2: Implementing a Confirmation Screen with a Plugin
Ease of implementation ★★★
The plugin approach lets you add a confirmation screen through configuration alone. With no code to write, you simply enable the confirmation step in the CF7 admin screen, and the input → confirm → submit → complete flow is generated for you.
Frontierline Forms is an add-on plugin that extends Contact Form 7 as-is. There’s no need to rebuild your existing CF7 forms, and the free version gives you the following:
- Adds a confirmation-screen flow of input → confirm → submit → complete
- Automatically formats and displays radio buttons, checkboxes, and file attachments
- Built-in “edit” behavior that returns users to the input screen
- Mobile support and scroll handling included
- Supports GA4 conversion tracking via redirect after completion
- Can also be extended into a multi-step form split across multiple screens (see how here)
Because it builds on your existing CF7 assets (your forms and auto-reply email settings), migration costs are close to zero. The confirmation screen, multi-step forms, and database storage of submission logs are all available free and unlimited in the free version.
Comparing the Code Approach and the Plugin Approach
| Item | Custom JavaScript | Frontierline Forms |
|---|---|---|
| Cost | Free | Free |
| Implementation time | Hours or more | Minutes |
| Formatting complex fields | Manual build-out | Automatic |
| Edit button / mobile support | Build it yourself | Built in |
| Maintenance on updates | You handle it | The plugin handles it |
| Converting to multi-step | Major rework | Switch via settings |
For a one-off, simple form, the code approach makes sense. If you need ongoing operation, multiple forms, and reliable behavior, the plugin approach is the more rational choice.
If you’re also considering spam prevention and storing submission logs, see our other article, “Solving Contact Form 7’s Spam and Submission Log Problems with a Real Implementation.”
Whether you can use Cloudflare Turnstile spam protection alongside a confirmation screen on the same form is covered in How to Use Turnstile and a Confirmation Screen Together in Contact Form 7.
WordPress Plugin
Add a confirmation screen with just a few settings.
An extension plugin that adds an "input → confirm → submit → complete" flow to Contact Form 7 without writing any code: Frontierline Forms. The confirmation screen, multi-step forms, and database storage of submission logs are free and unlimited. If you need Slack/Chatwork notifications or auto-replies, the Pro version (from $39.99/year) covers it all.
Summary
There are two ways to add a confirmation screen to Contact Form 7: building one yourself with JavaScript, or implementing one with a plugin. A simple form with just a name and email field can get by with a custom build, but if you have more fields, run multiple forms, or want to cut down on maintenance work, the plugin approach wins out on both time and risk.
With Frontierline Forms, you can add a confirmation screen for free without rebuilding your existing CF7 forms, and it also handles multi-step flows and formatting for file attachments. For questions about form improvements on your WordPress site, get help on WordPress.org.