# Sending Submissions with AJAX

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

# Using Fetch

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 method="POST" accept-charset="UTF-8" id="form" enctype="multipart/form-data">
    <input type="email" name="email" placeholder="Your email">
    <input type="text" name="name" placeholder="Your name">
    <input type="file" name="file">
    <button type="submit">Send</button>
</form>

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

<script>
    const form = document.getElementById("form");
    form.addEventListener("submit", formSubmit);

    function formSubmit(e) {
        e.preventDefault();
        const formData = new FormData(e.target);

        fetch("https://getform.io/f/YOUR_FORM_ID", {
            method: "POST",
            body: formData,
            headers: {
                "Accept": "application/json",
            },
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`An error occurred: ${response.statusText}`);
            }
            console.log(response);
        })
        .catch(error => {
            console.log(error);
        });
    }
</script>

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

# Fetch API with reCaptcha v3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Getform | FetchAPI and reCAPTCHA v3</title>
</head>
<body>
<form  id="form" action="">
    <input type="text" name="name" placeholder="Name">
    <input type="email" name="email" placeholder="Email">
    <button type="submit">Send</button>
</form>
​
<script src="https://www.google.com/recaptcha/api.js?render={your-site-key}"></script>
​
<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
        )
        grecaptcha.ready(function() {
            // do request for recaptcha token
            // response is promise with passed token
            grecaptcha.execute('{your-site-key}', {action: 'contact'}).then(function(token) {
                // add token to form
                formData.append('g-recaptcha-response', token)
                fetch("https://getform.io/f/{your-form-endpoint}",
                    {
                        method: "POST",
                        body: formData,
                    })
                    .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 and the Google reCaptcha site key on src attribute of the script tag and grecaptcha.execute() 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.

← JQuery →