Меню

Ajaxform modx revo настройка

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

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

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

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

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

Документация по 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 массив с ключами:

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

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

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

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

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

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

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

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

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

Берем 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 файл прописать вот такие строки

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

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

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

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

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

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

Дополнительно

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

23 декабря 2015, 12:50 0 33077

Комментарии ( )

Большое спасибо за запись. Именно то, что давно искал. За JS все никак не могу полноценно взяться (.

У меня такой вопрос. А если форм на странице больше одной? То нужно для каждой отдельный скрипт обработки написать, заменив название полей и классы\идентификаторы? Объединить код не получится?

Источник

MODX. AjaxForm обработка форм с использованием Ajax

Отредактировано: 14 Ноября 2019

AjaxForm это надстройка для компонента FormIt, которая позволяет отправлять результаты форм используя ajax (можно использовать не только FormIt, но и другие скрипты). Для перехода с FormIt на AjaxForm достаточно изменить запись вызова

Этапы создания Ajax формы на сайте:

Стандартная форма обратной связи

В AjaxForm есть дефолтный вид всплывающих окон об успешной отправке и ошибках, чтобы его изменить, надо указать собственные файлы в параметрах frontend_js и frontend_css.

Пример файла без jGrowl, со статичным сообщением во всплывающем окне с id massage

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

AjaxForm

Cниппет для отправки любых форм через ajax. По умолчанию рассчитан на работу с FormIt, но можно использовать и собственный сниппет.

Параметры сниппета

Имя По умолчанию Плейсхолдеры
&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, будет передано в вызываемый сниппет.

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

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

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

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

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

Событие af_complete

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

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

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

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

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

Всплывающие сообщения

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

Вторым параметром можно указать «прилипающий» popup — его нужно будет закрыть вручную, бывает полезно для показа серьёзных ошибок. То есть, просто вызвав сниппет на странице, вы получаете подключенный jQuery.jGrowl и можете показывать приятные всплывающие уведомления на javascript.

Примеры

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

Отладка

Источник

Читайте также:  Настройка iptv zala на компьютере