# Quick Start



{% hint style="info" %}
Latest version: **2.1.10 (3 Oct 2024)**
{% endhint %}



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

{% code title="index.html" %}
```html
<!-- Superform by Delta Clan -->
<script defer src="
https://cdn.jsdelivr.net/npm/@deltaclan/superform@2/dist/superform.js
"></script>
```
{% 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
<div sf="myForm">
  <form>
  <!-- Form steps go here -->
  </form>
</div>
```
{% endcode %}



**Webflow Example**

{% embed url="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FM7cS3KyIH9TnJs4vPGkJ%2FFormSelector.mp4?alt=media&token=b9e5fa0a-ab9c-4850-bdff-30b7e8122f76" %}

→ Read more about the [form-container](../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**

<pre class="language-html" data-title="index.html"><code class="lang-html"><strong>&#x3C;div sf="myForm">
</strong>  &#x3C;form>
    &#x3C;!-- Step 1 -->
<strong>    &#x3C;div sf-step="step1">
</strong>      &#x3C;!-- Step 1 content goes here -->
    &#x3C;/div>

    &#x3C;!-- ## OPTIONAL ## -->
    &#x3C;!-- Step 2 -->
    &#x3C;div sf-step="step2">
      &#x3C;!-- Step 2 content goes here -->
    &#x3C;/div>
  &#x3C;/form>
&#x3C;/div>

</code></pre>



**Webflow Example**

{% embed url="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2Fa78ZEdkF9n7vKigzQM28%2FStepsSelector.mp4?alt=media&token=77ea18eb-3f67-47ce-a677-acc12bf45876" %}

→ Read more about the [step-container](../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

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FBAXL9aMi8JiruCVMb6Ke%2Fimage.png?alt=media&#x26;token=3fc27a1a-7a3d-4d2f-9a53-1feae9b77078" alt=""><figcaption><p>An example of a linear 2-steps form.</p></figcaption></figure>



***

## Explore More

Start tinkering with [navigation elements](../essentials/navigation-overview) and [progress bars](../essentials/progress-bar) by exploring the _Essentials_ category.&#x20;

When you get a hang of it, here are some key pages to get you started with more advanced functionalities:

* [Animations](../global-options/animations)
* [Validation](../input-validation-and-errors/validation)
* [Error Management](../input-validation-and-errors/error-management)
* [Variables](../essentials/variables)
* [Reactivity](../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) <a href="#still-got-questions" id="still-got-questions"></a>

Check out our [faq](../additional-resources/faq "mention").

