How to Create Multi-Step Forms in Webflow Using Formly

Multi-step forms are a great way to improve user experience by breaking down complex processes into smaller, manageable steps.

They help reduce form abandonment and increase completion rates by guiding users through each stage without overwhelming them.

Using Formly in Webflow, you can create multi-step forms that look professional and function smoothly. Here’s how to do it.

Why Multi-Step Forms Are Effective

Breaking down long forms into smaller steps makes them less intimidating and easier to complete. Multi-step forms can improve conversion rates and reduce abandonment by making the process feel more manageable. They are commonly used in industries such as:

• Healthcare: Patient intake forms.
• Financial Services: Loan applications.
• SaaS: User onboarding and subscription sign-ups.

Benefits of Multi-Step Forms

• Improved User Experience: Users find short steps easier to digest than a long, single-page form.
• Higher Completion Rates: A gradual process encourages users to finish instead of dropping off halfway.
• Better Data Collection: Capture data step-by-step, reducing cognitive load and enhancing accuracy.
• Conditional Logic Opportunities: Show or hide fields dynamically based on previous answers, personalising the experience.

When to Use Multi-Step Forms

Multi-step forms work well for:

• Lead generation forms: When multiple data points are required (e.g., contact + business info).
• Onboarding forms: For new customers or employees.
• Quizzes or surveys: To create a structured flow of questions.
• Checkout processes: With several options (e.g., shipping, payment, confirmation).

Step 1: Plan Your Multi-Step Form

Before building your form, outline the key sections:

• Define Your Goals: Identify the information you need and prioritise key details in the early steps.
• Group Fields Logically: Break the form into logical sections such as "Personal Details," "Preferences," and "Final Submission."
• Use Progress Indicators: Show users where they are in the process to encourage completion.
• Reduce Initial Commitment: Start with easy, low-friction questions to hook users in.

Step 2: Build Your Multi-Step Form in Webflow

Set Up the Form

• Add a Form Block: Drag and drop a form block onto your page from Webflow’s elements panel.
• Enable Formly Multi-Step Form: Add the following attribute to the form element: data-form="multistep"
• Add Form Steps: Wrap each step’s content inside a div and assign it the following attribute: data-form="step". If the step contains no inputs (such as an introduction or transition card), add: data-card="true"
• Navigation Buttons: Add Next and Back buttons with the following attributes:
  • Next button: data-form="next-btn"
  • Back button: data-form="back-btn"
• Submit Button: Place the submit button inside the form element and assign it this attribute: data-form="submit-btn"

Add Progress Indicators (Optional)

• To include an automatic progress bar: data-form="progress"
• Assign the progress indicator element: data-form="progress-indicator"
• For custom progress indicators: data-form="custom-progress-indicator"

Email Collection

Ensure the final step includes an email input field marked as required to capture lead information before form submission.

Step 3: Style Your Form

• Use Webflow’s design tools to match your branding.
• Keep the layout clean and intuitive.
• Optimise for mobile by testing responsiveness across different devices.

Step 4: Add the Formly Script

To enable Formly’s multi-step functionality, add the following script before the closing </body> tag:

<script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@latest/multi-step.js"></script>

Step 5: Test Your Multi-Step Form

• Ensure smooth navigation: Test each step to verify that next and back buttons work correctly.
• Check validation: Make sure required fields prompt users appropriately.
• Monitor responsiveness: Confirm the form looks good on all screen sizes.

Best Practices for Multi-Step Forms

• Keep It Short: Ask only for essential information and remove unnecessary fields.
• Use Microcopy: Guide users through each step with short, helpful text.
• Provide Autofill Options: Make the form faster to complete with autofill where possible.
• Offer a Summary Step: Show users a review page before submission to confirm their details.
• Test on Mobile: Ensure steps are easy to navigate on smaller screens with touch-friendly buttons.

Tracking and Optimising Multi-Step Forms

• Use analytics tools like Google Tag Manager to track form drop-off rates.
• A/B test different form layouts and progress indicators to find what works best.
• Implement heatmaps (e.g., Hotjar) to identify friction points.

Conclusion

Multi-step forms can greatly enhance the user experience by simplifying the submission process and increasing form completions.

With Formly and Webflow, creating an effective, well-structured form is easier than ever.

Plan your form carefully, follow the setup steps, and watch your lead generation efforts improve.