AttRibutes
Form Submit
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

Form Submit

Customize what happens after a Webflow form submission.

Watch a quick tutorial

Form Submit • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes

Form

Add to Form of Form Block

fs-formsubmit-element
=
"
form
"

Reset Trigger

Add to Div Block, Text Block, Button, Link Block, Image

fs-formsubmit-element
=
"
reset
"

IX Trigger

Add to Div Block, Text Block, Button, Link Block, Image

fs-formsubmit-element
=
"
ix-trigger
"

Optional attributes

Reset

Add to element with fs-formsubmit-element="form"

fs-formsubmit-reset
=
"
true or DELAY_MS
"

Prevent Reset

Add to element with fs-formsubmit-element="form"

fs-formsubmit-preventreset
=
"
true
"

Reload

Add to element with fs-formsubmit-element="form"

true or DELAY_MS
Copy value

Redirect

Add to element with fs-formsubmit-element="form"

fs-formsubmit-redirect
=
"
true or DELAY_MS
"

Redirect URL

Add to element with fs-formsubmit-element="form"

fs-formsubmit-redirecturl
=
"
REDIRECT_URL
"

Redirect New Tab

Add to element with fs-formsubmit-element="form"

fs-formsubmit-redirectnewtab
=
"
true
"

Disable

Add to element with fs-formsubmit-element="form"

fs-formsubmit-disable
=
"
true
"

Enhance

Add to element with fs-formsubmit-element="form"

fs-formsubmit-enhance
=
"
true
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-formsubmit
></script>

Copy Script
2

Choose the method you want

Trigger Interaction
Redirect User
Reload Page
Manual Reset Form
3

Add these required attributes to the elements

Form

Define which form will get the custom action
fs-formsubmit-element
=
"
form
"

This attribute must be assigned to either a Form Block or a Form element to define the form instance.

Add this attribute:
Name
fs-formsubmit-element
Copy
Value
form
Copy
Add it to those type(s) of element(s):
Form Block
Form

Interaction Trigger

Element that triggers a Webflow interaction after form submission
fs-formsubmit-element
=
"
ix-trigger
"

Place this attribute on an element designed to be programmatically "clicked" following form submission.

This element must have a Mouse Click Webflow Interaction set up.

Once "clicked" post-submission, the Webflow Interaction will initiate its sequence. The element can be kept hidden if desired.

Add this attribute:
Name
fs-formsubmit-element
Copy
Value
ix-trigger
Copy
Add it to those type(s) of element(s):
Div Block
Text Block
Button
Link Block
Image
4

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

elements

Reset Trigger

Defines element that will clear the Form when clicked
fs-formsubmit-element
=
"
reset
"

This attribute is placed on an element that resets the form when clicked.

Add this attribute:
Name
fs-formsubmit-element
Copy
Value
reset
Copy
Add it to those type(s) of element(s):
Div Block
Text Block
Button
Link Block
Image
EXAMPLE

Place this attribute on the Submit button to reset the form immediately after form submission.
Place this attribute on a "Clear form" button to allow the user to manually reset the form.

Optional

Add more

settings

Reset after submission

Clear all inputs of the form after frorm submission
fs-formsubmit-reset
=
"
true or DELAY_MS
"

Add this option to reset the value of each input after form submission. Set to "true" or reset after a delay in milliseconds, such as "500".

Add this attribute:
Name
fs-formsubmit-reset
Copy
Value
true or DELAY_MS
Copy
Example:
fs-formsubmit-reset = "true"
fs-formsubmit-reset = "2000"
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Prevent reset

Keep some or all input values of the form after frorm submission
fs-formsubmit-preventreset
=
"
true
"

Add this option to any input or wrapper of inputs to prevent a value reset when the form is reset.

Add this attribute:
Name
fs-formsubmit-preventreset
Copy
Value
true
Copy
Add it to those type(s) of element(s):
Form
Input
Select Field
Text Area
script icon
Script tag
?
EXAMPLE

If expecting multiple submissions from a single user, you may want to reset all inputs on the form except Name and Email.

The user will use the same Name and Email for each recurring submission, and you want to prevent the reset of these two inputs.

NOTE

Group of inputs:

‍This attribute can be applied individually to any amount of inputs in the form.

It can also be applied to a parent wrapper, like a Div Block. Each input inside the Div Block will have preventreset applied to it.

Reload

Reload the page after submission
fs-formsubmit-reload
=
"
true or DELAY_MS
"

