# AJAX Form Installation

Collect submission data from your Getform form endpoint easily with AJAX while taking full control of the front-end experience.

# Fetch

If you don't want to redirect your form submitters after a submission, FetchAPI is another option we support. Fetch API is similiar 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 compability 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() function.

INFO

FetchAPI Support is available on Start and Grow plans (opens new window).

← JQuery →