Pages: Creating Multi-Step Forms

This guide will show you how to create multi-step forms, customize each step, and set up rules to control how users move through your form. In Reform form steps are called “pages”. By the end, you'll know how to build a form that is more user-friendly and helps you collect information more effectively.

Multi-step forms are less overwhelming than single-page forms, making visitors more likely to fill them out. By breaking the form into smaller sections, users can focus on one part at a time, reducing the likelihood of abandonment.

Adding New Pages

1. Locate the “Add Page” Button

   At the bottom of your current form page (below all form blocks and the CTA button), you'll find the “Add Page” button. Click on this to create a new page (step) in your form.

2. Customize the New Page
   • Form Heading: Enter a heading for the new page.
   • Add Form Blocks: Click on the ‘Add form block’ CTA to add new form fields.
   • Move Blocks Between Pages: You can move blocks (fields) into the new page as needed. To move a block from one page to another, hover over the block, click the six dots that appear on the left, and drag the block to the desired page.

Setting Up Conditional Logic

Conditional logic lets you control how users navigate through your multi-step form based on their responses. 

• For example, if your form asks users about their company's annual revenue to qualify leads, you can set a rule to direct them to different outcomes. 
  • If a user selects "More than $10 million," you can set a rule to skip to a page with high-value content or a direct scheduling link to speak with a sales representative. 
  • If they select "$1 million - $10 million," they can be directed to a page with resources tailored for medium-sized businesses and an option to schedule a demo. 
  • If they select "Less than $1 million," they can be routed to a page with self-service resources and an invitation to join a webinar. 

This way, users are directed to the most relevant section based on their potential value, optimizing the lead qualification process. For more details on how to set up and use conditional logic, please refer to our guide here.

Using the Progress Bar for Multi-Step Forms

To make your multi-step forms even more intuitive, you can enable the Progress Bar feature. This feature provides a clear visual indicator of the user’s progress through the form.

1. Open the Form Settings for your multi-step form.
2. Locate the Progress Bar section and toggle it on.

1. Step Indicators: Highlights the current step the user is on.
2. Progress Bar Design:
   • The bar spans horizontally above the form.
   • Step labels appear below the indicators for clarity only on desktop.
   • Automatically matches the form's Primary Color for seamless branding.
3. Text Options for Steps:
   • Number (Default): Shows step numbers (e.g., Page 1, Page 2).
   • No labels: Hides all text, showing only the progress bar.
   • Custom Label: Allows you to name each step (e.g., "Contact Info," "Details," "Confirmation")

   • 

4. Turn On/Off:
   • The progress bar can be toggled on or off in the Form Settings
5. Custom Styling:
   • Element classes are available for advanced CSS customization.

By following these steps, you can effectively manage the flow of your multi-step form, ensuring a streamlined and user-friendly experience. If you're experiencing issues or have questions, please contact us at [email protected]. We're here to assist you!