NO-CODE

Formly - Multi-Step Forms

Turn any Webflow form into a multi-step form in under 5 minutes!

Examples to kickoff

1 script & 5 attributes 🔥

Add this script before </body> tag

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

Attribute for the Form element

data-form
=
multistep
02

Attribute for each "step" on your form

data-form
=
step
03

Attribute for submit button

data-form
=
submit-btn
04

Attribute for the back button

data-form
=
back-btn
05

Attribute for next button

data-form
=
next-btn

Things to note:

1. You do not need to hide the individual steps in the form. They are automatically hidden on the published site.
If you do hide them, it won't cause any issues.

2. The next and back buttons can be placed anywhere on the page and not necessarily inside the Form element. But do note that the submit button has to be inside the Form element.

3. You can have multiple instances of the next and back button (for example, a pair of back and next buttons inside each step-item)

4. You can only have 1 instance of this multi-step form per page

Need help?

If you need help or need any technical assistance regarding this tool, please join our Slack channel and post your question to the #formly-support channel, where we can best assist you quickly.

Powerups ⚡️

01

Automatic form progress

Add this attribute to the progress bar div that will contain the individual progress item.
data-form
=
progress

Inside this div, add another div.
This will be your step indicator (.form-progress-item); style this however you want.

Duplicate this element and add a combo class '.current'
This will be your current step indicator.
The code will calculate the number of steps in your form and create equal numbers of indicators.

Add this attribute to the step indicator without the '.current' combo class.
Note: Only add this attribute to only ONE of your progress indicators which would be the one without the current combo class.

data-form
=
progress-indicator
02

Custom form progress

Want to create custom form progress indicators? Add this attribute to each of your custom indicators.
data-form
=
custom-progress-indicator
Note:

1. Do not add the data-form=progress attribute to the parent div if you use custom indicators.

2. Ensure that the number of progress indicators is exactly the same as the number of steps in your form.

3. Give one of the custom indicators a '.current' combo class
03

Form steps (text)

Current step in form

Show the current step the user is on. Add this attribute to any text block or span
data-text
=
current-step

Total number of steps in form

Show how many steps are there in the form for good UX. Add this attribute to any text block or span
data-text
=
total-steps
04

Press "Enter" to go next

Add this attribute to the Form element.
data-enter
=
true

By default, it is set to false.

05

Press "⌘ + Enter" to submit form

Add this attribute to the Form element.
data-submit
=
true

By default, it is set to false.

06

Intro cards or steps without inputs

Add this attribute to the '.form-step-item' element.
data-card
=
true

By default, it is set to false.

07

Radio inputs

If you want users to automatically progress to the next step, add this attribute to the parent div that contains your radio inputs.
data-radio-skip
=
true
Add this attribute to customise the delay timer.
data-radio-delay
=
n
n = delay in milliseconds
08

Input validation

Required vs optional inputs

Check or uncheck the 'required' box on Webflow.

Users will not be able to progress to the next without filling out the required inputs on the current step.

Autofocus on field

Check or uncheck the 'autofocus' box on Webflow.

Users will not be able to progress to the next without filling out the required inputs on the current step.

Checkbox

If you require users to check a certain number of boxes before they can progress, add this attribute to the step div ('.form-step-item')

data-checkbox
=
n
n= minimum number of inputs to be selected

Email input

Users can't progress if they do not input a valid email address. Input needs to resemble @domain.com to be valid.

Want to reject @gmail.com emails and only allow business emails? Coming soon

Conditional Logic

Create logic flows to ask the right questions and skip the rest.