How to Create a Multi-Step Form in WordPress

If your form asks for more than five pieces of information, the layout you choose matters more than the questions themselves.

A single-page form that displays 12 fields at once is not just hard to fill out. It signals to visitors what they are about to spend time on before they have committed to spending it. Most of them decide not to.

Multi-step forms break that same question set into separate screens. The visitor completes three or four fields, clicks Next, completes another three or four, and arrives at the submit button without ever seeing the full length of the form at once. Completion rates for forms with more than five fields consistently improve when the form is broken into steps rather than presented as a single long page.

This guide walks through building a multi-step form in SureForms from the first field to the published result, and covers the advanced configurations that make these forms genuinely powerful: conditional steps that branch based on answers, save-and-resume so visitors can pause and return, and the built-in analytics that show you exactly where people are dropping off.

What Is a Multi-Step Form and When Should You Use One? 

A multi-step form presents the same set of fields in separate screens rather than all at once. A progress bar at the top shows the visitor how many steps the form has and how far along they are. Fields on the current step are validated before the visitor can advance to the next.

The completion rate improvement comes from a psychological principle: once someone has invested effort in Step 1, they are more likely to continue through Step 2 and finish. Starting a form feels like a small commitment. Abandoning it midway feels like giving up on something already started. A single-page form asks for the full commitment upfront. A multi-step form earns commitment incrementally.

When to use a multi-step form

Multi-step forms are the right choice when:

• Your form has 6 or more fields
• Some fields are sensitive (phone number, company revenue, health information) and benefit from being shown later, after the visitor has already committed by filling in earlier fields
• The form serves as a qualification process, where different answers should lead to different subsequent questions
• You are asking for detailed project information, booking details, or a job application

When NOT to use a multi-step form

Multi-step forms add navigation and loading complexity that can hurt rather than help in some situations:

• Simple 3 to 4 field contact forms. Adding steps to a name/email/message form makes it more work, not less.
• Forms where visitors arrive with clear intent to submit quickly. A quick newsletter signup does not need three steps.
• When a conversational form might serve better. For highly personal or qualifying questions, presenting one question at a time in a chat-style interface (available in SureForms as Conversational Forms) often produces better completion than either a single-page or multi-step layout.

What You Need Before You Start

Multi-step forms require SureForms Pro. The Page Break block that creates steps between form fields is a Pro feature.

SureForms Pro starts at $59 per year for a single site with every feature included multi-step forms, conditional logic, save-and-resume, form analytics, CRM integrations, and everything else. No tier restrictions, no add-ons required.

See all SureForms Pro plans and pricing

If you have SureForms Pro active on your site, you are ready. You do not need any additional plugins, page builders, or configuration beyond what is described below.

Step-by-Step: Building a Multi-Step Form in SureForms

For this walkthrough, we are building a client intake form for a service business: three steps covering contact information, project details, and budget and timeline. The same process applies to any multi-step form regardless of purpose.

Step 1: Create a New Form

Go to SureForms > Add New in your WordPress dashboard.

You have two starting points:

Option A: AI Form Builder. Click Create Form with AI, describe the form you need in plain language, and SureForms generates the field structure. For example: “A three-step client intake form for a web design agency. Step 1: contact info. Step 2: project type, industry, and description. Step 3: budget range and preferred start date.” The AI creates the fields and suggests a logical layout. Review and adjust before proceeding.

Option B: Build manually. Select a blank form and add fields using the Gutenberg block editor.

Give your form a name and save it before adding fields.

Step 2: Add Your Step 1 Fields

Front-loading your form with the least sensitive, lowest-friction fields dramatically reduces abandonment on the first screen. Step 1 should collect information the visitor expects to share and is comfortable sharing immediately.

For a client intake form, Step 1 might include:

• First Name
• Last Name
• Email Address
• Phone Number (optional: make this one optional rather than required, as required phone fields increase abandonment)

Add each field using the block editor. Click the + inserter, search for SureForms field types, and select the appropriate one for each piece of information.

Step 3: Add a Page Break Block

A Page Break block is what actually creates the division between steps. Without a Page Break, everything is on one page regardless of how many fields you have.

After your last Step 1 field:

1. Click the + block inserter
2. Type “Page Break” in the search field
3. Select the SureForms Page Break block
4. It inserts into your form,  everything added after this block will appear on Step 2

Step 4: Configure the Progress Bar and Step Labels

With the Page Break block selected, open the form’s General settings panel (click the form’s outer block, then look for the Page Break dropdown in the settings sidebar).

Progress Indicator options:

