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. If you happen to encounter any bugs, please report them to us via our Slack channel.
The following script is solely for development and should only be used for testing or bug-fixing purposes. It is not intended for production sites. Please refrain from using it unless specifically instructed to do so for testing purposes by the Formly team.
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.
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-step' element
that will not contain any inputs.
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.
Add this attribute to the Form element.
Add this attribute to the Form element.
Just check or uncheck the 'required' box on Webflow.
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.
If you want users to progress automatically to the next step, add this attribute to the element that contains your radio inputs.
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'
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.
Unstyled formly form components to easily create fully functional multistep forms in minutes without all the debugging work.
Automatically saves user input for forms as you type and restores it once the page is reloaded.
Add this attribute to the Form element.
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
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 country select input easily with no-code. Includes flag emoji and ability to search through the select input.
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.