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

Javascript
@latest
<script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@latest/multi-step.js"></script>
Click on the code to copy to clipboard

development script

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.

Javascript
@dev
<script src="https://videsign.autocode.dev/multistep@dev/multisteps.js"></script>

Enable Formly

To enable Formly on your Webflow form, make sure to add this attribute to the Form element, not the Form Block.

Attribute
@core
Custom <div> 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

Attribute
@core
Custom <div> attributes
data-form
=
step

Submit button

Indicate your submit button using this attribute.

Only use the Form Submit Button element.

Attribute
@core
Custom <div> attributes
data-form
=
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.

Attribute
@core
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.

Attribute
@powerup
Custom <div> attributes
data-form
=
progress
Custom <div> attributes
data-form
=
progress-indicator

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.

Attribute
@powerup
Custom <div> attributes
data-form
=
custom-progress-indicator
PRO

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

Attribute
@pro
Custom <div> attributes
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.
Custom <div> attributes
data-clickable-all
=
true
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.

Intro cards or steps without inputs

Add this attribute to the '.form-step' element
that will not contain any inputs.

Attribute
@powerup
Custom <div> attributes
data-card
=
true
PRO

Remove card steps from step count and Progress indicators

Add this attribute to the 'Form' element (where you added the data-form=multistep attribute)
Attribute
@powerup
Custom <div> attributes
data-count-card
=
false

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.

Attribute
@powerup
Custom <div> attributes
data-text
=
current-step
Custom <div> attributes
data-text
=
total-steps

Press "Enter" to progress

Add this attribute to the Form element.

Attribute
@powerup
Custom <div> attributes
data-enter
=
true

Press "⌘ + Enter " to submit

Add this attribute to the Form element.

Attribute
@powerup
Custom <div> attributes
data-submit
=
true

Email validation

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.

PRO

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"
Attribute
@pro
Custom <div> attributes
data-block-domain
=
{domains}

Required inputs

Just check or uncheck the 'required' box on Webflow.

Attribute
@powerup

Radio inputs

If you want users to progress automatically to the next step, add this attribute to the element that contains your radio inputs.

Attribute
@powerup
Custom <div> attributes
data-radio-skip
=
true
Custom <div> attributes
data-radio-delay
=
n
n = delay in milliseconds

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'

Attribute
@powerup
Custom <div> attributes
data-checkbox
=
n
n= minimum number of checkboxes needed to be selected
PRO

FormlyUI

Unstyled formly form components to easily create fully functional multistep forms in minutes without all the debugging work.

PRO

FormlyLogic

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.

PRO

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.

Attribute
@pro
Custom <div> attributes
data-memory
=
true
PRO

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

Attribute
@pro
Custom <div> attributes
data-reinit
=
true
PRO

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.

Attribute
@pro
Custom <div> attributes
data-query-param
=
true
PRO

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.

Attribute
@pro
Custom <div> attributes
data-get-input
=
true
PRO

Form Reset

Add this attribute to the Submit Button element to trigger a reset after submission.

Attribute
@pro
Custom <div> attributes
data-btn
=
reset
PRO

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.

Attribute
@pro
Custom <div> attributes
data-btn
=
edit
Custom <div> attributes
data-edit-step
=
n
n = step number
PRO

Country Names dropdown

Add country select input easily with no-code. Includes flag emoji and ability to search through the select input.

PRO

Country 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.

Copied to clipboard