FormlyLogic - Add conditional logic to Webflow Forms
Custom Error Messages
Weighted Quiz
Form Memory
And 25+ Pro features to level your Webflow forms
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
To enable Formly on your Webflow form, make sure to add this attribute to the Form element, not the Form Block.
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
Indicate your submit button using this attribute.
Only use the Form Submit Button element.
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.
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.
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'
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
Add this attribute to the Form element.
Add this attribute to the Form element.
Email inputs only allow true email expression (name@realdomain.com) 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.
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.
Add this attribute to the '.form-step' element
that will not contain any inputs.
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
If you want users to progress automatically to the next step, add this attribute to the element that contains your radio inputs.
If you use reCAPTCHA on your forms, please add this attribute to the reCAPTCHA element
Just check or uncheck the 'required' box on Webflow.
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.
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(){
2 $('[data-form="multistep"]').parents().animate({ scrollTop: 0 }, 500);
3}
4$('[data-form="next-btn"]').on('click',customScrollTop)
5$('[data-form="back-btn"]').on('click',customScrollTop)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.
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
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
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.
Unstyled formly form components to easily create fully functional multistep forms in minutes without all the debugging work.
Using formlylogic, 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.
Automatically saves user input for forms as you type and restores it once the page is reloaded.
Add this attribute to the Form element.
Automatically jumps user to the last step where they left off.
Add this attribute to the Form element.
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.
Add this attribute to the Submit Button element to trigger a reset after submission.
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.
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.
Display different success messages for users who took different logic paths.
Redirect users to different links based on the branch they selected after submitting the form.
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.
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
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.