How to Post Custom Contact Form Data to External API in Wix?

To post custom contact form data to an external API in Wix Velo, you can use the fetch() function provided by Velo.

Here’s a step-by-step guide on how to do it:

1. Open the page where you have your contact form and add a submit button to it.
2. Turn On Developer Mode.
3. Attach an event listener to the submit button that will trigger the form submission and send the data to the external API

$w("#submitButton").onClick(() => {
  submitFormData();
});

4. In the submitFormData() function, retrieve the form data using the $w() function and store it in an object.

function submitFormData() {
  const firstName = $w("#firstNameInput").value;
  const lastName = $w("#lastNameInput").value;
  const email = $w("#emailInput").value;

  const formData = {
    firstName,
    lastName,
    email,
  };

  sendFormData(formData);
}

5. Define the sendFormData() function that will use the fetch() function to send the data to the external API. In the fetch() function, specify the URL of the API endpoint, the method of the request (POST or GET), and the headers and body of the request.

function sendFormData(formData) {
  fetch("https://externalapi.com/endpoint", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(formData),
  })
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error(error));
}

6. Replace the URL and the headers with the ones that your external API requires.

7. Test your form submission by filling in the form and clicking the submit button. If everything is set up correctly, you should see the data being sent to the external API and the response from the API being logged to the console.

That’s it! You have successfully posted custom contact form data to an external API in Wix Velo.