# Sending Submissions with JQuery AJAX

First, create a new form in your dashboard. Then, in your HTML form code, use an AJAX library to submit your form data as JSON.

Here's the example using jQuery (opens new window) you can use. Paste the example code below anywhere before the </body> tag of your HTML form code:

$("#ajaxForm").submit(function(e){
  e.preventDefault();
  var action = $(this).attr("action");
  $.ajax({
    type: "POST",
    url: action,
    crossDomain: true,
    data: new FormData(this),
    dataType: "json",
    processData: false,
    contentType: false,
    headers: {
      "Accept": "application/json"
    }
  }).done(function() {
     $('.success').addClass('is-active');
  }).fail(function() {
     alert('An error occurred! Please try again later.')
  });
});

TIP

Be sure to add dataType: "json" if you want to get your responses in JSON form, it sets Accept HTTP Header to application/json.

Then give "ajaxForm" ID to your HTML to relate the form with your JQuery AJAX Setup as follows:

<form id="ajaxForm" action="https://getform.io/f/{your-form-endpoint}" method="POST">
    <input type="text" name="name" id="name">
    <input type="email" name="email" id="email">
    <input type="text" name="message">
    <button type="submit">Send</button>
</form>

And that's it. Your AJAX form should be up and running and ready to submit form data to Getform using jQuery AJAX.

# Uploading Files using JQuery AJAX

In order to accept file uploads with AJAX, you simply have to add contentType="multipart/form-data" to your JQuery code and make sure that your HTML code includes <input type="file" name="file">.

Then paste the example code below anywhere before the </body> tag:

$("#ajaxForm").submit(function(e){
  e.preventDefault();
  var action = $(this).attr("action");
  $.ajax({
    type: "POST",
    url: action,
    crossDomain: true,
    data: new FormData(this),
    dataType: "json",
    contentType: "multipart/form-data",
    processData: false,
    contentType: false,
    headers: {
      "Accept": "application/json"
    }
  }).done(function() {
     $('.success').addClass('is-active');
  }).fail(function() {
     alert('An error occurred please try again later.')
  });
});

That's it! You can also accept files for your form submissions using AJAX.

Here is a Codepen example for file uploads with AJAX:

See the Pen HTML Ajax Form Example & File Upload by Getform (@getform) on CodePen.

# Using Google reCAPTCHA

In addition to submitting form data from standard input fields using AJAX, you can also setup Google reCAPTCHA.

Google reCAPTCHA is one of the best solutions to prevent web spam. There are two versions of Google reCAPTCHA and we support both clickable (v2) Below are examples of how to setup Google reCAPTCHA v2 and v3 using AJAX.

# Google reCAPTCHA v2

This example uses the Google reCAPTCHA v2 (clickable version) using AJAX:

See the Pen Getform.io AJAX Form with Google reCAPTCHA v2 by Getform (@getform) on CodePen.

# Google reCAPTCHA v3

This example uses the Google reCAPTCHA v3 (invisible version) using AJAX:

See the Pen Getform.io HTML AJAX Form with Google reCAPTCHA v3 by Getform (@getform) on CodePen.

← Axios →