Add this option to reload the page after form submission. Set to "true" or reload after a delay in milliseconds, such as "500".

Add this attribute:
Name
fs-formsubmit-reload
Copy
Value
true or DELAY_MS
Copy
Example:
fs-formsubmit-reload = "true"
fs-formsubmit-reload = "2000"
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Redirect after submission

Redirect the user to another page after form submission
fs-formsubmit-redirect
=
"
true or DELAY_MS
"

Add this option to redirect to a different page after form submission. Set to "true" or reload after a delay in milliseconds, such as "500".

This is available natively with Webflow. The benefit of the redirect option is the delayed redirect.

Add this attribute:
Name
fs-formsubmit-redirect
Copy
Value
true or DELAY_MS
Copy
Example:
fs-formsubmit-redirect = "true"
fs-formsubmit-redirect = "2000"
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Redirect URL

Defines a URL to redirect the user after form submission
fs-formsubmit-redirecturl
=
"
REDIRECT_URL
"

Assign this attribute's value to the direct URL.

To bypass the native Webflow form behavior, specify the redirect URL in attributes. This approach allows you to programmatically use the REDIRECT_URL alongside other redirect options within the configuration.

Add this attribute:
Name
fs-formsubmit-redirecturl
Copy
Value
REDIRECT_URL
Copy
Example:
fs-formsubmit-redirecturl = "finsweet.com/attributes"
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Redirect new tab

Open the redirect URL in a new tab
fs-formsubmit-redirectnewtab
=
"
true
"

Set this option to open a new tab after form submission. This new tab will load the redirect URL.

Add this attribute:
Name
fs-formsubmit-reset
Copy
Value
true or DELAY_MS
Copy
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Disable

Prevent all form submissions
fs-formsubmit-disable
=
"
true
"

Set this option to prevent all form submissions.

Add this attribute:
Name
fs-formsubmit-disable
Copy
Value
true
Copy
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Enhance

Submit form data with JavaScript Fetch
fs-formsubmit-enhance
=
"
true
"

Send the data from the form action using JavaScript Fetch instead of native HTML Form submission

enhance = false

  • This results in a standard Webflow form submission.
  • Form Submit options from Attributes (reset, redirect, reload) are activated if specified.

enhance = true

  • Enables a custom JavaScript form submission.
  • Data is sent to the form's action URL using JavaScript, maintaining the appearance of native behavior to the user, though the process occurs in the background.
  • Form Submit options from Attributes (reset, redirect, reload) are activated if specified.

The enhance feature allows for:

  • Preventing the form from causing page navigation upon submission.
  • Sending the data programmatically to the specified action endpoint using the defined HTTP method.
  • Displaying Webflow's success/error messages programmatically as appropriate.
Add this attribute:
Name
fs-formsubmit-enhance
Copy
Value
true
Copy
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?
NOTE

When a form is submitted in HTML, the browser typically navigates to a page specified in the form's action attribute via the specified HTTP method. This action sends the user to a new page or reloads the current page if no action is defined. However, this default behavior can be overridden with JavaScript, which is precisely what Webflow does by default. Without a custom action specified, Webflow assumes the form will be submitted to its servers.

Using JavaScript, Webflow prevents the standard HTML form behavior, sending the form data to its servers programmatically. Following the submission, Webflow displays either a success or an error message, all handled through JavaScript.

Specifying a custom action in Webflow deactivates its JavaScript handling, and the form reverts to behaving like a standard HTML form.

Enhance introduces an additional layer of JavaScript upon form submission. It provides control over form submission options (via Attributes JavaScript) in cases where a custom action is defined and Webflow's default JavaScript handling is bypassed.

Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-formsubmit-instance
=
"
IDENTIFIER
"

If you wish to create multiple instances of this solution on the same page, please follow the steps below:

  1. Select a wrapper parent that contains all the elements of an instance.
  2. Add an -instance attribute to it, with a unique value.
  3. Repeat for every instance.
Add this attribute:
Name
fs-formsubmit-instance
Copy
Value
IDENTIFIER
Copy
Examples:
fs-formsubmit-instance = "1"
fs-formsubmit-instance = "2"
fs-formsubmit-instance = "blog"
fs-formsubmit-instance = "team"
Learn more ways to set up multiple instances and how it works
3

Add these required attributes to the elements

Form

Define which form will get the custom action
fs-formsubmit-element
=
"
form
"

This attribute must be assigned to either a Form Block or a Form element to define the form instance.

