Generic, reusable, AJAX Mailer

js

jQuery(document).ready(function($) {


// load form elements in vars for ease of use 
var frm = $('#contact-form');
var formMessages = $('#form-messages');
var loadingAnimation = $('#loading-container');

frm.submit(function (e) {

    e.preventDefault();
    
    // prevent spam with honeypot
    if ($('input#honeypot').val().length != 0) {
        console.log("spam message");
        return false;
    }


    $.ajax({
        type: "POST",
        url: frm.attr('action'),
        data: frm.serialize(),
        beforeSend: function() {
        
            // while sending, show an ajax spinner and fade the form out a little
            loadingAnimation.show();
            frm.addClass('form-faded');
        },
        success: function (data) {

            // Set the message text.
            $(formMessages).text(data);
            
            // add and remove classes for CSS styling
            $(formMessages).removeClass('error').addClass('success');


            // clear form fields
            frm[0].reset();



        },
        error: function (data) {

            // add and remove classes for CSS styling
            $(formMessages).removeClass('success').addClass('error');
        

            // Set the message text.
            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! An error occured and your message could not be sent.');
            }
        },
        complete: function () {
        
            // hide ajax spinner
            loadingAnimation.hide();
            frm.removeClass('form-faded');
        }
    });
});

});