How to submit your forms with AJAX

While using Getform, you can connect your forms to lots of services. In this article, we are going to examine how to use the form action code within javascript code with asynchronous javascript XML a.k.a AJAX calls.
We will use jQuery but if you are familiar with other javascript frameworks like Backbone, Angular or React, you can simply follow the same process.

Getting new form action code

In Getform getting a new form action code is easy, you just need to login to your Getform(https://getform.org) account and create a new form.

After filling the properties of your form, you wil be able to get your getform action code.

Ajax Part

//example action url
<form action="https://getform.org/f/70acae78-1c60-4d6f-839e-26bb0f38b503" accept-charset="UTF-8" method="POST">

With Getform action code we can send ajax request to Getform servers.

<form id="formd" action="https://getform.org/f/70acae78-1c60-4d6f-839e-26bb0f38b503" accept-charset="UTF-8" method="POST">
    <input type="text" name="message" placeholder="asd" />
    <input type="text" name="email" placeholder="asd" />
    <input id="send" type="submit" />
</form>
<div id="success" style="opacity:0;">Thank you!</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {

});

$('#formd').submit(function(event) {
    event.preventDefault();
    var formEl = $(this);
    var submitButton = $('input[type=submit]', formEl);
    $.ajax({
        method: 'POST',
        url: formEl.prop('action'),
        data: formEl.serialize(),
        crossDomain: false,
        beforeSend: function() {
            submitButton.prop('disabled', 'disabled');
        }
    }).done(function(data) {
        submitButton.prop('disabled', false)
        $('#success').css('opacity', '1')
    });
});
</script>

As you can see in the code above, you just need to spot on “crossDomain:true”.This will send a request with the required headers.

Submitting your forms using Getform with Ajax is easy. In this article we basicly showed how to use it easily.