• Numbered steps: displays “Step 1 of 3” style indicator, clearest for forms with distinct named stages
• Progress bar: shows a percentage fill bar, better for long forms where you want to show continuous progress
• None: removes the indicator entirely (not recommended, visitors who cannot see how much is left are more likely to abandon)

Step labels: Enter a label for each step under First Page Label, Second Page Label, etc. Labels like “About You,” “Your Project,” and “Timeline & Budget” help visitors understand what each step covers before they start it. This reduces anxiety about what they are about to be asked.

Next and Back button text: You can customize the button labels on each step. “Next: Your Project Details” is more descriptive than just “Next.”

Step 5: Add Your Step 2 Fields

After the Page Break block, add the fields for Step 2. These can include more specific information that the visitor is now more willing to provide because they have already committed by completing Step 1.

For the client intake example:

• Project Type (dropdown: New Website / Redesign / E-commerce / Application)
• Industry (dropdown or text)
• Project Description (textarea)

Step 6: Add the Second Page Break (Step 3)

Insert another Page Break block after your Step 2 fields. Label this step appropriately (“Budget & Timeline” or similar).

After this Page Break, add your Step 3 fields:

• Budget Range (dropdown: Under $5,000 / $5,000 to $15,000 / $15,000 to $50,000 / Over $50,000)
• Preferred Start Date (date field)
• How did you hear about us? (dropdown)

Step 7: Configure the Submit Button

The submit button appears only on the final step. Configure its label in Form Settings. “Submit My Project Brief” is more specific and compelling than “Submit.” The confirmation message after submission should reinforce what happens next: “Thank you, we will review your brief and be in touch within two business days.”

Step 8: Configure Required Fields

Decide which fields must be completed before the visitor can advance to the next step. Toggle the Required setting on each field that is truly necessary. Fields that are nice-to-have but not essential should be optional, required fields that visitors are not ready to fill in are one of the top causes of multi-step form abandonment at the step level.

Step 9: Save and Embed

Click Update to save the form. Embed it on any WordPress page using the SureForms Gutenberg block (search “SureForms” in the block inserter on any page or post), or use the shortcode, or publish it as an Instant Form with its own shareable URL via Form Settings > Instant Form.

Preview the form on the front end before publishing. Verify that the progress bar appears, each step label displays correctly, the Next and Back buttons work, and required field validation fires between steps.

Combining Multi-Step Forms with Conditional Logic

Multi-step forms become significantly more powerful when combined with SureForms conditional logic. Instead of every visitor seeing the same steps in the same order, you can branch the form experience based on what visitors have already told you.

What this enables

Showing different Step 3 fields based on Step 1 answers. A service intake form where “Project Type” is selected in Step 1 can show completely different Step 3 fields depending on the selection. E-commerce projects see SKU count and platform fields. Branding projects see brand guidelines and asset fields. Everyone else sees the standard project description.

Hiding irrelevant questions entirely. If the visitor selects “Individual” rather than “Business” in Step 1, hide the Company Name, Team Size, and Annual Revenue fields on subsequent steps entirely. The visitor only answers questions relevant to their situation.

Routing to different confirmation pages. Based on budget range or project type selected in Step 3, route the visitor to a booking page, a general contact confirmation, or a resources page after submission.

How to configure it

Conditional logic is configured per field. Select any field in the SureForms editor, look for Conditional Logic in the field settings panel, enable it, and build the rule:

• IF [field name] equals [value] THEN Show/Hide [this field]

For step-level branching, apply conditional logic to entire groups of fields rather than individual fields. If you want to show three fields only when a specific step 1 answer is given, apply the same conditional rule to all three fields.

Full conditional logic documentation: Create WordPress Forms With Conditional Logic

Combining Multi-Step Forms with Save and Resume

Save and Resume allows a visitor to pause a multi-step form partway through and return later to complete it from the same point.

This feature matters most for long intake forms, complex applications, and any form where the visitor may need to gather information (a company registration number, a tax ID, a project specification document) before they can complete a particular field.

How it works from the visitor’s perspective

A Save Progress button appears on the form. When the visitor clicks it, SureForms saves the form state and sends them an email with a link to resume. Clicking that link at any point later opens the form at the exact step they left, with all previously entered data intact.

How to enable Save and Resume on a multi-step form

1. Open the form in the SureForms editor
2. Go to Form Settings
3. Find the Save & Progress section
4. Enable the toggle

From that point, the Save Progress button appears on all steps of your form automatically. You can customize the button label and the email message sent to the visitor.

Documentation: Save & Progress in SureForms

Partial entry admin notifications (v2.12.3)

SureForms v2.12.3 added automatic admin notifications for partial entries. When a visitor saves their progress and pauses, SureForms sends you an email notification at that moment, not when they eventually submit, but immediately when they save.

