Submit forms with Fetch

Overview

The Fetch API provides an interface for fetching resources (including across the network). You can use Fetch to sumbit NoCodeForm submissions which also works cross-origin.

Example

First of all, create a simple HTML form like this:

<form id="contact-us-form" method="POST">
  <input type="text" name="name" placeholder="Full Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <button type="submit">Submit</button>
</form>

Then, add the following JavaScript code to your web page to select the form, add the onSubmit event listener and submit the data:

const form = document.getElementById("contact-us-form");

form.addEventListener("submit", formSubmit);

function formSubmit(e) {
  e.preventDefault()

  const formData = new FormData();
  formData.append(
    'name',
    document.querySelector('input[name="name"]').value
  )
  formData.append(
    'email',
    document.querySelector('input[name="email"]').value
  )

  fetch("https://nocodeform.io/f/{your-form-id}",
  {
    method: "POST",
    body: formData,
  })
  .then(response => console.log(response))
  .catch(error => console.log(error))
}