Guides
How to Create a Multi-Step Form in WordPress
Long forms scare visitors away when everything appears on one screen. Splitting the same fields into steps with a progress indicator typically lifts completion rates because each screen feels quick and manageable. Auto Form Builder includes multi-step forms free in the core — this guide shows how to enable steps, add page breaks and set up branching.
What you'll need
Auto Form Builder installed free from WordPress.org — no account required for the core plugin.
Step 1: Install Auto Form Builder and create your form
Install the plugin from WordPress.org and build your form with all the fields you need on a single canvas first — it is easier to plan the full flow before splitting it into steps. Include Name, Email and any question fields your process requires. Save the form as a draft so you can enable multi-step mode without losing field configuration.
Step 2: Enable multi-step mode in Form Settings
Open Form Settings and turn on the multi-step option for this form. The builder now treats Page Break fields as step boundaries instead of visual separators only. Choose a progress bar style so visitors see how far along they are — progress indicators reduce abandonment on forms with more than five fields.
Step 3: Insert Page Break fields between steps
Drag Page Break fields onto the canvas wherever a new step should begin — for example, after contact details and before project questions. Click each page break to set a step title and custom Next and Previous button labels that guide visitors through the flow. Keep each step to three or four fields when possible so no single screen feels like a wall of inputs.
Step 4: Configure answer-based branching
Use conditional logic to skip steps or jump ahead based on answers — forward-only branching keeps the flow safe from loops. For example, skip the enterprise questions step when someone selects "Personal use" on step one. Test every branch path with sample submissions to confirm no step hides required fields or traps visitors in a dead end.
Step 5: Style each step consistently
Open the Customize tab and apply your brand styling — the same theme, colors and fonts apply across all steps automatically. Preview on mobile because multi-step forms are often completed on phones where button placement and progress bar width matter. Save the design before embedding so every step looks polished on the live site.
Step 6: Embed and test the full flow
Copy the shortcode or add the Gutenberg block to your target page and publish. Walk through every step on the front end as a visitor would, including back-navigation with the Previous button. Confirm partial entries are captured between steps if you rely on submission management for abandoned form recovery.
Tips
- Put easy, low-friction fields like name and email on step one — collecting contact info early means you still capture leads even if someone drops off later.
- Write step titles that tell visitors what comes next — "Tell us about your project" is clearer than "Step 2" and keeps people moving forward.
- Review the 30-day analytics after launch to see which step loses the most visitors, then shorten or reorder that section.
Go deeper
FAQ
Are multi-step forms included free?
Yes — page breaks, progress bars, step titles and answer-based branching are all part of the free core plugin with no paid tier required.
Can I skip steps based on answers?
Yes — conditional logic supports forward-only branching to skip or jump to specific steps depending on what the visitor selects.