How to Build a Multi-Step Form in Contact Form 7

Inquiry and application forms with many fields tend to see more drop-off the more you cram onto a single screen. By turning a Contact Form 7 (CF7) form into a multi-step form that splits input across multiple steps, you can reduce the burden per screen and improve completion rates.

This article explains a no-code approach using the settings screen, as well as a custom implementation approach.

Why splitting a form into steps improves completion rates

A long form with 20 fields all crammed onto the first screen makes visitors think “this is a hassle” and leave. By breaking it into steps such as “basic info → details → confirmation,” the number of fields per screen decreases, lowering the psychological barrier. Showing a progress bar with something like “2 steps left” can also reduce mid-form abandonment. The effect is especially large for forms with many fields, such as B2B applications and quote requests.

Method 1: Complete it entirely from the settings screen (no code, recommended)

You can build a multi-step form using only settings in the WordPress admin screen, without writing any functions.php code or JavaScript. With Frontierline Forms, you can complete this in the following steps.

Steps

1. Assign fields to steps: Group the form fields into sections such as “basic info → details → confirmation.”
2. Configure breaks and buttons: Specify the step breaks in the settings screen, and enable the Next/Back buttons and progress indicator.
3. Add a confirmation screen: Add a confirmation step that lists the entered values before submission (the completion screen also supports GA4 tracking).
4. Send a test submission: Confirm that moving forward and back through each step, validation, confirmation, and submission all work correctly.

Validation between steps (preventing the user from proceeding if a required field is empty) can also be enabled in the settings. Since no code is involved, editing the form won’t break the step structure.

Method 2: Build it yourself with JavaScript (advanced)

If you build it without a plugin, you divide each step into a <div>, use JavaScript to toggle visibility, and write your own Next/Back buttons and validation. You can also combine this with CF7’s tag generation (such as [group]).

However, there are a few points where this tends to trip people up:

• Step-by-step validation is a hassle: Implementing “validate only the required fields on the current step, then proceed” alongside CF7’s own validation is a heavy lift.
• Syncing values to the confirmation screen: You need to write your own logic to reflect entered values on the confirmation step and preserve them if the user goes back to make edits.
• Maintenance becomes tied to the theme: The JS and CSS end up theme-dependent, which breaks when the theme changes or is handed off to someone else. The code also branches per form, making it hard for anyone but the original author to maintain.

Building it yourself is feasible for a single form, but if you plan to reuse it across multiple projects, Method 1—completing everything through settings—is the more practical choice.

Differences between the Lite and Pro versions

A simple application is well covered by the free 3-step version. The Pro version becomes necessary for quote requests with many fields, or for complex forms that show different steps depending on the entered values.

Summary

Since standard CF7 has no multi-step functionality, you have two options: build it yourself with JavaScript, or configure it with a compatible plugin. Step-by-step validation and syncing values to the confirmation screen are heavy to implement yourself, and if you plan to reuse the form across multiple projects, the settings-only approach is faster. You can start by trying the free 3-step version.

If you want to implement not just multi-step forms, but also confirmation/completion screens, Slack/Chatwork/spreadsheet notifications, database logging of submissions, and CSV export—all through settings alone—consider adopting Frontierline Forms.