Multi-step forms, now in Webflow

Gone are the days of using sliders, tabs and complex animations to create multi-step forms on Webflow. Focus on creating the form, not the code.

No sliders.

No tabs.

No code.

Setup form.
Add a script.

It is as simple as it sounds. Each step of your form should be its own element. 100% design freedom.

Copy this script to your page "Before </body> tag"

<script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@latest/multi-step.js"> </script>
Form Block
Form
form-step-wrapper
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-buttons
back-button
next-button
submit-button
Success Message
Error Message
Your name?
Your email?
How can we help you?
Form Block
Form
form-step-wrapper
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-buttons
back-button
next-button
submit-button
Success Message
Error Message
Your name?
Your email?
How can we help you?

Attribute to the Form element.

Once the script is added, we can now start adding attributes. Add this attribute to the Form element.

Custom <div> attributes
data-form
=
multistep

Add attributes to each step.

Every div block with this attribute will be taken as a step on the multi-step form. This is also the element you add any power-up attributes to.

Custom <div> attributes
data-form
=
step
Form Block
Form
form-step-wrapper
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-buttons
back-button
next-button
submit-button
Success Message
Error Message
Your name?
Your email?
How can we help you?
Form
form-step-wrapper
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-step
form-buttons
back-button
next-button
submit-button
Success Message
Error Message
Your name?
Your email?
How can we help you?

3 attributes,
3 buttons.

You can have more than one instance of the next and back buttons on the page.

Custom <div> attributes
data-form
=
back-btn
Custom <div> attributes
data-form
=
next-btn
Custom <div> attributes
data-form
=
submit-btn

Try it out yourself!

Hola! 👋🏼

Let's get to know you better!
Tell us about you!
press Enter ↵
a.
Ok ✓
press Enter ↵
b.
Ok ✓
press Enter ↵
c.
Ok ✓
press Enter ↵
c.
Ok ✓
press Enter ↵
Ok ✓
press Enter ↵
Ready to submit?
press ⌘ + Enter ↵

Wow, we didn't expect you to go this far. You must be really into multistep forms 👀
Oops! Something went wrong while submitting the form.

No code means

no compromise

UI/UX

Automatic progress navigation

Add this attribute to the element that contains the individual step indicators.
Custom <div> attributes
data-form
=
progress
Add this attribute to the progress indicator element. Add a combo class '.current' and add the current state style.
Custom <div> attributes
data-form
=
progress-indicator
01
UI/UX

Custom progress navigation

Want to create custom form progress indicators? Add this attribute to each of your custom indicators.
Custom <div> attributes
data-form
=
custom-progress-indicator
02
UI

Intro cards or steps without inputs

Add this attribute to the '.form-step' element
Custom <div> attributes
data-card
=
true
03
04
UX

Press Enter ↵ to progress

Add this attribute to the Form element.
Custom <div> attributes
data-enter
=
true
UX

Press ⌘ + Enter ↵ to submit

Add this attribute to the Form element.
Custom <div> attributes
data-submit
=
true
05
FUNCTION

Input validation

Required vs optional inputs

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

Email input

Email inputs only allow true email expression. 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.
06

Full documentation

Please check out our complete documentation for access to all of the free features and an overview of the Pro features.
Full Docs
One
more
thing
.
.
.
Coming soon

Conditional

Logic

Ask the right questions and skip the unwanted ones. Build fun games, quizzes or forms with logic on Webflow, with absolutely no code.
Added to the waitlist! You'll be the first one to know when it launches!
Oops! Something went wrong while submitting the form.

Introducing

FormlyLogic

Bringing conditional logic to Webflow form, all with no-code. You can create powerful forms and quizzes with just 2 attributes.

FAQ

Is Formly free? Do I need to sign up to use it?

Yes, Formly offers both free and paid versions.

FormlyBasic is free to use and does not require you to sign up. With FormlyBasic, you can create multistep forms directly within Webflow without any limitations.

On the other hand, FormlyPro is a paid version available at a cost of $180 per year. FormlyPro provides access to additional professional features such as FormlyLogic, Multiple Success Messages, Get Form Input Data, and 20 more features that enhance the functionality and customization options of Formly.

Whether you choose to use FormlyBasic for free or upgrade to FormlyPro for advanced features depends on your specific requirements and preferences.

Can I get a refund if I don't find what I'm looking for?

Yes, no questions asked.

Just email developer@videsigns.uk with the email used to signup for a full refund.

Which plan is right for me?

