Ajax форма обратной связи для MODX

Становится всё более популярным делать интерактивные сайты используя AJAX технологию. И правда, зачем заставлять пользователя перегружать всю страницу, если есть возможность этого не делать. Особенно это актуально для мобильных устройств.

На многих сайтах используется форма обратной связи для общения с клиентом. Давайте возьмём обычную форму и сделаем её аяксовой.

Для этого нам понадобится дополнение FormIt, AjaxForm и reCaptchaV2 (каптча от Google). Если они у вас еще не установлены, то пора установить и настроить каптчу. Кроме того, я использую стили фреймворка Bootstrap в разметке формы.

Мы будем делать вот такую форму.

Когда пользователь заполнит все поля и нажмёт «Отправить», форма скроется, а вместо неё появится сообщение, что форма успешно отправлена. Тут вариантов может быть несколько — выводить модальное окно или ничего не выводить, так как AjaxForm покажет короткое сообщение об успешной отправке через jGrowl. В данном примере мы будем скрывать форму и показывать блок с сообщением об успешной отправке.

Разместим форму на странице контактов. Вставляем следующий код в нужном месте разметки.

[[!AjaxForm?
    &snippet=`FormIt`
    &form=`tpl.AjaxForm.contactForm`
    &hooks=`recaptchav2,email`
    &emailTpl=`tpl.FormIt.email`
    &emailSubject=`Сообщение от пользователя с сайта Сайт.ру`
    &emailTo=`info@site.ru`
    &validate=`name:required:minLength=^3^,
               email:email:required,
               message:required:stripTags,
               g-recaptcha-response:required`
]]
<!-- Этот блок будет выводится когда пользователь отправит сообщение -->
<div id="success-response" class="alert alert-info" style="display: none;">
    <p>Сообщение отправлено.</p>
    <p>Спасибо за обращение. <a href="#" id="onemore-feedback">Отправить</a> еще сообщение.</p>
</div>

Тут мы видим, что вызывается сниппет FormIt, шаблон формы находится в чанке tpl.AjaxForm.contactForm, используются хуки recaptchav2 (каптча) и email (отправка email), указаны тема сообщения и адрес получателя (тут нужно указать свои), а также условия проверки полей — они все обязательные.

Чанк tpl.AjaxForm.contactForm выглядит так

<div id="contactform-wrap">
    <form id="contactform" method="post" action="">
        <div class="row">
            <div class="col-sm-6">
                <input class="form-control" type="text" name="name" placeholder="Имя">
            </div>
            <div class="col-sm-6">
                <input class="form-control" type="text" name="email" placeholder="Email">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <textarea placeholder="Введите ваше сообщение..." class="form-control" rows="4" name="message">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6">
                [[!recaptchav2_render]]
            </div>
            <div class="col-xs-6 text-right">
                <input class="btn my-btn btn-primary btn-lg" type="submit" value="Отправить">
            </div>
        </div>
    </form>
</div>

Но это еще не всё. AjaxForm умеет выводить сообщения об ошибках заполнения формы. Но давайте сделаем их более детальными. Для этого нам нужно добавить на сайт скрипт, который будет обрабатывать информацию от AjaxForm.

$(document).on('af_complete', function(event, response) {
    var fields = {
        name: "Имя",
        email: "Email",
        message: "Сообщение",
        "g-recaptcha-response": "Каптча"
    };
    if (response.success) {
        // Скрываем форму и показываем блок!
        response.form.hide();
        if (document.getElementsByClassName('g-recaptcha').length) grecaptcha.reset();
        $("#success-response").fadeIn(700);
    } else {
        for (var prop in response.data) {
            // Выводим сообщение через jGrowl для всех полей с ошибками.
            // Если хотите, чтобы сообщения оставались, добавьте вторым параметром true
            AjaxForm.Message.error("Заполните поле '"+fields[prop]+"'");
        }
    }
    // Отменяем вывод стандартного сообщения
    response.message='';
});
// Вешаем обработчик
$(document).on('click', '#onemore-feedback', function(e) {
    $("#success-response").fadeOut();
    $("#contactform").fadeIn();
    e.preventDefault();
});

После того, как пользователь отправит сообщение, форма исчезнет и появится блок с благодарностью.

Вот теперь всё. Если будут вопросы, задавайте. Еще почитать про FormIt можно тут.

П.С. Обязательно прочтите статью Безопасный FormIt.