Reset

Reset form data & progress.

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

index.html

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

Webflow Example

<!-- 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>

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.