When considering which plan is right for you, Formly offers two options: a monthly plan and a yearly plan.

We recommend the yearly plan for agencies and freelancers who anticipate using Formly regularly to build multistep forms or quizzes for clients. Opting for the yearly plan provides cost savings and ensures uninterrupted access to Formly's features throughout the year.

On the other hand, if you are unsure whether Formly is the right tool for your needs or if you prefer to experiment before making a long-term commitment, the monthly plan offers flexibility. With the monthly plan, you can explore and evaluate Formly's capabilities without the need for a long-term commitment.

It's important to note that the annual plan offers a 20% discount compared to the monthly plan, making it a more cost-effective option for users who are confident in their decision to utilize Formly over an extended period.

Is Formly for beginners? Can non-technical people use it?

Formly is primarily designed as a developer tool for Webflow. While it is relatively easy to set up and use, it is important to note that Formly assumes a certain level of familiarity with Webflow and its design and development environment

In order to effectively utilise Formly, it is beneficial to have a basic understanding of how to use and build on Webflow .

While non-technical individuals may find the setup process and initial configuration of Formly manageable, it may require some level of technical proficiency or guidance to fully leverage its capabilities and customise forms according to specific requirements.

If you are a non-technical user, it may be helpful to seek assistance from a developer or someone experienced with Webflow to ensure that you can effectively utilise Formly.

Looking for a Webflow developer?
Join our amazing Slack community with over 300+ Formly users who can help you.

Does Formly integrate with Webflow Logic, Zapier, Airtable, Make and other no-code automation tools?

Yes, Formly integrates seamlessly with Webflow Logic, Zapier, Airtable, Make, and other no-code automation tools.

Since Formly is built on top of Webflow, it does not interfere with the native form functionality. This means that any integration or app that works with a regular Webflow form will continue to work when Formly is added to your website.

You can leverage the power of Webflow Logic, connect to external services through Zapier, utilize Airtable for data storage, and leverage other no-code automation tools with Formly seamlessly.

Is FormlyLogic the same as Webflow Logic?

No. Webflow Logic is an automation tools akin to Zapier, Make and Parabola. FormlyLogic allows you to add conditional logic to Webflow forms. It allows you to show or hide certain fields or sections of a form based on specific conditions or criteria.

Can I have multiple instances of Formly on one page?

Currently, it is not possible to have multiple instances of Formly on a single page.

However, you can have multiple instances of Formly throughout the same website. This means that you can have one instance of Formly per page.

Will my forms stop working when I cancel my subscription?

No, your Formly forms will continue to function even if you cancel your subscription.

Formly understands the importance of forms and ensures that they remain operational regardless of your subscription status. Form functionality is vital and will not be disrupted if you choose to cancel your subscription.

However, if you find Formly useful and believe it saves you time, it would be greatly appreciated if you consider supporting us. By supporting Formly, you gain access to new features, priority support, and help us maintain affordable pricing for everyone.

Is Formly a stand-alone form solution?

No. Formly is an extension to Webflow Forms. It is a library that allows you to create multistep forms using Webflow Forms. We are not an alternative to Webflow Forms.

Will Formly still work if I export my site?

Yes, Formly will continue to work even if you export your site from Webflow.

However, if you decide to export your site and still want to use the built-in form element, you'll need to make adjustments to your form settings. This involves connecting your form to a third-party form service that can handle and collect the form submissions for you. By integrating a third-party form service, you can ensure that your form submissions are properly managed and stored outside of Webflow.

Does Formly have access or store my form data?

No, Formly does not have access to or store your form data. As a developer tool and jQuery library, Formly's primary function is to enable developers to create multistep forms directly within Webflow. Formly does not have any mechanism to collect or retain the form data submitted by users. It solely serves as a tool for enhancing the form-building process and does not involve data storage or access.

Is there a way to submit Formly data to Airtable?

Yes. Tools like Zapier, Make, and Webhooks will all work when using Formly on your Webflow Forms.

Can Formly be used in conjunction with another form processor like Basin, Formspark or Formspree?

Yes, Formly can be used in conjunction with another form processor like Basin, Formspark, or Formspree, as long as the tool or integration works with Webflow forms.

To ensure a successful integration, it's important to carefully follow the documentation provided by the form processor you intend to use. They will typically provide instructions on how to configure their service to work with Webflow forms. By following these guidelines, you can leverage the capabilities of Formly while utilizing the backend functionality of your preferred form processor.

Product of ViDesigns