search
Superform Home

Quick Start

circle-info

Latest version: 2.1.10 (3 Oct 2024)

Add the following script to the <head> section of your Webflow page or HTML file:

index.html
<!-- Superform by Delta Clan -->
<script defer src="
https://cdn.jsdelivr.net/npm/@deltaclan/superform@2/dist/superform.js
"></script>

hashtag
Minimal Setup

Requires:

  1. Basic Form Container

  2. Steps

hashtag
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

hashtag
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

circle-info

Additional Information

  • Form Initialization: The sf attribute on the form container initializes Superform for that form.

  • Step Initialization: The sf-step attribute is used to define each step in the form. If multiple steps are present, Superform automatically transforms the form into a multi-step form with fade animation by default.

hashtag
Illustration

An example of a linear 2-steps form.

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

hashtag
Still Got Questions?​arrow-up-right

Check out our FAQ 🚧.

Last updated