# Reset

## **Setup**

**Attribute:** `sf-reset = "true"`

**Where:** Any element within the form `success` or `error` messages.

Resets the form's data, progress and takes the user back to the first step.

**Use Cases:**

* Resetting the form after submission to allow for a new form entry without a page refresh.
* Clearing the form data and starting over from the first step.

**HTML Example**

{% code title="index.html" %}

```html
<div>
   <p>Success! If you want to go again, hit "Retry"!</p>
   <input type="reset" sf-goto="step-1" value="Reset form">
</div>
```

{% endcode %}

**Webflow Example**

```html
<!-- Anywhere within the Success or Error blocks --> 
<div>
     <p>Success! If you want to go again, hit "Retry"!</p>
     <button sf-reset="true">Retry</button>
</div>
```

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FnEpFIKL9MNWm3vRgnTXF%2Fsf-reset_simple_example.mp4?alt=media&token=c36d3da1-0ef0-411b-b18a-8c2e801b2656>" %}

{% hint style="info" %}
**Reset Before Submit**

To simulate Reset when inside the normal form flow, just use the `sf-goto` directive with native DOM element `<input type="reset">`.

**example**: `<input type="reset" sf-goto="step-1" value="Reset form">`

→ Read more about native `<input type="reset">` on MDN [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset).

{% endhint %}