MODX AjaxForm — документация и примеры построения контактных форм

В прошлом уроке мы разобрали документация по пакету FormIt и построили контактную форму. Сегодня логическое продолжение и в данной уроке мы рассмотрим компонент AjaxForm — сниппет для отправки форм через ajax (отправка форм без перезагрузки, который по умолчанию рассчитан на работу с пакетом FormIt, но можно написать собственный обработчик.

Установить AjaxForm можно через репозиторий modstore.

AjaxForm vs FormIt — что лучше использовать. Плюсы и минусы.

Мне не нравится что аякс форм, при инициализации регистрирует на фронтенде скрипты: jQuery.Form и jQuery.jGrowl . По этому, когда на странице 1 форма, я обычно использую чистый FormIt, т.к. он не добавляет своих библиотек. Когда на странице по 3-10 форм (это сейчас модно), я всегда использую AjaxForm, т.к. нет проблем с отправкой (дублированием писем) с разных форм + есть дополнительные плюшки.

Сохраняет в сессию $scriptProperties при инициализации сниппета.
Выводит указанную форму, прописывая класс ajax_form и скрытый input для получения $scriptProperties .
Вешает обработчик для отправки форм через ajax — без перезагрузки страницы.
При отправке запускает указанный вами сниппет (обработчик) и возвращает ответ от него.
Выводит сообщение об успехе отправки, или ошибки.

Документация по AjaxForm

Основные параметры Имя По умолчанию Плейсхолдеры и примечания &form tpl.AjaxForm.example Образец чанка с формой, который можно взять за основу. &snippet FormIt Можете написать свой сниппет для обработки формы. &frontend_css [[+assetsUrl]]css/default.css Стандартные стили оформления формы и полей с ошибками, чтобы отключить их вывод, укажите пустое значение. &frontend_js [[+assetsUrl]]js/default.js Javascript для отправки формы через ajax &actionUrl [[+assetsUrl]]action.php Адрес коннектора, на который отправляется форма Всплывающие сообщения

По умолчанию AjaxForm выводит сообщения об успешной отправке формы или о наличии ошибок. Можете самостоятельно вызывать их для своих целей:

Указав второй параметр (, 1) — вы получаете «прилипающий» popup, который не закрывается автоматически (а только по нажатию на крестик) — бывает полезно для показа серьёзных ошибок.

За выплывающие уведомления, отвечает подключаемая по умолчанию javascript библиотека jQuery.jGrowl.

Обработка своим сниппетом

Хотите вместо FormIt, использовать собственный сниппет, который будет делать что угодно (например создавать страницы на сайте)? Без проблем, единственное требование — он обязательно должен возвращать JSON массив с ключами:

status — 1 или 0, то есть успех или ошибка.
message — сообщение о работе сниппета, выводится если status = 0.
data — массив для полей с ошибками, в котором ключами является имя поля, а значением — сообщение об ошибке.

Для удобства работы в параметры сниппета передаётся переменная $AjaxForm с классом компонента, чтобы вы могли вызывать из него методы error и success при выдаче ответа.

Простейший пример своего сниппета:

Примечание: данный сниппет ничего не делает, просто возвращает результат проверки имени.

Валидация формы

Сервер может вернуть ошибку отправки формы и массив полей, не прошедших проверку. Этим полям автоматически будет добавлен CSS класс error , который убирается при последующей отправке.

Так же вы можете запретить отправку формы, используя javascript переменную afValidated — если она объявлена и равна false , то форма не будет отправлена.

Важно! Все проверки на javascript можно обойти, так что лучше не использовать эту переменную стоит использовать для реальной проверки данных. Используйте только для удобства пользователей.

Событие af_complete

При получении ответа от сервера вызывается событие af_complete, которое вы можете использовать для обновления содержимого страницы или другой операции javascript.

Вам просто нужно указать функцию, в которую будет передано событие javascript и объект с ответом от сервера. Обратите внимание, что внутри этого объекта есть и отправляющая форма.

Пример с оф. документации

Отправка email сообщения при помощи FormIt с требованием некоторых полей:

Решение проблем с отправкой писем (Отладка)

При возникновении любых проблем, в первую очередь проверяйте, отправляется ли форма без AjaxForm. Помните, что AjaxForm — сниппет-обёртка, он не отправляет письма и не проводит проверку формы. Это делает ваш сниппет или FormIt.

Так же не забывайте заглядывать в консоль браузера на предмет ошибок javascript. Если сервер выдаёт ошибку 500 при отправке, проверьте параметр register_globals у вашего PHP — он должен быть отключен.

Официальная документация по компоненту AjaxForm .

Реальные примеры создания форм обратной связи

Стоит 2 задачи, рассмотрим их.

Задача 1. Создать форму заказа обратного звонка в модальном окне.

Форма должна выполнять следующее:

сохранять данные в админке MODX;
поле ввода телефона должно быть по маске;
после успешной отправки должно выводиться сообщение: «Спасибо за обращение в нашу компанию! Менеджер свяжется с вами в ближайшее время»;
модальное окно после отправки формы должно закрываться.

Решение.

Т.к. сайт собран на bootstrap 4, возьмем стандартную разметку модального окна и формы . Конечная HTML разметка получилась такой.

Маску ввода сделаем при помощи jQuery библиотеки maskedinput, на этом останавливаться не буду смотрите урок: Маска ввода для полей HTML форм на jQuery.

Теперь разметим форму атрибутами name — это обязательно, пример:

здесь атрибут required — делает поле обязательным.

Далее в action желательно добавить URL адрес страницы сайта, в form добавить дополнительный класс ajax_form af_example и можно поместить ее в чанк obr-zvonok.

Конечный код чанка obr-zvonok.

Делаем вызов формы

Чтобы форма начала сохранятся в админке нам нужно добавить хук FormItSaveForm, указать название формы (formName), перечислить поля, которые нужно сохранить (formFields) и названия полей (fieldNames), в итоге получаем следующий вызов.

AjaxForm на fenom

Чанк с формой на fenom.

Вызов формы на fenom.

Задача 2. Продвинутая форма с вложениями при помощи Formit + AjaxForm

Будем создавать вот такую форму.

По сути она достаточно простая. но ее особая особенность. это вложения.

И так. данная форма имеет, вот такой html код:

По сути обычная немного модифицированная bootstrap разметка.

Обязательный атрибут для использования вложений в MODX: enctype=»multipart/form-data»

Ну а теперь ближе к делу:

Создаем чанк, ну к к примеру form-uslugi и помещаем в него весть вышеприведенный код, далее модифицируем его под Formit + AjaxForm, получаем:

Далее создаем 2й чанк tpl-form-uslugi, со следующим содержимым

Можно вообще сделать для всех форм универсальный обработчик, при помощи модификаторов, вот пример универсального обработчика на fenom:

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

Ну и остается лишь только вызвать эту форму в нужном месте.

Ну и проверяем работоспособность.

Плюшки

Закрываем модальное окно после отправки формы

Нам нужна кнопка закрытия, в моем случае

cм. bootstrap modal .

Так вот нам нужен класс элемента, который закрывает форму при клике, в моем случае это кнопка (buttom) с классом close.

Воспользуемся событием af_complete для клика по этой кнопке.

К стати его нужно прописывать в js файл или подключать в шаблон обвертывая в тег <script> </script>

Все теперь после успешной отправки письма, модальное окно автоматически закроется.

Изменение стилей и положения всплывающего окна Ajaxform.

AjaxForm для стилизации окон использует стили jGrowl, которые лежат в assets/components/ajaxform/css/lib/jquery.jgrowl.min.css, можно поправить все прямо там, но если вы обновите компонент, то и стили ваши обновятся на дефолтные, следовательно их лучше предопределить в своем css.

К примеру положение окна по дефолту заданно вот таким стилем

те прижато к верху и правой стороне.

Чтобы сменить положение, к примеру по центру, достаточно предопредилить их в своем css, к примеру так:

И точно таким же образом можно изменить весь внешний вид окошко с уведомлением, вот мой конечный код для одного из сайтов:

в итоге всплывает вот такое окошко по центру сайт.

Оптимизация скорости загрузки сайта.

Делайте вызов Ajaxform кэшированным (без !).
Объедините стандартные стили и скрипты со своими и укажите в вызове чтобы стандартные не подключались.

Берем CSS код из assets/components/ajaxform/css/lib/jquery.jgrowl.min.css, assets/components/ajaxform/css/default.css и переносим его в общий файл стилей.

default.css — из этого файла выкидываем верхнюю строку @import url(‘./lib/jquery.jgrowl.min.css’); — т.к. код мы подключили сразу.

Также берем содержимое файла assets/components/ajaxform/js/default.js и объединяем с основным js файлом.

Далее отключаем css и js в вызове ajaxform.

redirect на другую страницу сайта, после успешной отправки формы?

Добавляем id к форме, если его нет и затем в js файл прописать вот такие строки

Можно просто обернуть в <script> выше приведенный код </script> и подключить в шаблон с формой ближе к закрытию body.

Настройка отправки целей в AjaxForm

Самый простой и удобный способ настроить цели на AjaxForm это добавить в сообщение успешной отправки script

Как передать адрес и заголовок страницы

Если полный адрес не выводится, попробуйте так

Чекбокс — согласие с политикой обработки персональных данных Дополнительно

Сохранение форм в админке, добавление маски ввода для телефона, email, даты идентично formit.

В следующем уроке сделаем хлебные крошки — чтобы наш шаблон выглядел как оригинал.

📎📎📎📎📎📎📎📎📎📎