Trouble with submitting Contact Form plugin contact via AJAX I’m having trouble getting Contact Form to work when posting through AJAX. 

Form:

{% macro errorList(errors) %}
    {% if errors %}
        &lt;ul class="errors"&gt;
            {% for error in errors %}
                &lt;li&gt;{{ error }}&lt;/li&gt;
            {% endfor %}
        &lt;/ul&gt;
    {% endif %}
{% endmacro %}

{% from _self import errorList %}

&lt;div id="my-form" class="form"&gt;

    &lt;form method="post" action="" accept-charset="UTF-8"&gt;
    {{ getCsrfInput() }}
    &lt;input type="hidden" name="action" value="contactForm/sendMessage"&gt;
    &lt;input type="hidden" name="redirect" value="contact/thanks"&gt;

      &lt;div class="grid-container"&gt;
        &lt;div class="grid-x grid-padding-x"&gt;
          &lt;div class="medium-6 cell"&gt;
            &lt;h3&gt;&lt;label for="fromEmail"&gt;Your Email&lt;/label&gt;&lt;/h3&gt;
                &lt;input id="fromEmail" type="email" name="fromEmail" value="{% if message is defined %}{{ message.fromEmail }}{% endif %}"&gt;
                {{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}
          &lt;/div&gt;
          &lt;div class="medium-12 cell"&gt;
            &lt;h3&gt;&lt;label for="message"&gt;Message&lt;/label&gt;&lt;/h3&gt;
                &lt;textarea rows="10" cols="40" id="message" name="message"&gt;{% if message is defined %}{{ message.message }}{% endif %}&lt;/textarea&gt;
                {{ message is defined and message ? errorList(message.getErrors('message')) }}

                &lt;input type="submit" value="Send"&gt;
          &lt;/div&gt;
          &lt;div id="thanks" style="opacity:0"&gt;THANKS&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;

&lt;/div&gt;


jQuery:

$('#my-form').submit(function(ev) {
    // Prevent the form from actually submitting
    ev.preventDefault();

    // Get the post data
    var data = $(this).serialize();

    // Send it to the server
    $.post('/', data, function(response) {
        if (response.success) {
            $('#thanks').fadeIn();
        } else {
            // response.error will be an object containing any validation errors that occurred, indexed by field name
            // e.g. response.error.fromName =&gt; ['From Name is required']
            alert('An error occurred. Please try again.');
        }
    });
});


In this case the response is not a success so the alert is triggered.

Out of interest I console logged the response in the else block and it’s all the HTML on the page. And then I thought, why don’t I console log the data variable right after it’s declared and - same thing - it’s all the HTML on the page.

Anybody got any tips?
This is your html

&lt;div id="my-form" class="form"&gt;


And This is your js event handler

$('#my-form').submit(function(ev) {


So $(this) is actually a &lt;div&gt; container element and $(this).serialize() is null so you'll send no data. You should add a id to your form

&lt;form method="post" action="" id="myForm" accept-charset="UTF-8"&gt;


and send the form data instead of a div data.

var data = $("#myForm").serialize();


I reproduced it, and it worked - even though I would prefer sending an actual object instead of a serialized form, but that's only subjective