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 Script01
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
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
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.
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.
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
Want to reject @gmail.com emails and only allow business emails? Coming soon
Education with examples
MULTI-STEP
Contact form
A stunning custom contact form that can rival some of the best no-code form builders out there (Yeap, them!)
View Cloneable
MULTI-STEP
User sign up form
Basic sign-up forms are tedious and don't convert. Multi-step forms increase landing page conversions.
View Cloneable
LOGIC
Coffee quiz
With Conditional Logic, nothing stops you from creating quizzes and fun games like online escape rooms.
Coming soon
Conditional Logic
Create logic flows to ask the right questions and skip the rest.