Add this attribute:
Name
fs-formsubmit-element
Copy
Value
form
Copy
Add it to those type(s) of element(s):
Form Block
Form

Redirect after submission

Redirect the user to another page after form submission
fs-formsubmit-redirect
=
"
true or DELAY_MS
"

Add this option to redirect to a different page after form submission. Set to "true" or reload after a delay in milliseconds, such as "500".

This is available natively with Webflow. The benefit of the redirect option is the delayed redirect.

Add this attribute:
Name
fs-formsubmit-redirect
Copy
Value
true or DELAY_MS
Copy
Example:
fs-formsubmit-redirect = "true"
fs-formsubmit-redirect = "2000"
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Redirect URL

Defines a URL to redirect the user after form submission
fs-formsubmit-redirecturl
=
"
REDIRECT_URL
"

Assign this attribute's value to the direct URL.

To bypass the native Webflow form behavior, specify the redirect URL in attributes. This approach allows you to programmatically use the REDIRECT_URL alongside other redirect options within the configuration.

Add this attribute:
Name
fs-formsubmit-redirecturl
Copy
Value
REDIRECT_URL
Copy
Example:
fs-formsubmit-redirecturl = "finsweet.com/attributes"
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?
4

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

elements

Interaction Trigger

Element that triggers a Webflow interaction after form submission
fs-formsubmit-element
=
"
ix-trigger
"

Place this attribute on an element designed to be programmatically "clicked" following form submission.

This element must have a Mouse Click Webflow Interaction set up.

Once "clicked" post-submission, the Webflow Interaction will initiate its sequence. The element can be kept hidden if desired.

Add this attribute:
Name
fs-formsubmit-element
Copy
Value
ix-trigger
Copy
Add it to those type(s) of element(s):
Div Block
Text Block
Button
Link Block
Image
Optional

Add more

settings

Redirect new tab

Open the redirect URL in a new tab
fs-formsubmit-redirectnewtab
=
"
true
"

Set this option to open a new tab after form submission. This new tab will load the redirect URL.

Add this attribute:
Name
fs-formsubmit-reset
Copy
Value
true or DELAY_MS
Copy
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Reset after submission

Clear all inputs of the form after frorm submission
fs-formsubmit-reset
=
"
true or DELAY_MS
"

Add this option to reset the value of each input after form submission. Set to "true" or reset after a delay in milliseconds, such as "500".

Add this attribute:
Name
fs-formsubmit-reset
Copy
Value
true or DELAY_MS
Copy
Example:
fs-formsubmit-reset = "true"
fs-formsubmit-reset = "2000"
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Prevent reset

Keep some or all input values of the form after frorm submission
fs-formsubmit-preventreset
=
"
true
"

Add this option to any input or wrapper of inputs to prevent a value reset when the form is reset.

Add this attribute:
Name
fs-formsubmit-preventreset
Copy
Value
true
Copy
Add it to those type(s) of element(s):
Form
Input
Select Field
Text Area
script icon
Script tag
?
EXAMPLE

If expecting multiple submissions from a single user, you may want to reset all inputs on the form except Name and Email.

The user will use the same Name and Email for each recurring submission, and you want to prevent the reset of these two inputs.

NOTE

Group of inputs:

‍This attribute can be applied individually to any amount of inputs in the form.

It can also be applied to a parent wrapper, like a Div Block. Each input inside the Div Block will have preventreset applied to it.

Reload

Reload the page after submission
fs-formsubmit-reload
=
"
true or DELAY_MS
"

Add this option to reload the page after form submission. Set to "true" or reload after a delay in milliseconds, such as "500".

Add this attribute:
Name
fs-formsubmit-reload
Copy
Value
true or DELAY_MS
Copy
Example:
fs-formsubmit-reload = "true"
fs-formsubmit-reload = "2000"
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Disable

Prevent all form submissions
fs-formsubmit-disable
=
"
true
"

Set this option to prevent all form submissions.

Add this attribute:
Name
fs-formsubmit-disable
Copy
Value
true
Copy
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Enhance

Submit form data with JavaScript Fetch
fs-formsubmit-enhance
=
"
true
"

Send the data from the form action using JavaScript Fetch instead of native HTML Form submission

enhance = false

  • This results in a standard Webflow form submission.
  • Form Submit options from Attributes (reset, redirect, reload) are activated if specified.

