Hey folks,

I have a contact form that uses AJAX to submit, and the submission is received in the CP – great so far!

I've now reached the 'fringes' of my Statamic/JS knowledge. What I'd like help with is getting .done and .fail to display the form:success or form:error messages, on the front-end, once the submission has happened.

Here's my rig.

The form:

{{ form:set is="contact_form" }}

    {{ if {form:success} }}
        <p>Thanks...</p>
    {{ /if }}

    {{ if {form:errors} }}
        <p>Oops...</p>
        <ul>
            {{ form:errors }}
                <li>{{ value }}</li>
            {{ /form:errors }}
        </ul>
    {{ /if }}

    {{ form:create attr="id:contact-form" }}
        ...
    {{ /form:create }}

{{ /form:set }}

The jQuery:

$(function() {
    var form = $('#contact-form');

    $(form).submit(function(event) {
        event.preventDefault();

        var formData = $(form).serialize();

        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        }).done(function(response) {
            console.log('Yay!');
        }).fail(function(data) {
            console.log('Nay!');
        });
    });
});

Any help or pointers would be greatly appreciated.

Answered by Jason Varga! Go to answer.