Multi-Step Forms (MSFs)

A Multi-Step Form is a form which is broken into separate pages or steps, where only one page is shown at a time. The user interacts with each page individually, and can only proceed when that step validates.

This technique is usually used in two scenarios;

1. When questions asked depend on the questions previously answered. This is most commonly seen in product or service-recommendation funnels, and simple quotation systems.
2. When you're trying to collect a ton of information, and need to break it down into manageable chunks. For example, enrolling at a medical practice, booking a tour, or pre-qualifying for a mortgage.

Any particular use case can involve elements of both.

Webflow Solutions

Webflow does not have a native multi-step form approach, however you can create some of the functionality natively;

• Place a tab or slider element inside of a form, and then break the steps of the form into tabs / slides.
• Use multiple forms, and capture each separately. On completion of each form, forward them to the next one.

In both cases, you'll likely need a fair amount of custom code to complete the UX, perform validation, navigation, and to handle the data capture.

There are also 3rd party form products that can either replace Webflow forms ( sacrificing style control ), or augment them to provide certain multi-step form functionality.

3rd Party Solutions

Forms can be very complex, particularly when business logic, complex data entry and data validation are considered.

This has inspired a range of 3rd party solutions;

General-purpose Solutions

There are a ton of 3rd party drop-in form providers, which allow you to design and embed forms into your site. While these forms offer a lot of capabilities, they are not designed in the Webflow designer so the trade-off is stylistic control.

However they'll save you a lot of development work and provide a complete solution for a monthly fee.

Examples;

• Jotform
• Basin forms

Webflow-specific Solutions

There are also several solutions that are designed to augment Webflow-built forms.

These allow you to design your form in Webflow, and then typically provide much of the infrastructure for the form's functionality via external libraries and custom attributes.

Examples;

• InputFlow - Mike Pecha's solution that focuses on scenario #1.
• Formly - https://www.tryformly.com/docs
• Superform - https://webflow.com/made-in-webflow/website/superform-v1

Custom-Built Solutions

At Sygnal, we typically custom-build complex forms for clients because we have the developer resources and our client prefer the flexibility and cost benefits of a custom solution ( no monthly fee ).

There are generally the discrete parts you'll want to build.

UX Logic

Handles things like;

• master detail options, like country/city
• loading country codes for international phone number entry
• displaying "please describe" textboxes when "(other)" is selected in a dropdown list
• repeating sections, e.g. "list other participants in the tour"

Multistep validation

• performs validation of an individual page
• displays errors  

Navigation logic

• decides whether you can continue
• decides whether you can go back, or e.g. jump to step 3 depending on your UX
• handles the transition between steps
• triggers saves and loads for each page

Form data storage

Tracks and stores the "order" data in an object during the multi-step process.

• feeds the calculator
• used for persistence on large forms
• optionally, persists locally in webStorage, or remotely in a db
• supports abandoned cart saves

Calculator

• uses the order object to perform calculations, returns an amount that can be displayed

Submission handler

• submits the data, does notifications, emails the client, etc.
• triggers automations and order-processing systems
• optionally, billing
• redirects or results display, depending on the submission results

Most of this is straightforward, just a couple of hours of coding and testing. We recommend typescript and a Github repo if possible to manage your source code effectively.

Billing

The stickier part is billing, because;

• These forms often have variable pricing, so you must use a billing system that support arbitrary billing amounts ( Paypal, Windcave, Foxy )
• You ideally want to know the billing result and display the confirmation page, which means a round-trip integration with data coming back from the billing processor. Foxy should offer to configure redirect URLs or return a result you can action. Paypal & Windcave might have both success and fail redirect URL options in their hosted payment page solutions.

When possible, we recommend you take the simplest path possible. If you can send the user to a payment page and thank them, it's often more effective to have a human follow up if payment was not completed.

Resources

https://webflow.com/made-in-webflow/website/Multi-Step-Form

https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

Buzzfeed-style quiz

https://www.youtube.com/watch?v=FEXMeYjHD5I&ab_channel=BenParker

https://webflow.com/made-in-webflow/website/the-office-game

‍