Webflow Forms

Multi-Step Forms (MSFs)

No items found.
Overview
Webflow Forms Basics
Intro
001
Webflow Forms Limitations & Bugs
002
Basic Form Controls
Form Select
051
Form Textarea
052
Customizing Input Controls
Customizing Radio Buttons & Checkboxes
Intro
101
Input Number & Decimal Places
Intro
102
Numeric Range Sliders
Intro
102
Multi-Select Dropdown
Intro
104
Auto-Size Textareas
Int
110
Date Pickers
Intro
111
Forms Validation
Forms Validation Basics
Intro
200
Input Types
Intro
201
Using Regex Patterns in Forms Validation
Intro
202
Custom Validation Errors
Adv
203
Forms Validation Techniques
Validating Emails
Intro
301
Blocking Free Email Provider Addresses
Intro
302
Requiring Checkboxes
Intro
302
International Phone Numbers
Int
6:50
304
Databinding
Databinding CMS Collections to a Form Select
8:42
401
Forms Validation Techniques
3rd Party Form Handlers
Intro
401
Making Forms Dynamic
Displaying Form Parts Conditionally
14:36
501
Multi-Step Forms (MSFs)
Intro
501
SPAM Blocking Techniques
CAPTCHA Approaches
601
Form Handlers
3rd Party Form Handlers
901
Integrating the Basin Form Handler
902
Uploading Files
904
No items found.

A Multi-Step Form is a form which is broken into separate parts or steps, where only one part is shown at a time. The user interacts with only one part of the form at a time, and generally the form only submits at the very last step.

This technique is usually used in two scenarios;

  1. When questions asked depend on the questions previously answered.
  2. When you're trying to collect a ton of information, and need to break it down into manageable chunks.

There are many possible use cases here.

Scenario 1 is common in product or service-recommendation funnels, and simple quotation systems.

Scenario 2 is common where complex data entry and complex field validation are needed - enrolling at a medical practice, or pre-qualifying for a mortgage.

But any particular use case can involve elements of both.

Webflow Solutions

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

  • Place a tab element, or a 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.
  • Custom code a solution.

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;

Webflow-specific;

There are several solutions that are designed specifically to work with Webflow-built forms;

  • 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

General-purpose;

There are a ton of 3rd party 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.

  • Jotform
  • Basin forms

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

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.