jQuery submit Jetpack Contact Form

jetpack-form-ajax.js

//All the contact forms from Jetpack have the .contact-form class. This _should_ match all of them on a page and work correctly.
$(".contact-form").on('submit', function (e) {

    //Wrapper for our form fields to submit via ajax
    var formData = {};
    
    var contact_form_id = $(this).find('input[name=contact-form-id]').val();

    //Get our form fields here. New fields can be added here as well.
    formData['g' + contact_form_id + '-name']  = $('input[name=g' + contact_form_id + '-name]').val();
    formData['g' + contact_form_id + '-email'] = $('input[name=g' + contact_form_id + '-email]').val();

    //Our ajax url for later
    
    var form_url = $(this).attr("action");

    // get/set other form data
    //If the user is logged in, we need these values as well for the form to submit correctly.
    //WorkSpace is an object that stores values from PHP. In this case, WorkSpace. User is boolean (true/false) and is set using is_user_logged_in() WP Function
    if (WorkSpace.User) {
        formData['_wpnonce']         = $(this).find('input[name=_wpnonce]').val();
        formData['_wp_http_referer'] = $(this).find('input[name=_wp_http_referer]').val();
    }
    //These fields are required in all cases
    formData['contact-form-id']  = contact_form_id;
    formData['action']           = 'grunion-contact-form';

    //Loading animation. Uses Font Awesome but could be replaced with whatever.
    $(this).find('input[type=submit]').after('<span class="spinner"><i class="fa fa-spinner fa-spin fa-3x fa-fw" aria-hidden="true"></i></span>');

    // process the form
    $.ajax({
      type  : 'POST', // define the type of HTTP verb we want to use (POST for our form)
      url : form_url, // the url where we want to POST
      data: formData, // our data object
      encode: true
    })

    .done(function (data) {
    //data is the entire HTML page returned. Append it a fake div element to let jQuery run and act as normal    
    var html    = $('<div />').append(data);
    var form = '#contact-form-' + contact_form_id;

    //Hide the spinner animation
    $(form).find('.spinner').hide();
    //Get the message on the page, in HTML
    var message = html.find(form + ' h3').text();

    //Regex to match the 'Error' string in the returned page
    if (/Error/.test(message)) {
      //error with form submission.
      $(form).prepend(html.find(form + ' .form-error'));
      return false;
    }
    
    //Otherwise we're all good.
    $(form).prepend("<h3>Message Sent</h3>");
    
    });

    // stop the form from submitting
    e.preventDefault();
})