Skip to content
Qivra Help Center

Multi-Step Forms

Multi-step forms break long forms into manageable sections, improving user experience and increasing completion rates. This guide shows you how to create and configure multi-step forms.

Why Use Multi-Step Forms?

Section titled “Why Use Multi-Step Forms?”

Benefits

Section titled “Benefits”
BenefitDescription
Better UXLess overwhelming than long single-page forms
Higher CompletionUsers more likely to finish shorter steps
Logical FlowGroup related questions together
Progress VisibilityUsers see how far they’ve progressed
Reduced AbandonmentLower cognitive load per step

When to Use Multi-Step

Section titled “When to Use Multi-Step”
  • Forms with 10+ fields
  • Complex information gathering
  • Application or registration forms
  • Surveys with sections
  • Checkout or booking processes

Creating Multi-Step Forms

Section titled “Creating Multi-Step Forms”

Step 1: Add Steps to Your Form

Section titled “Step 1: Add Steps to Your Form”
  1. Open your form in the Form Builder
  2. Click Add Step button (usually at the top or bottom of the form)
  3. A new step is created

Step 2: Name Your Steps

Section titled “Step 2: Name Your Steps”
  1. Click on the step header or tab
  2. Enter a descriptive name for the step
  3. Good names include:
    • “Personal Information”
    • “Shipping Details”
    • “Preferences”
    • “Review & Submit”

Step 3: Add Fields to Each Step

Section titled “Step 3: Add Fields to Each Step”
  1. Select the step you want to edit
  2. Click Add Elements
  3. Add fields to that step
  4. Repeat for each step

Managing Steps

Section titled “Managing Steps”

Step Navigation

Section titled “Step Navigation”

The step navigator shows all steps in your form:

ElementFunction
Step TabsClick to switch between steps
Add Step (+)Create a new step
Step Menu (⋯)Additional step options

Reordering Steps

Section titled “Reordering Steps”
  1. Click and hold the step tab
  2. Drag to the desired position
  3. Release to drop

Step Actions

Section titled “Step Actions”

From the step menu (⋯):

ActionDescription
RenameChange step name
DuplicateCopy the entire step
DeleteRemove the step and its fields
Move Up/DownReorder steps

Step Settings

Section titled “Step Settings”

Step Options

Section titled “Step Options”

Click on a step to access its settings:

SettingDescription
Step NameDisplay name for the step
DescriptionOptional text shown below step name
Conditional LogicShow/hide step based on conditions

Step Navigation Settings

Section titled “Step Navigation Settings”

Control how users move between steps:

SettingOptions
Previous ButtonShow/Hide, custom text
Next ButtonCustom text
Submit ButtonCustom text on final step

Step Progress Indicator

Section titled “Step Progress Indicator”

The progress indicator shows users their current position:

Display Options

Section titled “Display Options”
StyleDescription
TabsStep names as clickable tabs
Progress BarVisual bar showing completion
StepsNumbered circles with labels
DotsSimple dot indicators

Customization

Section titled “Customization”
  • Show/hide step names
  • Show/hide step numbers
  • Customize colors and styling

Conditional Steps

Section titled “Conditional Steps”

Steps can be shown or hidden based on user responses.

Setting Up Conditional Steps

Section titled “Setting Up Conditional Steps”
  1. Click on the step to select it
  2. Scroll to Conditional Logic settings
  3. Enable conditional logic
  4. Set the condition rules

Example Use Cases

Section titled “Example Use Cases”
ScenarioCondition
Business ApplicationShow “Company Info” step when “Business” is selected
Shipping FormShow “International Shipping” step when country is not domestic
SurveyShow “Follow-up Questions” step when rating is low

See Conditional Logic for detailed instructions.

Best Practices for Multi-Step Forms

Section titled “Best Practices for Multi-Step Forms”

Step Organization

Section titled “Step Organization”

  1. Logical Grouping

    • Personal info together
    • Address details together
    • Preferences together

  2. Progressive Disclosure

    • Start with easy questions
    • Save complex questions for later steps
    • End with review or confirmation

  3. Optimal Step Size

    • 3-5 fields per step
    • Each step should fit on one screen
    • Avoid empty steps

User Experience Tips

Section titled “User Experience Tips”
DoDon’t
Show progressHide total steps
Allow back navigationForce linear progression
Save progressLose data on back button
Clear step namesGeneric “Step 1, Step 2”

Step Naming Examples

Section titled “Step Naming Examples”
Good NamesPoor Names
”About You""Step 1"
"Your Preferences""Questions"
"Shipping Address""Address Info"
"Review & Confirm""Final”

Multi-Step Form Flow

Section titled “Multi-Step Form Flow”

Typical Flow Structure

Section titled “Typical Flow Structure”
Step 1: Introduction / Basic Info
    ↓
Step 2: Detailed Information
    ↓
Step 3: Preferences / Options
    ↓
Step 4: Review
    ↓
Submit → Success Message
Section titled “Navigation Buttons”

Each step typically includes:

ButtonLocationFunction
PreviousBottom leftGo back to previous step
NextBottom rightProceed to next step
SubmitBottom right (final step)Submit the form

Troubleshooting

Section titled “Troubleshooting”

Fields Not Showing in Steps

Section titled “Fields Not Showing in Steps”
  • Make sure you’re on the correct step tab
  • Check if conditional logic is hiding the field
  • Verify the field wasn’t accidentally deleted

Steps Not Appearing

Section titled “Steps Not Appearing”
  • Check if step conditional logic is configured
  • Ensure the step has at least one visible field
  • Verify the step wasn’t deleted
Section titled “Navigation Issues”
  • Check button settings in form configuration
  • Verify all required fields are filled
  • Look for validation errors on current step

Video Tutorial

Section titled “Video Tutorial”
Play
Section titled “Related Docs”