Multi-Step Forms

What are Multi-Step Forms?

Multi-step forms break long forms into smaller, focused sections. Instead of showing all fields at once, users complete one step at a time with clear progress indicators.

Research shows multi-step forms can increase completion rates by up to 86% compared to long single-page forms. They reduce cognitive load and create a sense of progress.

Creating Multi-Step Forms

Every form in SkunkForms can be converted to multi-step:

1. In the form editor, add Step Break blocks where you want to divide sections
2. Each step break creates a new step
3. Configure step titles, descriptions, and navigation
4. Preview your form to test the flow

Step Structure

Each step should focus on one logical group of information:

• Step 1: Contact details
• Step 2: Project requirements
• Step 3: Budget and timeline
• Step 4: Review and submit

Keep steps roughly equal in length — avoid one huge step followed by tiny ones.

Progress Indicators

Choose from three progress indicator styles:

Progress Bar

A visual bar showing percentage completion:

[████████████████████████████░░░░░░░░] 70%

Step Numbers

Numbered circles showing current position:

(1) ──── (2) ──── [3] ──── (4)

Breadcrumbs

Text-based navigation:

Contact > Requirements > Budget > [Review]

Configure in Form Settings > Multi-Step > Progress Style.

Step Validation

Each step validates before allowing progression:

• Required fields must be completed
• Email fields must be valid email addresses
• Number fields must be within specified ranges
• File uploads must meet size/type restrictions

Users see validation errors immediately and cannot proceed with incomplete data.

Navigation Controls

Customize how users move between steps:

Back Button

• Always show — users can go back anytime
• Hide on first step — no back button on step 1
• Never show — one-way progression only

Next Button

• Continue (default)
• Next Step
• Next →
• Custom text per step

Submit Button (final step)

• Submit Form (default)
• Complete Registration
• Place Order
• Custom text

Conditional Step Routing

Route users to different steps based on their answers:

• If "Service Type" is "Basic" → skip to Step 4
• If "Budget" is "Enterprise" → go to Step 3 (custom quote)
• If "Existing Customer" is "Yes" → skip account setup steps

This creates personalized form experiences without showing irrelevant fields.

Save & Resume

Allow users to save progress and return later:

1. Enable Save & Resume in Form Settings
2. Users get a unique resume link via email
3. Form data persists for 30 days (configurable)
4. Perfect for applications, surveys, and complex intake forms

How it Works

1. User fills out steps 1-2 of a 5-step form
2. Clicks "Save & Resume Later"
3. Enters email address
4. Receives email with secure resume link
5. Clicks link to continue from step 3

Mobile Optimization

Multi-step forms work beautifully on mobile:

• One step fills the screen comfortably
• Large, thumb-friendly navigation buttons
• Swipe gestures for navigation (optional)
• Progress indicators adapt to narrow screens

Common Use Cases

Job Applications

• Step 1: Personal information
• Step 2: Work experience
• Step 3: Skills and qualifications
• Step 4: Additional questions

Event Registration

• Step 1: Attendee details
• Step 2: Session selection
• Step 3: Dietary requirements
• Step 4: Payment

Lead Qualification

• Step 1: Company information
• Step 2: Project scope
• Step 3: Budget and timeline
• Step 4: Contact preferences

Best Practices

Keep Steps Logical

Group related fields together. Don't arbitrarily split fields just to create steps.

Show Progress Clearly

Users need to know where they are and how much remains.

Validate Early

Don't wait until the end to show validation errors. Fix problems step-by-step.

Consider Drop-off Points

Monitor analytics to see where users abandon the form. Those steps may need simplification.

Test on Mobile

More than 50% of form submissions happen on mobile devices. Test extensively.

Troubleshooting

Users Skip Steps

Check your conditional logic — conditions might be hiding step breaks.

Progress Bar Doesn't Match

Progress calculates based on completed fields, not steps. A step with 10 fields counts more than a step with 2 fields.

Mobile Navigation Issues

Ensure navigation buttons have enough spacing (44px minimum tap target) and test on actual devices.