Is it possible to have a custom form action to pass form data to a URL, while also submitting the form data from page 1 to Webflow using the default action?

TL;DR

Yes, it is possible to have a custom form action to pass form data to a URL while also submitting the form data from page 1 to Webflow using the default action.

​

To achieve this, you will need to utilize JavaScript and prevent the default form submission behavior. Instead, you can send the form data to both the desired URL and Webflow separately.

​

Here's an example of how you can accomplish this:

​

1. First, add an ID attribute to your form element in Webflow so that we can target it using JavaScript. For example, you can give it the ID "myForm".

​

2. Next, you need to write a JavaScript function that captures the form data, sends it to the desired URL, and then manually submits the form to Webflow. Here's an example of how this function could look:

​

```javascript

function handleSubmit(event) {

  event.preventDefault(); // Prevent default form submission

​

  // Get the form data

  const form = document.getElementById('myForm');

  const formData = new FormData(form);

​

  // Make a request to the custom URL

  fetch('https://your-custom-url.com', {

    method: 'POST',

    body: formData

  })

    .then(response => {

      // Handle the response from the custom URL if needed

    })

    .catch(error => {

      // Handle the error if needed

    });

​

  // Submit the form to Webflow

  form.submit();

}

```

​

3. Finally, you need to attach this function to the form's submit event. You can do this by adding an event listener in your JavaScript file or within a `<script>` tag on your Webflow page. Here's an example of how to do that:

​

```javascript

// Attach the handleSubmit function to the form's submit event

const form = document.getElementById('myForm');

form.addEventListener('submit', handleSubmit);

```

​

With this setup, when the form is submitted, the JavaScript function `handleSubmit` will be triggered. It will prevent the default form submission, send the form data to the custom URL using the Fetch API, and then submit the form to Webflow.

​

Note that you can modify the `fetch` function to match your custom URL and handle the response accordingly.

​

By following these steps, you can have a custom form action to pass form data to a URL while still submitting the form data to Webflow using the default action.

Rate this answer

Other Webflow Questions