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