Fetch Installation

If you don't want to redirect your form submitters after a submission, FetchAPI is another option we support. Fetch API is similar to XMLHttpRequest but this new API provides powerful features.

While setting up your Getform form endpoints keep in mind that Internet Explorer still does not have compatibility with fetch api, so you may want to think twice to use it in production.

JSON Request Using Fetch API

Assuming you have a simple HTML as follows:

<form  id="form" action="">
    <input type="text" name="name" placeholder="Name">
    <input type="email" name="email" placeholder="Email">
    <button type="submit">Send</button>
</form>

Let's make a simple request to submit above HTML formData using FetchAPI:

<script>
   var form = document.getElementById("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://getform.io/f/{your-form-endpoint}",
       {
           method: "POST",
           body: formData,
       })
       .then(response => console.log(response))
       .catch(error => console.log(error))
       }
   
</script>

Output:

{type: "cors", url: "https://getform.io/thank-you", redirected: true, status: 200, ok: true, …}

Remember to change the form endpoint with yours on the fetch().