jQuery ajax contact forms

In this guide we’ll help you to integrate an Un-static form endpoint into your site, without using a standard HTML form submit. These is not that much difference in using our endpoints with jQuery’s ajax() contact forms. The most important part is that you will have to link your form to an account, as you’ll need to either provide your own Google reCAPTCHA secret or choose (the less secure) option to disable Spam Checking on our side.

Why use jQuery enabled forms?

There are lot’s of reasons to use Javascript and jQuery.ajax() powered forms on sites. AJAX forms (or javascript based forms) are more common in sites that use a Javascript framework to handle interaction. While this is less often used on static sites, Un-static Forms are of course not limited to just static sites. So we support form submissions using jQuery.ajax() and others as well.

Steps to use AJAX contact forms

In essence there is not much difference between jQuery.ajax() enabled forms and regular forms, from the perspective of Un-static form endpoints. The big exception being the different form endpoint you need to use. For the rest they are similar to submissions that HTML forms do, as long as you handle the Google reCAPTCHA directly on your own site.

Let’s walk through the steps to use your Un-static form endpoint on your site from a jQuery.ajax() call:

Step 1. Make sure your form has reCAPTCHA hosting enabled. If you did not set that up yet, first set up reCAPTCHA hosting for your form.

Step 2. Call reCAPTCHA and your form endpoint from your Javascript code, with something like this:

<script>
$('#postButton').click( function() {
    var name = $('#inputName').val();
    var email = $('#inputEmail').val();
    var message = $('#inputMessage').val();

    var postData = {
                name: name,
                email: email,
                message: message
    };
    postData['g-recaptcha-response'] = grecaptcha.getResponse();

    $.ajax({
        url: 'https://forms.un-static.com/forms/YOUR_ENDPOINT/ajax',
        type: 'post',
        contentType: 'application/json',
        dateType: 'json',
        data: JSON.stringify(postData),
        success: function(data) {
                   // ... do something with the data...
                 },
        error: function(data) {
                   // ... do something with the data...
                 }
    });
});
</script>

And you are done!

If you also set the e-mail field for your form endpoint to email, you can easily reply to all your submissions.

Let us know if you run into any issues!