This matters because the visitor’s interest level is highest right after they save. A follow-up email from you within minutes of a save event converts at a meaningfully higher rate than following up hours or days later after you discover the partial entry in your dashboard.

Partial entry notifications are configured in your form notification settings.

Best Practices for Multi-Step Form Design

Getting the structure right matters more than any individual feature. These principles apply across all multi-step forms regardless of purpose.

Keep each step to 3 to 4 fields

The entire advantage of multi-step forms is that each screen feels short. A step with 8 fields is no better than a single long page. If you find yourself adding many fields to a single step, split it into two steps instead.

Front-load your easiest questions

Step 1 should collect the information the visitor is most comfortable sharing: name, email, maybe a basic qualifying question. Sensitive questions, budget, company revenue, personal details, belong in later steps when the visitor has already invested time in completing Step 1.

Name your steps clearly

A visitor who sees “Step 2 of 4” knows how far they are but not what Step 2 contains. A visitor who sees “Step 2 of 4: Your Project” knows what to expect. Step labels reduce the uncertainty that drives abandonment.

Make your submit button label specific

“Submit” is generic. “Submit My Consultation Request” tells the visitor what they are actually doing. “Get My Free Quote” frames the submission as receiving something rather than sending something. Specific, benefit-oriented button labels consistently improve completion rates on the final step.

Test on an actual mobile device

Not a browser window resized to mobile dimensions , an actual phone. Multi-step forms have more interface elements (progress bar, Next/Back buttons, step labels) than single-step forms, and these elements need to render correctly and be tappable at appropriate sizes on small screens. SureForms forms are responsive by design, but always verify on a real device before publishing.

Explain why you need sensitive information

If Step 2 asks for company revenue or team size, add helper text to those fields explaining why you need it. “This helps us scope the right solution for your business” reduces friction dramatically compared to unexplained sensitive field requests.

Tracking Where People Drop Off with Form Analytics

SureForms Pro includes built-in form analytics that show you how visitors interact with your multi-step form, including exactly which step they abandon on.

How to access form analytics

Go to SureForms > All Forms, find your multi-step form, and click the analytics icon or open the form and select the Analytics view.

What you will see

• Submission count: total number of completed submissions in the selected date range
• Impressions: number of times the form was loaded
• Completion rate: percentage of people who loaded the form and submitted it
• Step-level drop-off: for multi-step forms, the analytics show how many visitors made it to each step and where the largest drop-offs occurred

How to use this data

A high drop-off at Step 1 usually means one of three things: the first field is too sensitive, there are too many required fields on Step 1, or the form does not match visitor expectations based on the page they came from.

A high drop-off at a specific middle step usually means that step contains a question the visitor is not ready to answer or a required field they cannot fill in. Review the specific fields on that step and consider making some optional or moving sensitive questions to a later step.

A high drop-off at the final step before submission often means the submit button label is not clear, the confirmation message expectation is not set, or there is a technical issue preventing submission. Check the button label and test the form end-to-end.

Troubleshooting Common Issues

Page Break block not creating separate steps on the front end

The most common cause is a caching plugin serving an old version of the page without the multi-step JavaScript loaded. Clear your site’s cache after publishing any changes to a multi-step form. If the issue persists, check for JavaScript conflicts by temporarily disabling other plugins and testing with a default theme.

Step validation not firing , visitors can advance without completing required fields

Confirm that the Required toggle is enabled on the specific fields that should prevent advancement. This is configured per field in the block settings, not at the form level. Also verify there is no conditional logic rule hiding the required field under certain conditions, a hidden required field will not block step advancement.

Progress bar not appearing

Progress bar configuration is in the form’s General settings under the Page Break dropdown, not in the individual Page Break block settings. If the progress indicator is set to None, no bar appears. Change it to numbered steps or percentage bar.

“Back” button returns the visitor to Step 1 instead of the previous step

This is a caching issue in almost all cases. Clear the site cache, clear the browser cache, and test again.

Conclusion

Multi-step forms are one of the most reliable tools for improving completion rates on longer forms. The principle is simple: showing visitors a manageable number of fields at a time, with clear progress indication, removes the psychological friction that causes people to abandon long single-page forms.

SureForms builds multi-step forms directly inside the Gutenberg block editor using Page Break blocks. Add a Page Break between fields and they become steps. Configure the progress bar and step labels in the form’s General settings. Pair the steps with conditional logic to show different questions to different visitors. Enable Save and Resume so visitors who cannot finish can return later.

The analytics built into SureForms Pro show you exactly where visitors drop off so you can make targeted improvements rather than guessing.

Multi-step forms are included in SureForms Pro at $59 per year for a single site with every feature included.

See all SureForms Pro features

FAQs