<p>Figured out that it wasn't sending because the CSRF token was being cached. A workaround was installing the No Cache plugin and doing this:</p>

<pre><code>{% nocache %}
    {{ csrfInput() }}
{% endnocache %}
</code></pre>

CC BY-SA 4.0
2019-04-09T01:01:25.207Z
2019-04-09T01:01:25.207Z
T.Newton
<p>Hi I have I'm using Craft CMS 3.1.21.1 with the Contact Form plugin version (2.2.4) and Contact Form Honeypot plugin (1.0.2) along with jquery 3.2.1 on the site.</p>

<p>Whenever the form is filled out and I hit send, the form hangs with an error "Failed to load resource: the server responded with a status of 400 ()" in the console.</p>

<p>It sends just fine whenever I remove the javascript.</p>

<p>Here is the markup of the form:</p>

<pre><code>{% macro errorList(errors) %}
    {% if errors %}
        &lt;span class="form-error is-visible"&gt;
            {% for error in errors %}
                {{ error }}
            {% endfor %}
        &lt;/span&gt;
    {% endif %}
{% endmacro %}

{% from _self import errorList %}

&lt;form method="post" action="" accept-charset="UTF-8" id="ajax-contact"&gt;
    {{ csrfInput() }}
    &lt;input type="hidden" name="action" value="contact-form/send"&gt;
    {{ redirectInput('pages/contact') }}
    &lt;div class="small-12" itemprop="text"&gt;
        &lt;p id="thanks" class="contact-form-success" style="display: none"&gt;
            {{ 'Your message has been sent.' | translate }}
        &lt;/p&gt;
        &lt;p id="error" class="contact-form-error" style="display: none;"&gt;
            {{ 'An error occurred. Please try again.' | translate }}
        &lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="row form-columns"&gt;
        &lt;div class="medium-6 columns first-column"&gt;
            &lt;div class="form-group"&gt;
                &lt;label for="from-name"&gt;{{ 'Name' | translate }}&lt;/label&gt;
                &lt;input id="from-name" type="text" name="fromName" value="{{ message.fromName ?? '' }}" required&gt;
                {{ message is defined and message ? errorList(message.getErrors('fromName')) }}
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;label for="from-email"&gt;{{ 'Email' | translate }}&lt;/label&gt;
                &lt;input id="from-email" type="email" name="fromEmail" value="{{ message.fromEmail ?? '' }}" required&gt;
                {{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;h4&gt;{{ 'What services are you interested in?' | translate }}&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;label&gt;&lt;input type="checkbox" id="weddings" name="message[Services][]" value="Weddings"&gt;&amp;nbsp;{{ 'Weddings' | translate }}&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;label&gt;&lt;input type="checkbox" id="engagements" name="message[Services][]" value="Engagements"&gt;&amp;nbsp;{{ 'Engagements' | translate }}&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;label&gt;&lt;input type="checkbox" id="families" name="message[Services][]" value="Families"&gt;&amp;nbsp;{{ 'Families' | translate }}&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;label&gt;&lt;input type="checkbox" id="other" name="message[Services][]" value="Other"&gt;&amp;nbsp;{{ 'Other' | translate }}&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="form-group" id="wedding-date-group"&gt;
                &lt;label for="wedding-date"&gt;{{ 'Wedding Date' | translate }}&lt;/label&gt;
                &lt;div class="input-group"&gt;
                    &lt;span class="input-group-label"&gt;&lt;svg class="icon icon-calendar"&gt;&lt;use xlink:href="#icon-calendar"&gt;&lt;/use&gt;&lt;/svg&gt;&lt;/span&gt;
                    &lt;input id="wedding-date" name="message[WeddingDate][]" type="date"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group" id="wedding-location-group"&gt;
                &lt;label for="wedding-location"&gt;{{ 'Wedding Location' | translate }}&lt;/label&gt;
                &lt;input id="wedding-location" name="message[WeddingLocation][]" type="text"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="medium-6 columns second-column"&gt;
            &lt;div class="form-group"&gt;
                &lt;label for="how-did-you-hear-about-us"&gt;{{ 'How did you hear about us?' | translate }}&lt;/label&gt;
                &lt;input id="how-did-you-hear-about-us" name="message[HowDidYouHear][]" type="text"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;label for="subject"&gt;{{ 'Subject' | translate }}&lt;/label&gt;
                &lt;input id="subject" type="text" name="subject" value="{{ message.subject ?? '' }}"  required&gt;
                {{ message is defined and message ? errorList(message.getErrors('subject')) }}
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;label for="message"&gt;{{ 'Message' | translate }}&lt;/label&gt;
                &lt;textarea rows="10" cols="40" id="message" name="message[body]" required&gt;{{ message.message ?? '' }}&lt;/textarea&gt;
                {{ message is defined and message ? errorList(message.getErrors('message')) }}
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;input class="hide" id="preferredKitten" name="preferredKitten" type="text"&gt;
    &lt;div class="form-group contact-form-submit row column"&gt;
        &lt;button type="submit" data-text="Send" class="button"&gt;{{ 'Send Enquiry' | translate }}&lt;/button&gt;
        &lt;div id="spinner" class="form-spinner spinner-loading"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>Plus here is the JS:</p>

<pre><code>$('#ajax-contact').submit(function(ev) {
    // Prevent the form from actually submitting
    ev.preventDefault();
    $('#spinner').addClass('show');

    // Send it to the server
    $.post({
        url: '/',
        dataType: 'json',
        data: $(this).serialize(),
        success: function(response) {
            if (response.success) {
                $('#thanks').fadeIn();
                $('#error').fadeOut();
                $('#spinner').removeClass('show');
                $('#ajax-contact').each(function () {
                    this.reset();
                });
            } 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']
                $('#error').fadeIn();
                $('#thanks').fadeOut();
                $('#spinner').removeClass('show');
            }
        }
    });
});
</code></pre>

<p>Any help for this would be very much appreciated!</p>

CC BY-SA 4.0
2019-04-08T07:17:36.153Z
First of all, please remove `url: '/',` and change it to `url: '',`. Besides that: what is the exact error in your Yii2 Debug Toolbar? There should be a stack trace with the correct error when you search for your request
Robin Schambach
CC BY-SA 4.0
2019-04-09T00:59:56.850Z
Haven't tried that option. I figured out that it wasn't sending because the CSRF token was being cached. I resolved this by installing the No Cache plugin and having {% nocache %} around {{ csrfInput() }}.
T.Newton
<templating><craft3><plugins><ajax>
Ajax Contact Form not sending with Error 400
# Ajax Contact Form not sending with Error 400

(Asked by: username_0 on 2019-04-08)

Hi I have I'm using Craft CMS 3.1.21.1 with the Contact Form plugin version (2.2.4) and Contact Form Honeypot plugin (1.0.2) along with jquery 3.2.1 on the site.
Whenever the form is filled out and I hit send, the form hangs with an error "Failed to load resource: the server responded with a status of 400 ()" in the console.
It sends just fine whenever I remove the javascript.
Here is the markup of the form:
{% macro errorList(errors) %}
    {% if errors %}
        
            {% for error in errors %}
                {{ error }}
            {% endfor %}
        
    {% endif %}
{% endmacro %}

{% from _self import errorList %}


    {{ csrfInput() }}
    
    {{ redirectInput('pages/contact') }}
    
        
            {{ 'Your message has been sent.' | translate }}
        
        
            {{ 'An error occurred. Please try again.' | translate }}
        
    

    
        
            
                {{ 'Name' | translate }}
                
                {{ message is defined and message ? errorList(message.getErrors('fromName')) }}
            
            
                {{ 'Email' | translate }}
                
                {{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}
            
            
                {{ 'What services are you interested in?' | translate }}
            
            
                 {{ 'Weddings' | translate }}
            
            
                 {{ 'Engagements' | translate }}
            
            
                 {{ 'Families' | translate }}
            
            
                 {{ 'Other' | translate }}
            
            
                {{ 'Wedding Date' | translate }}
                
                    
                    
                
            
            
                {{ 'Wedding Location' | translate }}
                
            
        
        
            
                {{ 'How did you hear about us?' | translate }}
                
            
            
                {{ 'Subject' | translate }}
                
                {{ message is defined and message ? errorList(message.getErrors('subject')) }}
            
            
                {{ 'Message' | translate }}
                {{ message.message ?? '' }}
                {{ message is defined and message ? errorList(message.getErrors('message')) }}
            
        
    
    
    
        {{ 'Send Enquiry' | translate }}
        
    


Plus here is the JS:
$('#ajax-contact').submit(function(ev) {
    // Prevent the form from actually submitting
    ev.preventDefault();
    $('#spinner').addClass('show');

    // Send it to the server
    $.post({
        url: '/',
        dataType: 'json',
        data: $(this).serialize(),
        success: function(response) {
            if (response.success) {
                $('#thanks').fadeIn();
                $('#error').fadeOut();
                $('#spinner').removeClass('show');
                $('#ajax-contact').each(function () {
                    this.reset();
                });
            } else {
                // response.error will be an object containing any validation errors that occurred, indexed by field name
                // e.g. response.error.fromName => ['From Name is required']
                $('#error').fadeIn();
                $('#thanks').fadeOut();
                $('#spinner').removeClass('show');
            }
        }
    });
});

Any help for this would be very much appreciated!

**Tags:** templating, craft3, plugins, ajax
> **Comments:**
> **username_1**: First of all, please remove `url: '/',` and change it to `url: '',`. Besides that: what is the exact error in your Yii2 Debug Toolbar? There should be a stack trace with the correct error when you search for your request  
> **username_0**: Haven't tried that option. I figured out that it wasn't sending because the CSRF token was being cached. I resolved this by installing the No Cache plugin and having {% nocache %} around {{ csrfInput() }}.  

---

## 1 answers

### Answer by username_0 on 2019-04-09. Score: 1 | Accepted answer

Figured out that it wasn't sending because the CSRF token was being cached. A workaround was installing the No Cache plugin and doing this:
{% nocache %}
    {{ csrfInput() }}
{% endnocache %}


---

