# 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, ...}

# Fetch API with reCaptcha v2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Getform | FetchAPI and reCAPTCHA v2</title>
    <script src="https://www.google.com/recaptcha/api.js"></script>
  </head>
  <body>
    <div class="g-recaptcha" data-sitekey="your-site-key"></div>
    <button id="send-button" type="button">Send</button>
    <script>
      document
        .getElementById("send-button")
        .addEventListener("click", function () {
          fetch("https://getform.io/f/{your-form-endpoint}", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              Accept: "application/json",
            },
            body: JSON.stringify({
              message: "Hello, World",
              "g-recaptcha-response": grecaptcha.getResponse(),
            }),
          })
        .then(response => console.log(response))
        .catch(error => console.log(error))
        });
    </script>
  </body>
</html>

TIP

Don't forget to change the form endpoint with yours on the fetch() function.

# JavaScript XHR

Submitting to Getform.io using Javascript XHR

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Getform | Fetch with Javascript XHR</title>
  </head>
  <body>
    <script>
      const xhr = new XMLHttpRequest();
      xhr.open("POST", "https://getform.io/f/{your-form-endpoint}");
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.setRequestHeader("Accept", "application/json");
      xhr.send(
        JSON.stringify({
          message: "Hello, World!",
        })
      );
    </script>
  </body>
</html>

TIP

Don't forget to change the form endpoint with yours on the xhr.open() function.

INFO

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