A multi-step form breaks a long list of fields into a series of shorter pages, presenting only a few questions at a time. This reduces cognitive overload, makes the form feel more manageable, and significantly improves completion rates compared to presenting all fields on a single scrolling page.
Multi-step forms work best when:
- You need to collect more than five or six pieces of information
- Some questions are only relevant based on earlier answers (combine with conditional logic)
- You want to qualify leads progressively — asking the most important questions first
- You are using a form as part of a funnel where each page can build on the last
For simple lead capture (name, email, phone), a single-page form is usually better. The added navigation of a multi-step form is only worthwhile when the total number of fields justifies it.
Adding pages to a form
- Open the form in the builder.
- Scroll to the bottom of the canvas.
- Click Add Page to insert a new page break below the current content.
- A new blank page appears with its own section on the canvas.
- Drag fields from the left panel onto the new page.
Repeat for as many pages as you need. Each page appears as a distinct section in the builder, separated by a visible page divider.
Reordering pages and fields
- To reorder fields within a page, drag the field’s handle up or down within the same page section.
- To move a field to a different page, drag it across the page divider.
- To reorder pages, click the page header and use the move controls that appear.
The progress bar
By default, HoopAI displays a progress bar at the top of multi-step forms showing the contact how far through the form they are. The progress bar updates each time the contact advances to the next page.
Progress bar display options (configured in the Styles tab):
- Percentage — shows “67% complete” as a filled bar
- Step count — shows “Step 2 of 3” as text below the bar
- Hidden — removes the progress bar entirely
Research consistently shows that progress indicators reduce abandonment on multi-step forms because they give the contact a sense of momentum and an end point.
Each page except the last has a Next button. The last page has a Submit button. Both buttons are customizable:
- Label — change “Next” to any text, such as “Continue” or “Next step”
- Style — adjust button color, border radius, and font in the Styles tab
- Type — choose to show text only, an arrow icon only, or both
A Back button appears automatically on pages after the first, allowing contacts to correct earlier answers. You can hide the back button in the button settings if your form logic requires forward-only navigation.
Validation per page
By default, required fields on the current page must be completed before the contact can advance to the next page. HoopAI validates each page independently when the contact clicks Next.
If a required field is empty or invalid, an error message appears inline next to the field and the contact cannot proceed until the issue is corrected.
Combining multi-step with conditional logic
Multi-step forms work well alongside conditional logic:
- Show or hide entire pages based on earlier answers (use a field’s hidden-by-default setting combined with a show rule)
- Route contacts to different final pages based on their responses using submission conditional logic
- Collect just the minimum information on the first page to create the contact in the CRM, then gather details on subsequent pages
Because HoopAI saves partial submission data progressively (after each page is completed), you can sometimes capture a contact’s information even if they abandon the form partway through. Check your CRM contacts list for partially submitted entries if you suspect drop-off after the first page.
To customize the visual appearance of the progress bar and page navigation, open the Styles tab in the builder. See Form styling for full details on colors, fonts, and custom CSS.
Put the lowest-barrier fields on the first page — typically just name and email. Once the contact has entered their information and clicked “Next,” they are invested in completing the form. The psychological commitment created by the first page action dramatically reduces overall abandonment.
.png?fit=max&auto=format&n=EQK5eX9kTD8NzWwA&q=85&s=878008bf159fcc4964d0c0d508b6e400)