# JQuery Form Installation

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

# File Upload

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 working example Codepen 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 the one of the best solutions to prevent web spams. 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.

INFO

AJAX Support is available on Basic and Grow plans (opens new window) .

← Axios →