Quick Start
Add the following script to the <head> section of your Webflow page or HTML file:
<!-- Superform by Delta Clan -->
<script defer src="
https://cdn.jsdelivr.net/npm/@deltaclan/superform@2/dist/superform.js
"></script>Minimal Setup
Requires:
Basic Form Container
To initialize Superform, add the sf = formName attribute to your form container element:
HTML Example
<div sf="myForm">
<form>
<!-- Form steps go here -->
</form>
</div>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
<div sf="myForm">
<form>
<!-- Step 1 -->
<div sf-step="step1">
<!-- Step 1 content goes here -->
</div>
<!-- ## OPTIONAL ## -->
<!-- Step 2 -->
<div sf-step="step2">
<!-- Step 2 content goes here -->
</div>
</form>
</div>
Webflow Example
→ Read more about the Step Container
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?
