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

Checkbox input

If you want users to check a minimum number of checkboxes before progressing, add this attribute to the '.form-step' element.
Custom <div> attributes
data-checkbox
=
n
n = the min # of inputs must be checked
06
UX

Radio inputs

Radio input

If you want users to progress automatically to the next step, add this attribute to the element that contains your radio inputs.
Custom <div> attributes
data-radio-skip
=
true
n = delay in seconds
Add this attribute to customise the delay timer.
Custom <div> attributes
data-radio-delay
=
n
n = delay in seconds
07
UI/UX

Form step text

08

Current Step

Show the current step the user is on. Add this attribute to any text block.
Custom <div> attributes
data-text
=
current-step
n = the min # of inputs must be checked

Total Steps

Show the total number of steps in the form. Add this attribute to any text block.
Custom <div> attributes
data-text
=
total-steps
n = the min # of inputs must be checked

View full documentation

Head over to our solutions page to get the full documentation and a Webflow read-only preview demo that has all of these powerups and more!
View 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.

Pro features

for pro only 

Clickable Progress Indicators

Quickly traverse through the forms by clicking on the progress indicators.

NEW

Customisable Disable States

Giving you complete control over the disabled states of the button. Just create a combo class to style your disabled state.

NEW

FormlyUI

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

NEW

Skipping Steps

Let users skip to any part of the form or directly to the last step. Useful for Logic forms.

NEW

Country Dropdown

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

