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

Custom Error Messages

Weighted Quiz

Form Memory

And 25+ Pro features to level your Webflow forms

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

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

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

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.

Press "⌘ + Enter " to submit

Add this attribute to the Form element.

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

Press "Enter" to progress

Add this attribute to the Form element.

Attribute
@powerup
Custom <div> attributes
data-enter
=
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}

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

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

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

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

reCAPTCHA

If you use reCAPTCHA on your forms, please add this attribute to the reCAPTCHA element

Attribute
@powerup
Custom <div> attributes
data-callback
=
recaptcha

Required inputs

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

Attribute
@powerup

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

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(){
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)
Attribute
@powerup
Custom <div> attributes
data-scroll-top
=
true
PRO

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.

PRO

Country Names dropdown

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

PRO

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

Attribute
@pro
Custom <div> attributes
data-text
=
error
Custom <div> attributes
pro-only
=
🔒
PRO

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

Solutions
@pro
Custom <div> attributes
pro-only
=
🔒
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
Custom <div> attributes
pro-only
=
🔒
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
Custom <div> attributes
pro-only
=
🔒

Remember Last step

Automatically jumps user to the last step where they left off.

Add this attribute to the Form element.

Attribute
@pro
Custom <div> attributes
data-last-step
=
true
Custom <div> attributes
pro-only
=
🔒
PRO

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.

Solutions
@pro
Custom <div> attributes
pro-only
=
🔒
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
Custom <div> attributes
pro-only
=
🔒
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
Custom <div> attributes
pro-only
=
🔒
PRO

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.

Attribute
@pro
Custom <div> attributes
data-min-character
=
n
n = minimum value
Custom <div> attributes
pro-only
=
🔒
FORMLY LOGIC

Multiple Success Messages

Display different success messages for users who took different logic paths.

Solutions
@pro
Custom <div> attributes
pro-only
=
🔒
FORMLY LOGIC

Multiple Submit Redirects

Redirect users to different links based on the branch they selected after submitting the form.

Solutions
@pro
Custom <div> attributes
pro-only
=
🔒
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
Custom <div> attributes
pro-only
=
🔒
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
Custom <div> attributes
pro-only
=
🔒
PRO

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.

Solutions
@pro
Custom <div> attributes
pro-only
=
🔒
Copied to clipboard