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.
Комментарии ()
Вы должны авторизоваться, чтобы оставлять комментарии.
У меня такой вопрос. А если форм на странице больше одной? То нужно для каждой отдельный скрипт обработки написать, заменив название полей и классы\идентификаторы? Объединить код не получится?
то увидите, что AjaxForm понимает с какой формой работает. Для каждой формы нужно прописать свой обработчик.
Спасибо Вам за интересное и полезное решение.
У меня есть один вопрос: при установке на сайт возникает казусная ситуация, кстати у Вас на сайте тоже — делаем ошибку в форме и обработчик возвращает сообщение об ошибочных полях и сообщение ошибки от AjaxForm, причем на английском языке. Вы не думали как устранить данную тавтологию?
Решается это легко.
Обновил скрипт. Спасибо за внимательность.
&hooks=`spam,email,FormItSaveForm`
ранее в админке skrinshoter.ru/s/270916/LELnG1 могла видеть все заполненные формы, а теперь только на почту получаю. Как исправить?
Я сейчас пробую то один поставить, то другой и смотреть какое дополнение это вызывает.
Я сегодня поставила 2 Ваших дополнения controlErrorLog и AdminTools
Я если их деинсталлирую, то в админке отображаются отправленные формы — skrinshoter.ru/s/270916/QgGUXS
Заметила такую особенность — форму отправляю, AdminTools установлен — данные в админке появляются. Удаляю одну форму, данные исчезают.
Как исправить?
После удаления одной записи идет загружается, а потом все исчезаетЗагружается…
Если да, то доступ кудаи какой Вам отправить?
В кослоли ругается на эту строчку
На странице у меня две формы. Соответственно, в чанке второй формы поменял id и добавил еще один скрипт
Формы работаю, но когда я отправляю форму, которая ниже, то в первой форме тоже появляется уведомление «Сообщение отправлено!»
Что я делаю не так?
Спасибо большое!
Почти совсем — «то, что доктор прописал» :-)
До сих пор не использовал AjaxForm, т.к. очень не нравится та js библиотека, которая отрабатывает вывод сообщений — т.е. вот эти всплывашки в правом верхнем углу.
В очередной раз стал искать самоделки на Formit + Ajax, которые бы выводили message без перезагрузки прямо над формой и наткнулся на вашу статью.
Сообщение об отправке — просто чудесно.
А можно ли сделать так, чтобы и сообщения об ошибках перехватывались вашим скриптом и выводились над полями формы в блоке с id=«success-response»?
Конечно. Для этого достаточно немного знать jQuery. Можно выводить их в блоке списком ul.
вернуть какие-=то данные на страницу?
В частности, мне нужно выполнить сниппет в определенном div
Никак у меня не передается ничего((
Вот мой сниппет:
То есть смысл в том, что я хочу при успешном ответе в определенный блок вывести результаты работы сниппета mod
Вот JS:
В итоге всегда response.res = undefined
JS (немного сократил для поста):
ответ такой
Ниже кода нет, return этого не достаточно? Подскажите, как правильно написать?
Сейчас все передается отлично. Спасибо!
Добавил себе скрытое поле от спама и хотелось бы, чтобы сообщение об ошибке его не палило, т.е. как исключить это поле из всплывающих сообщений об ошибках?