Multi-Step Forms
Multi-step forms break a long application into several pages or steps, making it easier for families to complete without feeling overwhelmed. The system provides progress tracking, step navigation, and a customizable thank-you page.
Creating a Multi-Step Form
- Open the Form Builder (create a new form or edit an existing one).
- By default, a form starts with a single step.
- Click the Add Step button in the tab bar to add additional steps.
- Each step gets its own tab in the stepper navigation.
You can add as many steps as needed. Common step structures for admissions forms include:
- Step 1: Student Details
- Step 2: Parent/Guardian Information
- Step 3: Program Selection & Academic Year
- Step 4: Additional Information & Document Uploads
- Thank You: Confirmation message
Step Navigation in the Builder
When your form has multiple steps, a horizontal stepper appears above the canvas:
- Step tabs -- click any step to switch to it and edit its fields.
- Left/Right arrows -- reorder steps by moving the selected step left or right.
- Delete button -- remove the current step (at least one step must remain).
- Thank You tab -- always appears at the end; click it to edit the confirmation page.
Reordering Steps
- Select the step you want to move.
- Use the left arrow button to move it earlier in the sequence.
- Use the right arrow button to move it later.
The arrows are disabled when the step is at the first or last position (before the Thank You step).
TIP
You can also drag and drop step tabs in the stepper to reorder them. Drag a step tab and drop it at the desired position.
Drag Fields Between Steps
You can move fields between steps using drag and drop:
- Drag a field from the canvas.
- While dragging, hover over a different step tab in the stepper.
- The step tab highlights to indicate it will accept the drop.
- Release to move the field to that step.
This is useful when reorganizing your form structure after initial design.
Applicant Experience
When a family fills out a multi-step form:
- A progress stepper appears at the top of the form showing all steps.
- The current step is highlighted, and completed steps show a checkmark.
- The applicant fills out the current step and clicks Next to proceed.
- They can click Back to return to a previous step and modify their answers.
- After the final step, they click Submit to complete the application.
- The Thank You page is displayed with your customized confirmation message.
Progress Persistence
The system saves form progress locally in the browser:
- If an applicant leaves the form and returns later, their progress is restored.
- This applies to non-email-gate forms where progress is saved per form URL.
- For email-gate forms, progress is tied to the verified email session.
WARNING
Form progress is saved in the browser's local storage. If the applicant switches to a different device or clears their browser data, their progress will not be available.
Thank You Page
Every form has a Thank You step that is displayed after successful submission:
- Click the Thank You tab in the stepper (the checkmark icon at the end).
- Customize the content:
- Title -- the heading shown on the confirmation page.
- Message -- a rich text area for your confirmation message.
- Additional fields -- you can add informational elements to the thank-you page.
TIP
Use the Thank You page to set expectations -- let families know what happens next, when they will hear back, and any documents they should prepare for the next step.
Step-Specific Best Practices
- Keep steps focused -- each step should cover one logical section (e.g., student info, parent info, documents).
- Put required fields early -- place the most important required fields in the first steps.
- Use descriptive step titles -- rename steps to meaningful names (e.g., "About Your Child" instead of "Step 1").
- Keep step count reasonable -- aim for 3-5 steps. Too many steps can feel tedious; too few defeats the purpose of multi-step.
- Place file uploads in later steps -- document uploads are slower to complete, so place them after the basic information steps.
Deleting a Step
- Select the step you want to delete.
- Click the trash icon in the editor actions area.
- A confirmation dialog appears.
- Confirm to delete the step and all its fields.
WARNING
Deleting a step removes all fields within it. This action cannot be undone. If you want to keep the fields, drag them to another step before deleting.