Superform by Delta Clan
✨ ClonablesSocialResourcesSuperform Home
v2
v2
  • 🏁Getting Started
    • Introduction
    • Quick Start
  • 🫀Essentials
    • Form Container
    • Step Container
    • Navigation - Overview
      • Direct
      • Logic / Conditional
      • Hook
    • Variables
      • Form Data ($f)
      • Step Index ($s)
      • Progress Percentage ($p)
      • Scoring Variables ($v)
    • Progress Bar
    • Reset
    • Radio Groups
    • Checkbox Groups
    • Cheatsheet
  • ⚙️Global Options
    • Step Delay Controls
    • Animations
      • Step Animation
      • Step Animation Duration
      • Step Animation Ease
    • Save Data & Progress
    • Pre-fill Form
    • Prevent Content Flash
    • Debug
    • Third-party Integrations
    • Cheatsheet
  • 🎛️Input Validation & Errors
    • Validation
      • length()
      • words()
      • minmax()
      • checkbox()
      • must()
      • hook()
    • Error Management
      • Automatic Error Setup
      • Manual Error Setup
  • ⚡Reactivity
    • Update Text
    • Visibility
    • Class Toggle
    • Value
    • Set Attribute
  • 🔢Score Tracking
    • Score Setup & Calculation
    • Score Ranking
  • ⌨️Accessibility
    • Enter & Backspace Bindings (↩, ⌫)
    • Checkbox & Radio Bindings
  • 🛠️Javascript SDK
    • Intro to Superform API
    • Superform Instance
    • Cheatsheet
  • 📖Additional Resources
    • WTF is an expression ? 🆕
    • Integrations
    • Tutorials
    • Changelog
    • FAQ 🚧
    • Join Discord
Powered by GitBook
On this page
  • Minimal Setup
  • Illustration
  • Explore More
  • Still Got Questions?​

Was this helpful?

  1. Getting Started

Quick Start

Last updated 6 months ago

Was this helpful?

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:

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

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.


Check out our FAQ 🚧.

Start tinkering with and by exploring the Essentials category.

Still Got Questions?

🏁
navigation elements
progress bars
Animations
Validation
Error Management
Variables
Reactivity
​
Basic Form Container
Steps
An example of a linear 2-steps form.