How to add an attribute:

close icon
Hey! Give us some feedback here.
Forms

Form Submit

Configure options for what happens after a Webflow form submission.

4,454,005

loads per month

Form Submit
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

navigator arrow
Form
I want this
form icon

Form or Form Block

to get the custom action
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-formsubmit-element
copy icon
Value
form
copy icon
Defines the form instance. Must be added to either a Form Block or Form element.
navigator arrow
Reset Trigger
I want this
div block icon

Div Block, Text Block, Button, Link Block, or Image

to clear the Webflow form when clicked
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-formsubmit-element
copy icon
Value
reset
copy icon
This attribute is placed on an element that resets the form when clicked.

For example, place this attribute on the Submit button to reset the form immediately after form submission.

For example, place this attribute on a "Clear form" button to allow the user to manually reset the form.
navigator arrow
IX Trigger
I want this
div block icon

Div Block, Text Block, Button, Link Block, or Image

to be "clicked" after form submission to trigger a Webflow Interaction
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-formsubmit-element
copy icon
Value
ix-trigger
copy icon
This attribute is placed on an element that is programmatically "clicked" after the form submission.

This element should have a Mouse Click Webflow Interaction applied to it. When this element is "clicked" after submission, the Webflow Interaction will start its sequence.

You can keep this element hidden if you want.
navigator arrow
Option
Reset
I want to clear all inputs of the form after form submission.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-formsubmit-reset
copy icon
Value
true or DELAY_MS
copy icon
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".

Use "fs-formsubmit-reset = true" to reset the inputs immediately.

Use "fs-formsubmit-reset = 2000" to reset the inputs after 2 seconds.
Where?
This attribute should be added to the "form" element.
navigator arrow
Option
Prevent Reset
I want to prevent this input value from resetting when the form is reset.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-formsubmit-preventreset
copy icon
Value
true
copy icon
Add this option to any input or wrapper of inputs to prevent a value reset when the form is reset.

For 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.

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.
Where?
This attribute should be added to the "form" element.
navigator arrow
Option
Reload
I want to reload the page after form submission.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-formsubmit-reload
copy icon
Value
true or DELAY_MS
copy icon
Add this option to reload the page after form submission. Set to "true" or reload after a delay in milliseconds, such as "500".

Use "fs-formsubmit-reload = true" to reload the page immediately.

Use "fs-formsubmit-reload = 2000" to reload the page after 2 seconds.
Where?
This attribute should be added to the "form" element.
navigator arrow
Option
Redirect
I want to redirect the user to a different page after form submission.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-formsubmit-redirect
copy icon
Value
true or DELAY_MS
copy icon
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".

Use "fs-formsubmit-redirect = true" to redirect immediately. This is available natively with Webflow. The benefit of the redirect option is the delayed redirect.

Use "fs-formsubmit-redirect = 2000" to redirect after 2 seconds.
Where?
This attribute should be added to the "form" element.
navigator arrow
Option
Redirect URL
Defines the URL to direct the user after form submission.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-formsubmit-redirecturl
copy icon
Value
REDIRECT_URL
copy icon
Set the value of this attribute to the direct URL.

Set the redirect URL in attributes instead of natively in the Webflow form to avoid the native Webflow form behavior. Using attributes, you can programmatically use this REDIRECT_URL with the other redirect options in the configuration.
Where?
This attribute should be added to the "form" element.
navigator arrow
Option
Redirect New Tab
I want the redirect URL to open in a new tab.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-formsubmit-redirectnewtab
copy icon
Value
true
copy icon
Set this option to open a new tab after form submission. This new tab will load the redirect URL.
Where?
This attribute should be added to the "form" element.
navigator arrow
Option
Disable
I want to prevent all form submissions.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-formsubmit-disable
copy icon
Value
true
copy icon
Set this option to prevent all form submissions.
Where?
This attribute should be added to the "form" element.
navigator arrow
Option
Enhance
I want to send the data from the form action using JavaScript Fetch instead of native HTML Form submission.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-formsubmit-enhance
copy icon
Value
true
copy icon
enhance = false
- Regular Webflow form submission.
- Attributes Form Submit options (reset, redirect, reload) are triggered, if defined.

enhance = true
- Custom JavaScript form submission.
- Data is sent to the form action with JavaScript. The user still sees everything working as native, although in the background is not.
- Attributes Form Submit options (reset, redirect, reload) are triggered, if defined.

The enhance feature can:
- Prevent the form from triggering page navigation after submission.
- Programmatically send the data to the defined action endpoint using the defined HTTP method.
- Programmatically show Webflow's success/error messages accordingly.


Further explanation:

When an HTML Form is submitted, the browser navigates to the defined action through the defined HTTP method. Submitting a form will send the user to a new page (or reload the current page if no action is defined).

The native behavior can be prevented with JavaScript, which is exactly what Webflow forms do by default. If you don't specify a custom action to the form, Webflow assumes the final destination of the submission is Webflow's servers.

Webflow uses JavaScript to prevent the default HTML behavior and programmatically sends the form data to Webflow's server. After the submission, Webflow shows a success or error message. This is all with JavaScript.

When you specify a custom action, Webflow no longer runs its custom JavaScript and the form behaves as a regular HTML form.

Enhance adds this layer of JavaScript when a form is submitted. It allows us to manage form submission options (through Attributes JavaScript) when there is an action set and Webflow JavaScript does not run.
Where?
This attribute should be added to the "form" element.

Working examples

See this solution working live in this Webflow project.

Example 1
Form Submit - reset, preventreset and ix-trigger
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Copy and paste this example directly on Webflow
copy icon
Copy this example
Example 2
Form Submit - redirect and new tab redirect
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Copy and paste this example directly on Webflow
copy icon
Copy this example
Example 3
Form Submit - reload
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Copy and paste this example directly on Webflow
copy icon
Copy this example
Example 4
Form Submit - Manual reset
Thank you! Your submission has been received!
Reset
Oops! Something went wrong while submitting the form.
Copy and paste this example directly on Webflow
copy icon
Copy this example

Frequently Asked Questions

Everything you need to know about this attributes solution.

No FAQ items found yet. Join Finsweet Community on Slack if you have any question related to this solution.

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.