Where are you seeing this from?

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"6474d9b6-218e-a18b-c46e-2a5f4666015d","type":"Block","tag":"div","classes":["7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1bb"],"children":["6474d9b6-218e-a18b-c46e-2a5f4666015e","6474d9b6-218e-a18b-c46e-2a5f46660160","6474d9b6-218e-a18b-c46e-2a5f46660162"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","style":{"base":{"main":{"noPseudo":{"gridColumnStart":"span 1","gridColumnEnd":"span 1","gridRowStart":"span 1","gridRowEnd":"span 1"}}}},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f4666015e","type":"Block","tag":"div","classes":["7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1bc"],"children":["6474d9b6-218e-a18b-c46e-2a5f4666015f"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f4666015f","type":"HtmlEmbed","tag":"div","classes":["26e91525-3af6-597b-aafd-505303d4942a"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" class=\"iconify iconify--ph\" width=\"24\" height=\"24\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 256 256\"><path fill=\"currentColor\" d=\"M221.6 173.3A102.9 102.9 0 0 0 232 128a104.2 104.2 0 0 0-77.2-100.5h-.5A103.8 103.8 0 0 0 60.4 49l-1.3 1.2A103.9 103.9 0 0 0 128 232h2.4a104.3 104.3 0 0 0 90.6-57.4ZM216 128a89.3 89.3 0 0 1-5.5 30.7l-46.4-28.5a15.4 15.4 0 0 0-6.3-2.3l-22.8-3a16.1 16.1 0 0 0-15.3 6.8h-8.6l-3.8-7.9a16.2 16.2 0 0 0-11-8.7l-6.6-1.4l2.6-5.9a7.8 7.8 0 0 1 7.3-4.9h16.1a16.1 16.1 0 0 0 7.7-2l12.2-6.8a16.1 16.1 0 0 0 3-2.1l26.9-24.4a15.7 15.7 0 0 0 4.5-16.9a88 88 0 0 1 46 77.3Zm-176 0a87.1 87.1 0 0 1 9.5-39.7l10.4 27.9a16.1 16.1 0 0 0 11.6 10l5.5 1.2h.1l12 2.6a7.8 7.8 0 0 1 5.5 4.3l2.1 4.4a16.1 16.1 0 0 0 14.4 9h1.2l-7.7 17.2a16.1 16.1 0 0 0 2.8 17.4l16.1 17.4a8.3 8.3 0 0 1 2 6.9l-1.8 9.3A88.1 88.1 0 0 1 40 128Z\"></path></svg>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" class=\"iconify iconify--ph\" width=\"24\" height=\"24\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 256 256\"><path fill=\"currentColor\" d=\"M221.6 173.3A102.9 102.9 0 0 0 232 128a104.2 104.2 0 0 0-77.2-100.5h-.5A103.8 103.8 0 0 0 60.4 49l-1.3 1.2A103.9 103.9 0 0 0 128 232h2.4a104.3 104.3 0 0 0 90.6-57.4ZM216 128a89.3 89.3 0 0 1-5.5 30.7l-46.4-28.5a15.4 15.4 0 0 0-6.3-2.3l-22.8-3a16.1 16.1 0 0 0-15.3 6.8h-8.6l-3.8-7.9a16.2 16.2 0 0 0-11-8.7l-6.6-1.4l2.6-5.9a7.8 7.8 0 0 1 7.3-4.9h16.1a16.1 16.1 0 0 0 7.7-2l12.2-6.8a16.1 16.1 0 0 0 3-2.1l26.9-24.4a15.7 15.7 0 0 0 4.5-16.9a88 88 0 0 1 46 77.3Zm-176 0a87.1 87.1 0 0 1 9.5-39.7l10.4 27.9a16.1 16.1 0 0 0 11.6 10l5.5 1.2h.1l12 2.6a7.8 7.8 0 0 1 5.5 4.3l2.1 4.4a16.1 16.1 0 0 0 14.4 9h1.2l-7.7 17.2a16.1 16.1 0 0 0 2.8 17.4l16.1 17.4a8.3 8.3 0 0 1 2 6.9l-1.8 9.3A88.1 88.1 0 0 1 40 128Z\"></path></svg>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660160","type":"Heading","tag":"h3","classes":["7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1bd"],"children":["6474d9b6-218e-a18b-c46e-2a5f46660161"],"data":{"tag":"h3","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660161","text":true,"v":"Country with search + emoji"},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660162","type":"FormWrapper","tag":"div","classes":["7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1be"],"children":["6474d9b6-218e-a18b-c46e-2a5f46660163","6474d9b6-218e-a18b-c46e-2a5f46660165","6474d9b6-218e-a18b-c46e-2a5f46660168"],"data":{"form":{"type":"wrapper"},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":true},"visibility":{"conditions":[]}}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660163","type":"FormForm","tag":"form","classes":[],"children":["6474d9b6-218e-a18b-c46e-2a5f46660164"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"","data-redirect":"","action":"","method":"get"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660164","type":"FormSelect","tag":"select","classes":["7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1c0"],"children":[],"data":{"attr":{"id":"field-2","name":"field-2","data-name":"Field 2","required":false,"multiple":false},"form":{"type":"select","opts":[{"t":"Select Country","v":"Another option"}],"name":"Field 2"},"xattr":[{"name":"data-dropdown","value":"country"},{"name":"data-dropdown-search","value":"true"},{"name":"data-emoji","value":"true"}],"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660165","type":"FormSuccessMessage","tag":"div","classes":[],"children":["6474d9b6-218e-a18b-c46e-2a5f46660166"],"data":{"form":{"type":"msg-done"},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660166","type":"Block","tag":"div","classes":[],"children":["6474d9b6-218e-a18b-c46e-2a5f46660167"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660167","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660168","type":"FormErrorMessage","tag":"div","classes":[],"children":["6474d9b6-218e-a18b-c46e-2a5f46660169"],"data":{"form":{"type":"msg-fail"},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660169","type":"Block","tag":"div","classes":[],"children":["6474d9b6-218e-a18b-c46e-2a5f4666016a"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f4666016a","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1bb","fake":false,"type":"class","name":"formly-demo-card","namespace":"","comb":"","styleLess":"display: flex; padding-top: 34px; padding-right: 32px; padding-bottom: 34px; padding-left: 32px; flex-direction: column; align-items: flex-start; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color: hsla(182, 75.68%, 5.45%, 1.00); color: hsla(0, 0.00%, 100.00%, 1.00);","variants":{},"children":[],"createdBy":"5e9be5f24c5ff9f8b4c2a621","selector":null},{"_id":"7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1bc","fake":false,"type":"class","name":"demo-icon","namespace":"","comb":"","styleLess":"margin-bottom: 10px; padding-top: 8px; padding-right: 8px; padding-bottom: 8px; padding-left: 8px; border-top-left-radius: 999px; border-top-right-radius: 999px; border-bottom-left-radius: 999px; border-bottom-right-radius: 999px; background-color: hsla(0, 0.00%, 100.00%, 0.11); color: hsla(0, 0.00%, 100.00%, 1.00);","variants":{},"children":[],"createdBy":"5e9be5f24c5ff9f8b4c2a621","selector":null},{"_id":"26e91525-3af6-597b-aafd-505303d4942a","fake":false,"type":"class","name":"demo-html-icon","namespace":"","comb":"","styleLess":"display: flex; justify-content: center; align-items: center;","variants":{},"children":[],"createdBy":"5e9be5f24c5ff9f8b4c2a621","selector":null},{"_id":"7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1bd","fake":false,"type":"class","name":"demo-heading","namespace":"","comb":"","styleLess":"margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; font-size: 26px; font-weight: 500; letter-spacing: 0px;","variants":{},"children":[],"createdBy":"5e9be5f24c5ff9f8b4c2a621","selector":null},{"_id":"7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1be","fake":false,"type":"class","name":"demo-from","namespace":"","comb":"","styleLess":"width: 100%; margin-bottom: 0px;","variants":{},"children":[],"createdBy":"5e9be5f24c5ff9f8b4c2a621","selector":null},{"_id":"7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1c0","fake":false,"type":"class","name":"select","namespace":"","comb":"","styleLess":"width: 100%; height: 52px; margin-bottom: 0px; border-top-style: none; border-top-width: 1px; border-top-color: black; border-right-style: none; border-right-width: 1px; border-right-color: black; border-bottom-style: none; border-bottom-width: 1px; border-bottom-color: black; border-left-style: none; border-left-width: 1px; border-left-color: black; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background-color: hsla(180, 67.16%, 7.40%, 1.00); color: hsla(216, 0.00%, 100.00%, 1.00); font-size: 15px; font-weight: 400;","variants":{},"children":[],"createdBy":"5e9be5f24c5ff9f8b4c2a621","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}

NEW

URL Query Params

Auto-populate form fields on a page by adding query strings to the page URL before sending it to your contacts. Fields will populate based on the query string added.

NEW

Call Code Dropdown

Add country calling code select inputs easily with no-code. Includes flag emoji, country shorthand and the ability to search for the call code.

Calling codes + full name

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"6474d9b6-218e-a18b-c46e-2a5f4666015d","type":"Block","tag":"div","classes":["7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1bb"],"children":["6474d9b6-218e-a18b-c46e-2a5f4666015e","6474d9b6-218e-a18b-c46e-2a5f46660160","6474d9b6-218e-a18b-c46e-2a5f46660162"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","style":{"base":{"main":{"noPseudo":{"gridColumnStart":"span 1","gridColumnEnd":"span 1","gridRowStart":"span 1","gridRowEnd":"span 1"}}}},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f4666015e","type":"Block","tag":"div","classes":["7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1bc"],"children":["6474d9b6-218e-a18b-c46e-2a5f4666015f"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f4666015f","type":"HtmlEmbed","tag":"div","classes":["26e91525-3af6-597b-aafd-505303d4942a"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" class=\"iconify iconify--ph\" width=\"24\" height=\"24\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 256 256\"><path fill=\"currentColor\" d=\"M221.6 173.3A102.9 102.9 0 0 0 232 128a104.2 104.2 0 0 0-77.2-100.5h-.5A103.8 103.8 0 0 0 60.4 49l-1.3 1.2A103.9 103.9 0 0 0 128 232h2.4a104.3 104.3 0 0 0 90.6-57.4ZM216 128a89.3 89.3 0 0 1-5.5 30.7l-46.4-28.5a15.4 15.4 0 0 0-6.3-2.3l-22.8-3a16.1 16.1 0 0 0-15.3 6.8h-8.6l-3.8-7.9a16.2 16.2 0 0 0-11-8.7l-6.6-1.4l2.6-5.9a7.8 7.8 0 0 1 7.3-4.9h16.1a16.1 16.1 0 0 0 7.7-2l12.2-6.8a16.1 16.1 0 0 0 3-2.1l26.9-24.4a15.7 15.7 0 0 0 4.5-16.9a88 88 0 0 1 46 77.3Zm-176 0a87.1 87.1 0 0 1 9.5-39.7l10.4 27.9a16.1 16.1 0 0 0 11.6 10l5.5 1.2h.1l12 2.6a7.8 7.8 0 0 1 5.5 4.3l2.1 4.4a16.1 16.1 0 0 0 14.4 9h1.2l-7.7 17.2a16.1 16.1 0 0 0 2.8 17.4l16.1 17.4a8.3 8.3 0 0 1 2 6.9l-1.8 9.3A88.1 88.1 0 0 1 40 128Z\"></path></svg>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" class=\"iconify iconify--ph\" width=\"24\" height=\"24\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 256 256\"><path fill=\"currentColor\" d=\"M221.6 173.3A102.9 102.9 0 0 0 232 128a104.2 104.2 0 0 0-77.2-100.5h-.5A103.8 103.8 0 0 0 60.4 49l-1.3 1.2A103.9 103.9 0 0 0 128 232h2.4a104.3 104.3 0 0 0 90.6-57.4ZM216 128a89.3 89.3 0 0 1-5.5 30.7l-46.4-28.5a15.4 15.4 0 0 0-6.3-2.3l-22.8-3a16.1 16.1 0 0 0-15.3 6.8h-8.6l-3.8-7.9a16.2 16.2 0 0 0-11-8.7l-6.6-1.4l2.6-5.9a7.8 7.8 0 0 1 7.3-4.9h16.1a16.1 16.1 0 0 0 7.7-2l12.2-6.8a16.1 16.1 0 0 0 3-2.1l26.9-24.4a15.7 15.7 0 0 0 4.5-16.9a88 88 0 0 1 46 77.3Zm-176 0a87.1 87.1 0 0 1 9.5-39.7l10.4 27.9a16.1 16.1 0 0 0 11.6 10l5.5 1.2h.1l12 2.6a7.8 7.8 0 0 1 5.5 4.3l2.1 4.4a16.1 16.1 0 0 0 14.4 9h1.2l-7.7 17.2a16.1 16.1 0 0 0 2.8 17.4l16.1 17.4a8.3 8.3 0 0 1 2 6.9l-1.8 9.3A88.1 88.1 0 0 1 40 128Z\"></path></svg>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660160","type":"Heading","tag":"h3","classes":["7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1bd"],"children":["6474d9b6-218e-a18b-c46e-2a5f46660161"],"data":{"tag":"h3","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660161","text":true,"v":"Calling codes + full name"},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660162","type":"FormWrapper","tag":"div","classes":["7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1be"],"children":["6474d9b6-218e-a18b-c46e-2a5f46660163","6474d9b6-218e-a18b-c46e-2a5f46660165","6474d9b6-218e-a18b-c46e-2a5f46660168"],"data":{"form":{"type":"wrapper"},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":true},"visibility":{"conditions":[]}}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660163","type":"FormForm","tag":"form","classes":[],"children":["6474d9b6-218e-a18b-c46e-2a5f46660164"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"","data-redirect":"","action":"","method":"get"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660164","type":"FormSelect","tag":"select","classes":["7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1c0"],"children":[],"data":{"attr":{"id":"field-2","name":"field-2","data-name":"Field 2","required":false,"multiple":false},"form":{"type":"select","opts":[{"t":"Select Country","v":"Another option"}],"name":"Field 2"},"xattr":[{"name":"data-dropdown","value":"country-code-fullname"}],"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660165","type":"FormSuccessMessage","tag":"div","classes":[],"children":["6474d9b6-218e-a18b-c46e-2a5f46660166"],"data":{"form":{"type":"msg-done"},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660166","type":"Block","tag":"div","classes":[],"children":["6474d9b6-218e-a18b-c46e-2a5f46660167"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660167","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660168","type":"FormErrorMessage","tag":"div","classes":[],"children":["6474d9b6-218e-a18b-c46e-2a5f46660169"],"data":{"form":{"type":"msg-fail"},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f46660169","type":"Block","tag":"div","classes":[],"children":["6474d9b6-218e-a18b-c46e-2a5f4666016a"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"6474d9b6-218e-a18b-c46e-2a5f4666016a","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1bb","fake":false,"type":"class","name":"formly-demo-card","namespace":"","comb":"","styleLess":"display: flex; padding-top: 34px; padding-right: 32px; padding-bottom: 34px; padding-left: 32px; flex-direction: column; align-items: flex-start; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color: hsla(182, 75.68%, 5.45%, 1.00); color: hsla(0, 0.00%, 100.00%, 1.00);","variants":{"tiny":{"styleLess":"padding-top: 28px; padding-right: 17px; padding-bottom: 28px; padding-left: 17px;"}},"children":[],"createdBy":"5e9be5f24c5ff9f8b4c2a621","selector":null},{"_id":"7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1bc","fake":false,"type":"class","name":"demo-icon","namespace":"","comb":"","styleLess":"margin-bottom: 10px; padding-top: 8px; padding-right: 8px; padding-bottom: 8px; padding-left: 8px; border-top-left-radius: 999px; border-top-right-radius: 999px; border-bottom-left-radius: 999px; border-bottom-right-radius: 999px; background-color: hsla(0, 0.00%, 100.00%, 0.11); color: hsla(0, 0.00%, 100.00%, 1.00);","variants":{},"children":[],"createdBy":"5e9be5f24c5ff9f8b4c2a621","selector":null},{"_id":"26e91525-3af6-597b-aafd-505303d4942a","fake":false,"type":"class","name":"demo-html-icon","namespace":"","comb":"","styleLess":"display: flex; justify-content: center; align-items: center;","variants":{},"children":[],"createdBy":"5e9be5f24c5ff9f8b4c2a621","selector":null},{"_id":"7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1bd","fake":false,"type":"class","name":"demo-heading","namespace":"","comb":"","styleLess":"margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; font-size: 26px; font-weight: 500; letter-spacing: 0px;","variants":{},"children":[],"createdBy":"5e9be5f24c5ff9f8b4c2a621","selector":null},{"_id":"7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1be","fake":false,"type":"class","name":"demo-from","namespace":"","comb":"","styleLess":"width: 100%; margin-bottom: 0px;","variants":{},"children":[],"createdBy":"5e9be5f24c5ff9f8b4c2a621","selector":null},{"_id":"7862a6b4-cbf3-e5e9-bb5b-2b0fac08f1c0","fake":false,"type":"class","name":"select","namespace":"","comb":"","styleLess":"width: 100%; height: 52px; margin-bottom: 0px; border-top-style: none; border-top-width: 1px; border-top-color: black; border-right-style: none; border-right-width: 1px; border-right-color: black; border-bottom-style: none; border-bottom-width: 1px; border-bottom-color: black; border-left-style: none; border-left-width: 1px; border-left-color: black; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background-color: hsla(180, 67.16%, 7.40%, 1.00); color: hsla(216, 0.00%, 100.00%, 1.00); font-size: 15px; font-weight: 400;","variants":{},"children":[],"createdBy":"5e9be5f24c5ff9f8b4c2a621","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}

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.

Form Memory

Automatically saves user input for forms as you type and restores it once the page is reloaded.

Quiz Validation

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.

Coming soon

Logic Breadcrumbs

Display which path the user has taken on a form with logic by taking the selected radio field value.

Example:
Web design > 6-10 pages > $5000

In development

Text & Number Input Logic

Use text inputs and number inputs to determine the logic flow of the form.

In development

Access Input Data

Get and display user input data anywhere in the form for a more personalised form experience or to show a final summary before user submits the form.

In development

Multiple Success Messages

Show different success messages based on which logic branch a user went down.

In development

External or CMS Data on Select Inputs

Powerup your select inputs by pulling data from your CMS or external databases with just attributes.

In development
Formly - Create multistep forms on Webflow with no-code | Product Hunt