","Click on the code to copy to clipboard","Core attributes","To enable Formly on your Webflow form, make sure to add this attribute to the Form element, not the Form Block.","Attribute","@core","Custom
attributes","data-form","=","multistep","Click on the attributes to copy to clipboard","Indicate steps","Each step on your form will need to be indicated using this attribute.
For steps
without any inputs (ie intro cards or step break cards) add
this combo attribute","step","Next & back buttons","To indicate your Next and Back buttons, use this attribute and utilize either the Button element or Link Blocks.
Please refrain from using the Form Submit Button for these two buttons.
It's possible to have multiple instances of this button within the form or anywhere on the page. Ensure that each button has the same attribute.","next-btn","back-btn","PRO","Go Back to Specific Step","Add this attribute to the button element to take users to a specific step.","@powerup","data-edit-step","n","n = step number","Submit button","Indicate your submit button using this attribute.
Only use the
Form Submit Button element.
","submit-btn","PRO ","Customisable disabled states","Giving you complete control over the disabled states of the button. Just create a combo class to style your disabled state.
Add a
'.disabled' combo class to your buttons and style them as you wish. ","Style selector","form-button","disabled","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 note that the submit button has to be inside the Form element.
3. You can have multiple instances of the next and back buttons (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. You can not have multiple instances of a multi-step form at the moment.","Automatic progress Indicators","Add the first attribute to the element containing the individual step indicators.
Add the second attribute to the progress indicator element. Add a combo class
'.current' and add the current state style.
","progress","progress-indicator","Checkboxes","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= minimum number of checkboxes needed to be selected","Custom progress Indicators","Add this attribute to each of your custom indicators.
Note:
1. Ensure that the number of custom indicators
indicators equal to the number of steps in your form.
2. You do not need the data-form=progress attribute if you are using custom indicators.","custom-progress-indicator","Clickable Progress indicators","Quickly traverse through the forms by clicking on the progress indicators.
Add a
'.disabled' combo
class to your indicator and style it for your disabled indicator state.
Automatic indicators: Add attributes the element that has
\"data-form=progress\" attribute
Custom indicators: Add attributes to the
parent wrapper that contains all your custom indicators
","@pro","data-clickable","true","This will
only allow previous step indicators to be clickable and the next step indicator to be clickable if the current step has no required inputs or the inputs are filled out.","data-clickable-all","This will make
every indicator clickable. The user cannot skip to the last step of the form and submit it. They will need to fill out all the required steps.","Press \"⌘ + Enter \" to submit","Add this attribute to the
Form element.
","data-submit","Press \"Enter\" to progress","data-enter","Email validation","Email inputs only allow true email expression (
[email protected]) when set to required.
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. Rejecting email domains available as a FormlyPro member.
","Rejecting email domains","Specify which email domains you don't want users to enter. Example: gmail, hotmail or disposable domains. Just add the domain names and to combine multiple, use a comma.
Add this attribute to the
Email input. ","Example to block Gmail only,
data-block-domain=gmail
Example to block Gmail, Hotmail and Outlook:
data-block-domain= \"gmail,hotmail,outlook\"
","data-block-domain","{domains}","Intro cards or steps without inputs","Add this attribute to the
'.form-step' element
that will not contain any inputs.","data-card","Remove card steps from step count and Progress indicators","Add this attribute to the 'Form' element (where you added the data-form=multistep attribute)","data-count-card","false","Phone number format","Automatically format phone number inputs to however you want.
Add this attribute to the
Phone Number input.
A number is represented using x. The number of x determines the max number of digits. You can format the number using brackets, dashes, plus, and spaces. Here are some examples:
123-456-789
data-phone-autoformat = xxx-xxx-xxxx
(12) 345 6789
data-phone-autoformat = (xx) xxx xxxx
+(44) 1234 1234 23
data-phone-autoformat = (+xx) xxxx xxxx xx
+(44)-1234-1234 23
data-phone-autoformat = (+xx)-xxxx-xxxx-xx","data-phone-autoformat","{format -pattern}","Radio inputs","If you want users to progress automatically to the next step, add this attribute to the element that contains your radio inputs.","data-radio-skip","data-radio-delay","n = delay in milliseconds","reCAPTCHA","If you use reCAPTCHA on your forms, please add this attribute to the reCAPTCHA element","data-callback","recaptcha","Required inputs","Just check or uncheck the 'required' box on Webflow.","Form step text","
Current Step
Show the current step the user is on. Add the first attribute to any text block or text span.
Total Steps
Show the total number of steps in the form. Add the second attribute to any text block or text span.
","data-text","current-step","total-steps","Scroll to top of the form","If you have a long form that requires the user to scroll down to click the next or back button and want the user to be scrolled to the top on click of the buttons.
Add this to the
Form block (where you have data-form=multistep)
If that doesn’t work, you can use this code:
","
1function customScrollTop(){\n2 $('[data-form=\"multistep\"]').parents().animate({ scrollTop: 0 }, 500);\n3}\n
4$('[data-form=\"next-btn\"]').on('click',customScrollTop)\n5$('[data-form=\"back-btn\"]').on('click',customScrollTop)","data-scroll-top","Calling code dropdown","Add country calling code select inputs easily with no-code. Includes flag emoji, country shorthand and the ability to search for the country code directly form the input.","Become a member","Feature Docs","Country Names dropdown","Add country select input easily with no-code. Includes flag emoji and ability to search through the select input.","Show a custom error message when a user tries to move to the next step without meeting the requirements.
Add this attribute to a
Div Block or Text Block","More info","error","pro-only","🔒","Dynamic Form Fields","Allow users to add multiple sets of information within a single form by dynamically adding and removing input sections.
Example:
Add another email/phone
Add another team member
Add another work experience
","Lösungen","Go to solution docs","Edit Steps","Add these attributes to the
Button element that will bring the user back to the step to edit their answers.
Note: This can be also used to bring user back to a previous step, not just to edit answers.","data-btn","edit","Unstyled formly form components to easily create fully functional multistep forms in minutes without all the debugging work.","Go to Library","Using formly
logic, you can now ask only the right questions and skip the rest, create quizzes and fun games all using Webflow and no-code! Just 2 attributes and a bit of grit, you can turn any normal form into a logic form.","Go to Feature Docs","Form memory","Automatically saves user input for forms as you type and restores it once the page is reloaded.
Add this attribute to the
Form element. ","data-memory","Remember Last step","Automatically jumps user to the last step where they left off.
Add this attribute to the
Form element. ","data-last-step","FormlyQuiz","You can show a different final result based on the user's answers.
Use cases include quizzes, personality tests, eligibility checkers, lead qualifiers or product/service recommendations.","Form Reset","Add this attribute to the
Submit Button element to trigger a reset after submission.
","reset","Get input data","Get and display all user-inputted data anywhere on the page or form by adding attributes to Text Blocks or Text Spans.
Add this attribute to the
Form element.
","data-get-input","Minimum Character","Add a minimum character validation to your inputs to ensure the input data meet this this threshold.
It works with text inputs, number fields and text areas.
Add this attribute to any
Input element. ","data-min-character","n = minimum value","FORMLY LOGIC","Multiple Success Messages","Display different success messages for users who took different logic paths.","Multiple Submit Redirects","Redirect users to different links based on the branch they selected after submitting the form.","Pre-fill inputs","Pre-fill inputs using query parameters. Useful to speed up the form-filling process for users by dynamically populating form fields with information from another page or source.
Add this attribute to the
Form element.
","Notes:
1. HTML input names are
case-sensitive. Meaning if your input name on Webflow has capital letters, your query param would need to follow that.
2. Try to avoid spaces when naming your inputs. Use dashes (-) instead.
","data-query-param","Using Webflow IX","Add this attribute to the
Form element.
Please note that this resets every interaction on the page. We only recommend using this if your form is on a dedicated page with no other Webflow IX other than just the scroll-into-view interaction","data-reinit","With weighted quiz logic, you assign a numerical value or weight to each possible answer in a multiple-choice question, and then use those weights to determine the outcome of the conditional logic rule.","Hmm.. we couldn't find what you're searching for.
Reach out to us on Slack, maybe?","Copied to clipboard"]}
Upgrade to FormlyPro
For just $18/month, you get access to all these features and more!
Use code UPGRADE10 on checkout to get a 10% discount on all plans, including the lifetime plan!
Get Flowplay+ now
FormlyLogic - Add conditional logic to Webflow Forms
And 25+ Pro features to level your Webflow forms
Note: You can click on the attributes to copy to clipboard directly.
Production
Formly leverages JsDelivr as its content delivery network to effectively distribute its JavaScript code, which serves as the core script for all client and live sites.
Please add this Before the </body> tag
<script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@latest/multi-step.js"></script>
Click on the code to copy to clipboard
Indicate steps
Each step on your form will need to be indicated using this attribute.
For steps without any inputs (ie intro cards or step break cards) add this combo attribute
Submit button
Indicate your submit button using this attribute.
Only use the Form Submit Button element.
Customisable disabled states
Giving you complete control over the disabled states of the button. Just create a combo class to style your disabled state.
Add a '.disabled' combo class to your buttons and style them as you wish.
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 note that the submit button has to be inside the Form element.
3. You can have multiple instances of the next and back buttons (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. You can not have multiple instances of a multi-step form at the moment.
Automatic progress Indicators
Add the first attribute to the element containing the individual step indicators.
Add the second attribute to the progress indicator element. Add a combo class '.current' and add the current state style.
Custom <div> attributes
data-form
=
progress-indicator
Checkboxes
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'
n= minimum number of checkboxes needed to be selected
Custom progress Indicators
Add this attribute to each of your custom indicators.
Note:
1. Ensure that the number of custom indicators indicators equal to the number of steps in your form.
2. You do not need the data-form=progress attribute if you are using custom indicators.
Custom <div> attributes
data-form
=
custom-progress-indicator
Clickable Progress indicators
Quickly traverse through the forms by clicking on the progress indicators.
Add a '.disabled' combo class to your indicator and style it for your disabled indicator state.
Automatic indicators: Add attributes the element that has "data-form=progress" attribute
Custom indicators: Add attributes to the parent wrapper that contains all your custom indicators
This will only allow previous step indicators to be clickable and the next step indicator to be clickable if the current step has no required inputs or the inputs are filled out.
This will make every indicator clickable. The user cannot skip to the last step of the form and submit it. They will need to fill out all the required steps.
Press "⌘ + Enter " to submit
Add this attribute to the Form element.
Press "Enter" to progress
Add this attribute to the Form element.
Intro cards or steps without inputs
Add this attribute to the '.form-step' element
that will not contain any inputs.
Remove card steps from step count and Progress indicators
Add this attribute to the 'Form' element (where you added the data-form=multistep attribute)
Phone number format
Automatically format phone number inputs to however you want.
Add this attribute to the Phone Number input.
A number is represented using x. The number of x determines the max number of digits. You can format the number using brackets, dashes, plus, and spaces. Here are some examples:
123-456-789
data-phone-autoformat = xxx-xxx-xxxx
(12) 345 6789
data-phone-autoformat = (xx) xxx xxxx
+(44) 1234 1234 23
data-phone-autoformat = (+xx) xxxx xxxx xx
+(44)-1234-1234 23
data-phone-autoformat = (+xx)-xxxx-xxxx-xx
Custom <div> attributes
data-phone-autoformat
=
{format -pattern}
Radio inputs
If you want users to progress automatically to the next step, add this attribute to the element that contains your radio inputs.
n = delay in milliseconds
reCAPTCHA
If you use reCAPTCHA on your forms, please add this attribute to the reCAPTCHA element
Required inputs
Just check or uncheck the 'required' box on Webflow.
Form step text
Current Step
Show the current step the user is on. Add the first attribute to any text block or text span.
Total Steps
Show the total number of steps in the form. Add the second attribute to any text block or text span.
Scroll to top of the form
If you have a long form that requires the user to scroll down to click the next or back button and want the user to be scrolled to the top on click of the buttons.
Add this to the Form block (where you have data-form=multistep)
If that doesn’t work, you can use this code:
function customScrollTop(){
$('[data-form="multistep"]').parents().animate({ scrollTop: 0 }, 500);
}
$('[data-form="next-btn"]').on('click',customScrollTop)
$('[data-form="back-btn"]').on('click',customScrollTop)
Calling code dropdown
Add country calling code select inputs easily with no-code. Includes flag emoji, country shorthand and the ability to search for the country code directly form the input.
Country Names dropdown
Add country select input easily with no-code. Includes flag emoji and ability to search through the select input.
Custom Error Messages
Show a custom error message when a user tries to move to the next step without meeting the requirements.
Add this attribute to a Div Block or Text Block
Edit Steps
Add these attributes to the Button element that will bring the user back to the step to edit their answers.
Note: This can be also used to bring user back to a previous step, not just to edit answers.
FormlyQuiz
You can show a different final result based on the user's answers.
Use cases include quizzes, personality tests, eligibility checkers, lead qualifiers or product/service recommendations.
Get input data
Get and display all user-inputted data anywhere on the page or form by adding attributes to Text Blocks or Text Spans.
Add this attribute to the Form element.
Minimum Character
Add a minimum character validation to your inputs to ensure the input data meet this this threshold.
It works with text inputs, number fields and text areas.
Add this attribute to any Input element.
Multiple Success Messages
Display different success messages for users who took different logic paths.
Multiple Submit Redirects
Redirect users to different links based on the branch they selected after submitting the form.
Using Webflow IX
Add this attribute to the Form element.
Please note that this resets every interaction on the page. We only recommend using this if your form is on a dedicated page with no other Webflow IX other than just the scroll-into-view interaction
Weighted Quiz
With weighted quiz logic, you assign a numerical value or weight to each possible answer in a multiple-choice question, and then use those weights to determine the outcome of the conditional logic rule.
Hmm.. we couldn't find what you're searching for.
Reach out to us on Slack, maybe?
Slack support