Question: How can I make a small change to a Webflow landing page so that a JavaScript function is triggered when the form is successfully submitted?

Published on
September 22, 2023

To make a small change to your Webflow landing page so that a JavaScript function is triggered when the form is successfully submitted, you can follow these steps:

  1. Open your Webflow project and navigate to the page where the form is located.
  2. Select the form element by clicking on it.
  3. In the right-hand panel, go to the Form Settings tab.
  4. Scroll down to the Success state section and click on "Add" next to the Run custom code option.
  5. Enter your JavaScript function code in the "Run custom code" field. This function will be triggered when the form is successfully submitted.
  6. If you haven't defined the JavaScript function yet, you can either write it directly in the "Run custom code" field or create a separate JavaScript file and include it on your page using the Custom Code section in your Webflow project settings.
  7. Save and publish your changes to see the JavaScript function being executed when the form is successfully submitted.

It's worth noting that when a form is successfully submitted, Webflow will continue to redirect to the default success page provided in the Form Settings tab. If you want to prevent this redirection or perform additional actions after executing your JavaScript function, you'll need to include relevant code within your JavaScript function.

Additionally, ensure that the JavaScript code you're using is compatible with Webflow and doesn't conflict with any built-in functionality or other elements on the page.

In summary, here's how you can trigger a JavaScript function when a form is successfully submitted on a Webflow landing page:

  1. Select the form element.
  2. Go to the Form Settings tab.
  3. Under Success state, click "Add" next to Run custom code.
  4. Enter your JavaScript function code.
  5. Save and publish your changes.