fs-formsubmit

Smart actions after Webflow form submission

Overview

The fs-formsubmit attribute enables powerful post-submission actions for Webflow forms, including automatic resets, redirects, page reloads, and interaction triggers.

Attribute Syntax

The attribute uses the following syntax:

fs-formsubmit-element="[element-type]"
fs-formsubmit-[setting]="[value]"

Elements

form

Defines the form element that should have post-submission actions.

<div fs-formsubmit-element="form">
  <form><!-- Form fields --></form>
</div>

reset

Defines an element that, when clicked, should reset the form.

<button fs-formsubmit-element="reset">Reset Form</button>

ix-trigger

Defines an element that should be clicked after form submission, triggering a Mouse Click interaction.

<div fs-formsubmit-element="ix-trigger"></div>

Settings

reset

Defines if the form should reset all inputs after submission.

• Set to "true" to reset automatically
• Set to a number (in milliseconds) to delay before resetting

<div 
  fs-formsubmit-element="form"
  fs-formsubmit-reset="true"
>

<!-- Reset after 2 seconds -->
<div 
  fs-formsubmit-element="form"
  fs-formsubmit-reset="2000"
>

preventreset

Defines an element (or wrapper of multiple elements) that should preserve its value when resetting the form.

<input 
  type="text" 
  name="keep-this"
  fs-formsubmit-preventreset="true"
>

reload

Defines if the form should reload the page after submission.

• Set to "true" to reload automatically
• Set to a number (in milliseconds) to delay before reloading

<div 
  fs-formsubmit-element="form"
  fs-formsubmit-reload="true"
>

redirect

Defines if the form should redirect after submission.

• Set to "true" to redirect automatically
• Set to a number (in milliseconds) to delay before redirecting
• Use with redirecturl to specify the destination

<div 
  fs-formsubmit-element="form"
  fs-formsubmit-redirect="true"
  fs-formsubmit-redirecturl="/thank-you"
>

redirecturl

Defines the URL to redirect the user after form submission.

fs-formsubmit-redirecturl="/thank-you"

redirectnewtab

Defines if the redirect should open in a new tab.

<div 
  fs-formsubmit-element="form"
  fs-formsubmit-redirect="true"
  fs-formsubmit-redirecturl="https://example.com"
  fs-formsubmit-redirectnewtab="true"
>

disable

Defines if the form should be disabled, preventing all submissions.

<div 
  fs-formsubmit-element="form"
  fs-formsubmit-disable="true"
>

enhance

Sends the form data as a custom JavaScript Fetch request instead of reloading the page.

<div 
  fs-formsubmit-element="form"
  fs-formsubmit-enhance="true"
>

Usage Examples

Basic Form Reset

<div 
  fs-formsubmit-element="form"
  fs-formsubmit-reset="true"
>
  <form>
    <input type="text" name="name" placeholder="Your name">
    <input type="email" name="email" placeholder="Your email">
    <button type="submit">Submit</button>
  </form>
</div>

How It Works

1. Listens for form submission events
2. Executes actions based on configured settings (reset, redirect, reload)
3. Triggers interactions by clicking ix-trigger elements
4. Preserves values on elements with preventreset
5. Handles timing with configurable delays for each action

The enhance setting uses the Fetch API to submit forms without page reload, enabling smoother user experiences.

When using redirect, ensure the redirecturl is properly set. The attribute will also check for Webflow’s native redirect attribute on the form element as a fallback.