enhance = true

  • Enables a custom JavaScript form submission.
  • Data is sent to the form's action URL using JavaScript, maintaining the appearance of native behavior to the user, though the process occurs in the background.
  • Form Submit options from Attributes (reset, redirect, reload) are activated if specified.

The enhance feature allows for:

  • Preventing the form from causing page navigation upon submission.
  • Sending the data programmatically to the specified action endpoint using the defined HTTP method.
  • Displaying Webflow's success/error messages programmatically as appropriate.
Add this attribute:
Name
fs-formsubmit-enhance
Copy
Value
true
Copy
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?
NOTE

When a form is submitted in HTML, the browser typically navigates to a page specified in the form's action attribute via the specified HTTP method. This action sends the user to a new page or reloads the current page if no action is defined. However, this default behavior can be overridden with JavaScript, which is precisely what Webflow does by default. Without a custom action specified, Webflow assumes the form will be submitted to its servers.

Using JavaScript, Webflow prevents the standard HTML form behavior, sending the form data to its servers programmatically. Following the submission, Webflow displays either a success or an error message, all handled through JavaScript.

Specifying a custom action in Webflow deactivates its JavaScript handling, and the form reverts to behaving like a standard HTML form.

Enhance introduces an additional layer of JavaScript upon form submission. It provides control over form submission options (via Attributes JavaScript) in cases where a custom action is defined and Webflow's default JavaScript handling is bypassed.

Multiple instances of this Solution on the same page

Most Attributes Solutions can work several times at once on a page.

Some do this automatically, but this Solution needs special settings with the -instance custom attributes.

Learn how to set up instances, the same method is used for any Solution that needs specific settings to run more than once on a page.

Learn how to use instances
3

Add these required attributes to the elements

Form

Define which form will get the custom action
fs-formsubmit-element
=
"
form
"

This attribute must be assigned to either a Form Block or a Form element to define the form instance.

Add this attribute:
Name
fs-formsubmit-element
Copy
Value
form
Copy
Add it to those type(s) of element(s):
Form Block
Form

Reload

Reload the page after submission
fs-formsubmit-reload
=
"
true or DELAY_MS
"

Add this option to reload the page after form submission. Set to "true" or reload after a delay in milliseconds, such as "500".

Add this attribute:
Name
fs-formsubmit-reload
Copy
Value
true or DELAY_MS
Copy
Example:
fs-formsubmit-reload = "true"
fs-formsubmit-reload = "2000"
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?
4

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

elements

Interaction Trigger

Element that triggers a Webflow interaction after form submission
fs-formsubmit-element
=
"
ix-trigger
"

Place this attribute on an element designed to be programmatically "clicked" following form submission.

This element must have a Mouse Click Webflow Interaction set up.

Once "clicked" post-submission, the Webflow Interaction will initiate its sequence. The element can be kept hidden if desired.

Add this attribute:
Name
fs-formsubmit-element
Copy
Value
ix-trigger
Copy
Add it to those type(s) of element(s):
Div Block
Text Block
Button
Link Block
Image
Optional

Add more

settings

Prevent reset

Keep some or all input values of the form after frorm submission
fs-formsubmit-preventreset
=
"
true
"

Add this option to any input or wrapper of inputs to prevent a value reset when the form is reset.

Add this attribute:
Name
fs-formsubmit-preventreset
Copy
Value
true
Copy
Add it to those type(s) of element(s):
Form
Input
Select Field
Text Area
script icon
Script tag
?
EXAMPLE

If expecting multiple submissions from a single user, you may want to reset all inputs on the form except Name and Email.

The user will use the same Name and Email for each recurring submission, and you want to prevent the reset of these two inputs.

NOTE

Group of inputs:

‍This attribute can be applied individually to any amount of inputs in the form.

It can also be applied to a parent wrapper, like a Div Block. Each input inside the Div Block will have preventreset applied to it.

Redirect after submission

Redirect the user to another page after form submission
fs-formsubmit-redirect
=
"
true or DELAY_MS
"

Add this option to redirect to a different page after form submission. Set to "true" or reload after a delay in milliseconds, such as "500".

This is available natively with Webflow. The benefit of the redirect option is the delayed redirect.

Add this attribute:
Name
fs-formsubmit-redirect
Copy
Value
true or DELAY_MS
Copy
Example:
fs-formsubmit-redirect = "true"
fs-formsubmit-redirect = "2000"
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Redirect URL

Defines a URL to redirect the user after form submission
fs-formsubmit-redirecturl
=
"
REDIRECT_URL
"

Assign this attribute's value to the direct URL.

