✨ Clonables
Social
Resources
Superform Home

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:

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

Minimal Setup

Requires:

  1. Basic Form Container

  2. Steps

Basic Form Container

To initialize Superform, add the sf = formName attribute to your form container element:

HTML Example

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

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

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.

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