# Quick Start {% hint style="info" %} Latest version: **2.1.10 (3 Oct 2024)** {% endhint %} Add the following script to the `` section of your Webflow page or HTML file: {% code title="index.html" %} ```html ``` {% endcode %} *** ## Minimal Setup Requires: 1. [Basic Form Container](#basic-form-container) 2. [Steps](#steps) #### Basic Form Container To initialize Superform, add the `sf = formName` attribute to your form container element: **HTML Example** {% code title="index.html" %} ```html
``` {% endcode %} **Webflow Example** {% embed url="" %} → Read more about the [form-container](https://deltaclan.gitbook.io/superform/essentials/form-container "mention") #### 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** {% embed url="" %} → Read more about the [step-container](https://deltaclan.gitbook.io/superform/essentials/step-container "mention") {% hint style="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. {% endhint %} *** ## Illustration

An example of a linear 2-steps form.

*** ## Explore More Start tinkering with [navigation elements](https://deltaclan.gitbook.io/superform/essentials/navigation-overview) and [progress bars](https://deltaclan.gitbook.io/superform/essentials/progress-bar) 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: * [Animations](https://deltaclan.gitbook.io/superform/global-options/animations) * [Validation](https://deltaclan.gitbook.io/superform/input-validation-and-errors/validation) * [Error Management](https://deltaclan.gitbook.io/superform/input-validation-and-errors/error-management) * [Variables](https://deltaclan.gitbook.io/superform/essentials/variables) * [Reactivity](https://deltaclan.gitbook.io/superform/reactivity) By following these steps, you can quickly set up Superform and start building dynamic, multi-step forms with ease. *** ## Still Got Questions?[​](https://vuejs.org/guide/introduction.html#still-got-questions) Check out our [faq](https://deltaclan.gitbook.io/superform/additional-resources/faq "mention").