.svg)
Multi-forms
Add multi-step form to your webflow site with smooth navigation, validation, and conditional visibility etc. Enjoy a more interactive and user-friendly experience.
View Demo
.svg)
Install Codeblock
Enable Flowscriipt Form
Steps
Next and Prev Buttons
Submit Button
PLUGINS 🔌
Info Cards
Progress Indicators
Progress Bar
Form Step Number
Step Percentage
Inputs Validation
Email and Required Inputs
Checkbox Input
Radio Input
Conditional Visibility
Form Input Preview (Summary)
Edit Step (Jump to Specific step)
Install Codeblock
Add this script to your head or Body of your page
<!-- [Attributes by Flowscriipt] Multi-forms-->
<script src="https://s2m62v.csb.app/multi-form.js"></script>
Copy<script src="https://s2m62v.csb.app/multi-form.js"></script>
New Script
<!-- [Attributes by Flowscriipt] Multi-forms-->
<script src="https://cdn.tryflowdrive.com/multi-form.js"></script>
Copy<script src="https://cdn.tryflowdrive.com/multi-form.js"></script>
Enable Flowscriipt Forms
Add the attribute to your Form element and not the Form Block.
Add this attribute to the main form element to enable the multi-step functionality.
Name
ct-form-mode
.svg)
Value
multi-step
Identify Steps
Add this attribute to each step element in your form. For steps without any inputs (e.g., intro cards or step break cards), use this attribute.
Add this attribute to the main form element to enable the multi-step functionality.
Name
ct-form-item
Value
step
Add this attribute to the step to change the display. Use value like flex, inline-block, block etc
Name
ct-form-display
Value
flex
Next and Prev Buttons
Add this attribute to buttons to identify them as Next and Back button.
This attribute is used to identify the "Next" button in the form. Add this next button to every step
Name
ct-form-button
Value
next
This attribute is used to identify the "Back" button in the form.
Name
ct-form-button
Value
prev
Submit Button
Add your form submit button in the last Step, this will be used to submit the form.
PLUGINS 🔌
Info Cards
Add this to steps that have no inputs, eg instructional cards, guide, intro etc
Name
ct-form-card
Value
Progress Indicators
Progress Bar
Add this attribute to your div to increase in width as step progress.
Name
ct-form-progress
Value
line
Form Step Number
Add these attributes to add step numbers as it progress to your form.
Add this to your text or text span to display the total number of steps.
Name
ct-form-number
Value
total
Add this to your text or text span to display the current number of steps.
Name
ct-form-number
Value
current
Step Percentage
Add this attribute to show the current percentage based on the step.
Add this to your text or text span to display the Current Percent of steps.
Name
ct-form-percent
Value
current
Input Validation
Email & Required Inputs
Just check the required input in your Webflow. It won’t allow any incorrect email except joe@domain.com.
Checkbox Input Validation
Set a minimum of Checkboxes before going to the next step.
Add this attribute to your “step” to set the number of checkboxes that must be checked for the step to be considered valid. The Value “n” represent number e.g. 1, 2, 6 etc
Name
ct-form-checkbox
Value
n
Radio Input
Add this attribute to progress automatically radio is checked when checked
Add this attribute to the step to enable Automatic progression.
Name
ct-form-radio
Value
auto
Add this attribute to your “step” to add duration before moving to the next step. The Value “n” represent millseconds eg 1000, 2000, 3000 etc
Name
ct-form-delay
Value
n
Add this attribute to your “radio or checkbox” Label to add/remove class selected.
Name
ct-form-toggleClass
Value
your class
POWERUPS🚀
Conditional Visibility
Show an element when Radio or Checkbox is selected.
Add this attribute to your “radio or checkbox". Make sure the unique value is the same with the element you want to hide.
Name
ct-form-conditional
Value
unique value
Add this attribute to your element to hide it, and would only show when the corresponding checkbox or radio inputs with the same unique value is selected.
Name
ct-form-dependent
Value
unique value
Form Input Preview
Add this attribute to display the input field
Add this to a text or text span, to show the value of an input field or radio button.
The field name is the input name.
The field name is the input name.
Name
ct-form-field
Value
field name
NOTE: To show a preview of checkboxes inputs, you need to add div of each checkboxes element, and add the attribute to each of them with the corresponding input checkbox.
It will hide the checkboxes and only show them if they are selected.
It will hide the checkboxes and only show them if they are selected.
Edit Step
Add this to your div or link block, when clicked, navigate to a specific step in the form.
Add this attribute to your “div, text, or link block” to navigate to a specific step in the form.
The Value “n” represent the step number you want it to navigate when clicked. e.g. 1, 3 etc
The Value “n” represent the step number you want it to navigate when clicked. e.g. 1, 3 etc
Name
ct-form-edit-step
Value
n
