0

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!

  • 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 Apr 8 '19 at 7:17
  • 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 Apr 9 '19 at 0:59
0

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 %}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.