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. 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 endpoint is linked to an Un-static account, or link it now from your forms admin page.

Step 2. If you don’t have a secret yet, generate a new reCAPTCHA secret from Google reCAPTCHA

  • Step 2a. Click the plus at the top right of the Admin Console

  • Step 2b. Select reCAPTCHA v2

  • Step 2c. Add your own domain of your site

Step 3. Copy your reCAPTCHA Secret Key from the site’s Settings

Step 4. In you form’s admin page, set your site’s reCAPTCHA secret (or disable reCAPTCHA verification altogether).

Step 5. Add the reCAPTCHA field to your page or form

  <div class="form-group row">
    <div class="col-sm-9">
      <div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY_HERE"></div>
    </div>
  </div>

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

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<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',
        dataType: 'json',
        data: 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!