To bypass the native Webflow form behavior, specify the redirect URL in attributes. This approach allows you to programmatically use the REDIRECT_URL alongside other redirect options within the configuration.

Add this attribute:
Name
fs-formsubmit-redirecturl
Copy
Value
REDIRECT_URL
Copy
Example:
fs-formsubmit-redirecturl = "finsweet.com/attributes"
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Redirect new tab

Open the redirect URL in a new tab
fs-formsubmit-redirectnewtab
=
"
true
"

Set this option to open a new tab after form submission. This new tab will load the redirect URL.

Add this attribute:
Name
fs-formsubmit-reset
Copy
Value
true or DELAY_MS
Copy
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Disable

Prevent all form submissions
fs-formsubmit-disable
=
"
true
"

Set this option to prevent all form submissions.

Add this attribute:
Name
fs-formsubmit-disable
Copy
Value
true
Copy
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Enhance

Submit form data with JavaScript Fetch
fs-formsubmit-enhance
=
"
true
"

Send the data from the form action using JavaScript Fetch instead of native HTML Form submission

enhance = false

  • This results in a standard Webflow form submission.
  • Form Submit options from Attributes (reset, redirect, reload) are activated if specified.

enhance = true

  • Enables a custom JavaScript form submission.
  • Data is sent to the form's action URL using JavaScript, maintaining the appearance of native behavior to the user, though the process occurs in the background.
  • Form Submit options from Attributes (reset, redirect, reload) are activated if specified.

The enhance feature allows for:

  • Preventing the form from causing page navigation upon submission.
  • Sending the data programmatically to the specified action endpoint using the defined HTTP method.
  • Displaying Webflow's success/error messages programmatically as appropriate.
Add this attribute:
Name
fs-formsubmit-enhance
Copy
Value
true
Copy
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?
NOTE

When a form is submitted in HTML, the browser typically navigates to a page specified in the form's action attribute via the specified HTTP method. This action sends the user to a new page or reloads the current page if no action is defined. However, this default behavior can be overridden with JavaScript, which is precisely what Webflow does by default. Without a custom action specified, Webflow assumes the form will be submitted to its servers.

Using JavaScript, Webflow prevents the standard HTML form behavior, sending the form data to its servers programmatically. Following the submission, Webflow displays either a success or an error message, all handled through JavaScript.

Specifying a custom action in Webflow deactivates its JavaScript handling, and the form reverts to behaving like a standard HTML form.

Enhance introduces an additional layer of JavaScript upon form submission. It provides control over form submission options (via Attributes JavaScript) in cases where a custom action is defined and Webflow's default JavaScript handling is bypassed.

Multiple instances of this Solution on the same page

Most Attributes Solutions can work several times at once on a page.

Some do this automatically, but this Solution needs special settings with the -instance custom attributes.

Learn how to set up instances, the same method is used for any Solution that needs specific settings to run more than once on a page.

Learn how to use instances
3

Add these required attributes to the elements

Form

Define which form will get the custom action
fs-formsubmit-element
=
"
form
"

This attribute must be assigned to either a Form Block or a Form element to define the form instance.

Add this attribute:
Name
fs-formsubmit-element
Copy
Value
form
Copy
Add it to those type(s) of element(s):
Form Block
Form

Reset Trigger

Defines element that will clear the Form when clicked
fs-formsubmit-element
=
"
reset
"

This attribute is placed on an element that resets the form when clicked.

Add this attribute:
Name
fs-formsubmit-element
Copy
Value
reset
Copy
Add it to those type(s) of element(s):
Div Block
Text Block
Button
Link Block
Image
EXAMPLE

Place this attribute on the Submit button to reset the form immediately after form submission.
Place this attribute on a "Clear form" button to allow the user to manually reset the form.

4

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

elements

Interaction Trigger

Element that triggers a Webflow interaction after form submission
fs-formsubmit-element
=
"
ix-trigger
"

Place this attribute on an element designed to be programmatically "clicked" following form submission.

This element must have a Mouse Click Webflow Interaction set up.

Once "clicked" post-submission, the Webflow Interaction will initiate its sequence. The element can be kept hidden if desired.

Add this attribute:
Name
fs-formsubmit-element
Copy
Value
ix-trigger
Copy
Add it to those type(s) of element(s):
Div Block
Text Block
Button
Link Block
Image
Optional

Add more

settings

Prevent reset

Keep some or all input values of the form after frorm submission
fs-formsubmit-preventreset
=
"
true
"

