Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-04-09T01:01:25.207Z
Answers.LastActivityDate: 2019-04-09T01:01:25.207Z
Answers.UserDisplayName: T.Newton
Body: <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>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-04-08T07:17:36.153Z
Comments.Text: 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
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-04-09T00:59:56.850Z
Comments.Text: 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() }}.
Comments.UserDisplayName: T.Newton
Tags: <templating><craft3><plugins><ajax>
Title: Ajax Contact Form not sending with Error 400
ThreadText: # 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 %}
          <span class="form-error is-visible">
              {% for error in errors %}
                  {{ error }}
              {% endfor %}
          </span>
      {% endif %}
  {% endmacro %}
  
  {% from _self import errorList %}
  
  <form method="post" action="" accept-charset="UTF-8" id="ajax-contact">
      {{ csrfInput() }}
      <input type="hidden" name="action" value="contact-form/send">
      {{ redirectInput('pages/contact') }}
      <div class="small-12" itemprop="text">
          <p id="thanks" class="contact-form-success" style="display: none">
              {{ 'Your message has been sent.' | translate }}
          </p>
          <p id="error" class="contact-form-error" style="display: none;">
              {{ 'An error occurred. Please try again.' | translate }}
          </p>
      </div>
  
      <div class="row form-columns">
          <div class="medium-6 columns first-column">
              <div class="form-group">
                  <label for="from-name">{{ 'Name' | translate }}</label>
                  <input id="from-name" type="text" name="fromName" value="{{ message.fromName ?? '' }}" required>
                  {{ message is defined and message ? errorList(message.getErrors('fromName')) }}
              </div>
              <div class="form-group">
                  <label for="from-email">{{ 'Email' | translate }}</label>
                  <input id="from-email" type="email" name="fromEmail" value="{{ message.fromEmail ?? '' }}" required>
                  {{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}
              </div>
              <div class="form-group">
                  <h4>{{ 'What services are you interested in?' | translate }}</h4>
              </div>
              <div class="form-group">
                  <label><input type="checkbox" id="weddings" name="message[Services][]" value="Weddings">&nbsp;{{ 'Weddings' | translate }}</label>
              </div>
              <div class="form-group">
                  <label><input type="checkbox" id="engagements" name="message[Services][]" value="Engagements">&nbsp;{{ 'Engagements' | translate }}</label>
              </div>
              <div class="form-group">
                  <label><input type="checkbox" id="families" name="message[Services][]" value="Families">&nbsp;{{ 'Families' | translate }}</label>
              </div>
              <div class="form-group">
                  <label><input type="checkbox" id="other" name="message[Services][]" value="Other">&nbsp;{{ 'Other' | translate }}</label>
              </div>
              <div class="form-group" id="wedding-date-group">
                  <label for="wedding-date">{{ 'Wedding Date' | translate }}</label>
                  <div class="input-group">
                      <span class="input-group-label"><svg class="icon icon-calendar"><use xlink:href="#icon-calendar"></use></svg></span>
                      <input id="wedding-date" name="message[WeddingDate][]" type="date">
                  </div>
              </div>
              <div class="form-group" id="wedding-location-group">
                  <label for="wedding-location">{{ 'Wedding Location' | translate }}</label>
                  <input id="wedding-location" name="message[WeddingLocation][]" type="text">
              </div>
          </div>
          <div class="medium-6 columns second-column">
              <div class="form-group">
                  <label for="how-did-you-hear-about-us">{{ 'How did you hear about us?' | translate }}</label>
                  <input id="how-did-you-hear-about-us" name="message[HowDidYouHear][]" type="text">
              </div>
              <div class="form-group">
                  <label for="subject">{{ 'Subject' | translate }}</label>
                  <input id="subject" type="text" name="subject" value="{{ message.subject ?? '' }}"  required>
                  {{ message is defined and message ? errorList(message.getErrors('subject')) }}
              </div>
              <div class="form-group">
                  <label for="message">{{ 'Message' | translate }}</label>
                  <textarea rows="10" cols="40" id="message" name="message[body]" required>{{ message.message ?? '' }}</textarea>
                  {{ message is defined and message ? errorList(message.getErrors('message')) }}
              </div>
          </div>
      </div>
      <input class="hide" id="preferredKitten" name="preferredKitten" type="text">
      <div class="form-group contact-form-submit row column">
          <button type="submit" data-text="Send" class="button">{{ 'Send Enquiry' | translate }}</button>
          <div id="spinner" class="form-spinner spinner-loading"></div>
      </div>
  </form>
  
  ```
  
  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 %}
  
  ```
  
  
  ---
  
  