Quick Start
Latest version: 2.1.10 (3 Oct 2024)
Add the following script to the <head> section of your Webflow page or HTML file:
Minimal Setup
Requires:
Basic Form Container
To initialize Superform, add the sf = formName attribute to your form container element:
HTML Example
Webflow Example
→ Read more about the Form Container
Steps
Add the sf-step attribute to each form step. For multi-step forms, each step should have a unique name. For single-step forms, you still need to name the step to enable Superform's validation and reactivity features.
HTML Example
Webflow Example
→ Read more about the Step Container
Additional Information
Form Initialization: The
sfattribute on the form container initializes Superform for that form.Step Initialization: The
sf-stepattribute is used to define each step in the form. If multiple steps are present, Superform automatically transforms the form into a multi-step form withfadeanimation by default.
Illustration
Explore More
Start tinkering with navigation elements and progress bars by exploring the Essentials category.
When you get a hang of it, here are some key pages to get you started with more advanced functionalities:
By following these steps, you can quickly set up Superform and start building dynamic, multi-step forms with ease.
Still Got Questions?
Check out our FAQ 🚧.
Last updated
Was this helpful?