Add this option to any input or wrapper of inputs to prevent a value reset when the form is reset.

Add this attribute:
Name
fs-formsubmit-preventreset
Copy
Value
true
Copy
Add it to those type(s) of element(s):
Form
Input
Select Field
Text Area
script icon
Script tag
?
EXAMPLE

If expecting multiple submissions from a single user, you may want to reset all inputs on the form except Name and Email.

The user will use the same Name and Email for each recurring submission, and you want to prevent the reset of these two inputs.

NOTE

Group of inputs:

‍This attribute can be applied individually to any amount of inputs in the form.

It can also be applied to a parent wrapper, like a Div Block. Each input inside the Div Block will have preventreset applied to it.

Redirect after submission

Redirect the user to another page after form submission
fs-formsubmit-redirect
=
"
true or DELAY_MS
"

Add this option to redirect to a different page after form submission. Set to "true" or reload after a delay in milliseconds, such as "500".

This is available natively with Webflow. The benefit of the redirect option is the delayed redirect.

Add this attribute:
Name
fs-formsubmit-redirect
Copy
Value
true or DELAY_MS
Copy
Example:
fs-formsubmit-redirect = "true"
fs-formsubmit-redirect = "2000"
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Redirect URL

Defines a URL to redirect the user after form submission
fs-formsubmit-redirecturl
=
"
REDIRECT_URL
"

Assign this attribute's value to the direct URL.

To bypass the native Webflow form behavior, specify the redirect URL in attributes. This approach allows you to programmatically use the REDIRECT_URL alongside other redirect options within the configuration.

Add this attribute:
Name
fs-formsubmit-redirecturl
Copy
Value
REDIRECT_URL
Copy
Example:
fs-formsubmit-redirecturl = "finsweet.com/attributes"
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Redirect new tab

Open the redirect URL in a new tab
fs-formsubmit-redirectnewtab
=
"
true
"

Set this option to open a new tab after form submission. This new tab will load the redirect URL.

Add this attribute:
Name
fs-formsubmit-reset
Copy
Value
true or DELAY_MS
Copy
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Disable

Prevent all form submissions
fs-formsubmit-disable
=
"
true
"

Set this option to prevent all form submissions.

Add this attribute:
Name
fs-formsubmit-disable
Copy
Value
true
Copy
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?

Enhance

Submit form data with JavaScript Fetch
fs-formsubmit-enhance
=
"
true
"

Send the data from the form action using JavaScript Fetch instead of native HTML Form submission

enhance = false

  • This results in a standard Webflow form submission.
  • Form Submit options from Attributes (reset, redirect, reload) are activated if specified.

enhance = true

  • Enables a custom JavaScript form submission.
  • Data is sent to the form's action URL using JavaScript, maintaining the appearance of native behavior to the user, though the process occurs in the background.
  • Form Submit options from Attributes (reset, redirect, reload) are activated if specified.

The enhance feature allows for:

  • Preventing the form from causing page navigation upon submission.
  • Sending the data programmatically to the specified action endpoint using the defined HTTP method.
  • Displaying Webflow's success/error messages programmatically as appropriate.
Add this attribute:
Name
fs-formsubmit-enhance
Copy
Value
true
Copy
Add it to any element with
fs-formsubmit-element = "form"
script icon
Script tag
?
NOTE

When a form is submitted in HTML, the browser typically navigates to a page specified in the form's action attribute via the specified HTTP method. This action sends the user to a new page or reloads the current page if no action is defined. However, this default behavior can be overridden with JavaScript, which is precisely what Webflow does by default. Without a custom action specified, Webflow assumes the form will be submitted to its servers.

Using JavaScript, Webflow prevents the standard HTML form behavior, sending the form data to its servers programmatically. Following the submission, Webflow displays either a success or an error message, all handled through JavaScript.

Specifying a custom action in Webflow deactivates its JavaScript handling, and the form reverts to behaving like a standard HTML form.

Enhance introduces an additional layer of JavaScript upon form submission. It provides control over form submission options (via Attributes JavaScript) in cases where a custom action is defined and Webflow's default JavaScript handling is bypassed.

Multiple instances of this Solution on the same page

Most Attributes Solutions can work several times at once on a page.

Some do this automatically, but this Solution needs special settings with the -instance custom attributes.

Learn how to set up instances, the same method is used for any Solution that needs specific settings to run more than once on a page.

Learn how to use instances

Still need help?

Get Support