Multi-step forms, now in Webflow

Gone are the days of using sliders, tabs and complex animations to create multi-step forms on Webflow. Focus on creating the form, not the code.

No sliders.

No tabs.

No code.

Setup form.
Add a script.

It is as simple as it sounds. Each step of your form should be its own element. 100% design freedom.

Copy this script to your page "Before </body> tag"

<script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@latest/multi-step.js"> </script>
Form Block
Form
form-step-wrapper
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-buttons
back-button
next-button
submit-button
Success Message
Error Message
Your name?
Your email?
How can we help you?
Form Block
Form
form-step-wrapper
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-buttons
back-button
next-button
submit-button
Success Message
Error Message
Your name?
Your email?
How can we help you?

Attribute to the Form element.

Once the script is added, we can now start adding attributes. Add this attribute to the Form element.

Custom <div> attributes
data-form
=
multistep

Add attributes to each step.

Every div block with this attribute will be taken as a step on the multi-step form. This is also the element you add any power-up attributes to.

Custom <div> attributes
data-form
=
step
Form Block
Form
form-step-wrapper
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-buttons
back-button
next-button
submit-button
Success Message
Error Message
Your name?
Your email?
How can we help you?
Form
form-step-wrapper
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-buttons
back-button
next-button
submit-button
Success Message
Error Message
Your name?
Your email?
How can we help you?

3 attributes,
3 buttons.

You can have more than one instance of the next and back buttons on the page.

Custom <div> attributes
data-form
=
back-btn
Custom <div> attributes
data-form
=
next-btn
Custom <div> attributes
data-form
=
submit-btn

Try it yourself!

Hola! 👋🏼

Let's get to know you better!
Tell us about you!
press Enter ↵
a.
Ok ✓
press Enter ↵
b.
Ok ✓
press Enter ↵
c.
Ok ✓
press Enter ↵
c.
Ok ✓
press Enter ↵
Ok ✓
press Enter ↵
Ready to submit?
press ⌘ + Enter ↵

Wow, we didn't expect you to go this far. You must be really into multistep forms 👀
Oops! Something went wrong while submitting the form.

No code means

no compromise

UI/UX

Automatic progress navigation

Add this attribute to the element that contains the individual step indicators.
Custom <div> attributes
data-form
=
progress
Add this attribute to the progress indicator element. Add a combo class '.current' and add the current state style.
Custom <div> attributes
data-form
=
progress-indicator
01
UI/UX

Custom progress navigation

Want to create custom form progress indicators? Add this attribute to each of your custom indicators.
Custom <div> attributes
data-form
=
custom-progress-indicator
02
UI

Intro cards or steps without inputs

Add this attribute to the '.form-step' element
Custom <div> attributes
data-card
=
true
03
04
UX

Press Enter ↵ to progress

Add this attribute to the Form element.
Custom <div> attributes
data-enter
=
true
UX

Press ⌘ + Enter ↵ to submit

Add this attribute to the Form element.
Custom <div> attributes
data-submit
=
true
05
FUNCTION

Input validation

Required vs optional inputs

Just check or uncheck the 'required' box on Webflow.

Email input

Email inputs only allow true email expression. It doesn't allow numbers in the domain name and doesn't allow for top-level domains that are less than 2 or more than 3 letters.

Checkbox input

If you want users to check a minimum number of checkboxes before progressing, add this attribute to the '.form-step' element.
Custom <div> attributes
data-checkbox
=
n
n = the min # of inputs must be checked
06
UX

Radio inputs

Radio input

If you want users to progress automatically to the next step, add this attribute to the element that contains your radio inputs.
Custom <div> attributes
data-radio-skip
=
true
n = delay in seconds
Add this attribute to customise the delay timer.
Custom <div> attributes
data-radio-delay
=
n
n = delay in seconds
07
UI/UX

Form step text

08

Current Step

Show the current step the user is on. Add this attribute to any text block.
Custom <div> attributes
data-text
=
current-step
n = the min # of inputs must be checked

Total Steps

Show the total number of steps in the form. Add this attribute to any text block.
Custom <div> attributes
data-text
=
total-steps
n = the min # of inputs must be checked

View full documentation

Head over to our solutions page to get the full documentation and a Webflow read-only preview demo that has all of these powerups and more!
View Docs
One
more
thing
.
.
.
Coming soon

Conditional

Logic

Ask the right questions and skip the unwanted ones. Build fun games, quizzes or forms with logic on Webflow, with absolutely no code.
Added to the waitlist! You'll be the first one to know when it launches!
Oops! Something went wrong while submitting the form.

Introducing

FormlyLogic

Bringing conditional logic to Webflow form, all with no-code. You can create powerful forms and quizzes with just 2 attributes.

Formly - Create multistep forms on Webflow with no-code | Product Hunt