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 с требованием некоторых полей:
Отладка
MODX AjaxForm — документация и примеры построения контактных форм
В прошлом уроке мы разобрали документация по пакету FormIt и построили сложную форму. Сегодня логическое продолжение и в данной уроке мы рассмотрим компонент AjaxForm — сниппет для отправки форм через ajax, который по умолчанию рассчитан на работу с пакетом FormIt, но можно написать собственный обработчик.
Установить AjaxForm можно через репозиторий modstore.
AjaxForm vs FormIt — что лучше использовать. Плюсы и минусы.
Документация по 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.
Понравилась статья? Можно поблагодарить автора: отправив ему донат на
Как сделать форму на MODx?
Возьмём главные способы создания форм обратной связи на сайтах под управлением Modx Revolution. Выбор способа зависит от навыков разработчика или сложности формы.
Написать самому
Классический «дедовский» способ написания кода «с нуля» — построение html–структуры, написание файла-обработчика, отправляющего входные данные.
Преимущества самописного кода для обратной связи очевидны — полная вариативность результата и функционала. Закрывает любые цели, использует любые технологии.
Но есть недостатки:
Итог: тратить время на написание с абсолютного нуля имеет смысл лишь в особо «запущенных» случаях, когда нужен уникальный результат с уникальным функционалом.
Formit для Revo
Самое «народное» решение — форма обратной связи MODx Revo через компонент FormIT. Это стандартный компонент «модикса», позволяющий быстро создавать простые формы для отправки пользовательских данных на электронную почту из любого места сайта.
Разберем пример простой пример работы с Formit. В том месте, где будет отстраиваться форма, необходимо разместить чанк. В него добавить вызов сниппета с минимально необходимым набором параметров:
Выше — готовый код сниппета, который можно добавить в новый чанк с формой. Не забудьте удалить строки с комментариями, начинающиеся с //!
После написания сниппета нужно прописать в том же чанке HTML-код. Он должен отвечать следующим правилам:
Чтобы форма обрабатывалась без перезагрузки страниц используют сниппет AjaxForm. Он по умолчанию рассчитан на работу с FormIt, но вы можете использовать и собственный сниппет.
Как работает AjaxForm?
Сниппет AjaxForm — является оберткой для Formit и отвечает только за асинхронную отправку.
Для его настройки необходимо заменить код вызова FormIt (снипет в начале текста) на вызов AjaxForm, задать в качестве параметра snippet — FormIt и передать все параметры, которые были в вызове Formit.
В данном случае часто возникают конфликты скриптов и библиотек. Для отладки всего этого Вам понадобятся минимальные знания JavaScript.
Недостатками использования связки Formit (и AjaxForm) являются:
Итог: использовать FormIt как основу — вероятно лучший вариант для команды разработчиков. При наличии нужных навыков можно разработать практически любую обратную связь. Простую и рабочую форму можно скопировать из примеров выше.
Онлайн-конструкторы
Есть более простые варианты, не требующих от пользователей никаких знаний вообще. Сервисы-конструкторы обратной связи исчисляются 10-ками и почти все отлично работают с MODx. Другое дело — функционал внутри сервисов: многие из них стоят неоправданно высоко, где-то не хватает важных фишек и почти везде бесплатная версия сервиса урезана до полной бесполезности.
Мы разберём работу подобных сервисов на примере QForm24 — он достаточно прост для пользователей любого уровня и имеет полноценный функционал даже в бесплатной версии.
После регистрации и добавления сайта в сервис нужно вручную в визуальном конструкторе создасть свою форму.
Основные настройки сайта, добавленного в конструктор
Первый шаг — это настройка «скелета». Определите, какие поля и кнопки будет содержать форма, какие плейсхолдеры, имена иметь, поставьте обязательные поля.
Выбраны и настроены все поля форм и кнопка
Настройте адрес для отправки заявки. При помощи меню выберите, с каким CMS и по какому протоколу будет работать элемент. Это необходимо для корректной обработки ошибок и интеграции.
Опционально можно установить галку с принятием «Соглашения об обработке» и настроить капчу. Подобный функционал не везде доступен на бесплатном тарифе, но в QForm нет ограничений по настройкам.
Здесь можно задать текст соглашения об обработке ПД
В финале настройте дизайн — оформление, выбор цветовой темы и фона, вида кнопок. На сервисах почти всегда доступны шаблоны оформления, где-то можно разработать дизайн с нуля (как правило и то и другое ограничено тарифом). На QForm доступные шаблоны и адаптация дизайна под существующие стили сайта.
Настройка дизайна формы
В первом случае останется выбрать шаблон и вставить строчку кода в чанк, который будет выводить форму обратной связи. После вставки чанка в любое место сайта, он автоматически выводит там обратную связь. Для настройки дизайна потребуется чуть больше времени, подробнее здесь.
В конце настраивается отправка сообщений или интеграция с CRM.
Итог: вне зависимости от сложности работы и опыта предыдущего пользования, отправить первую успешную заявку вы сможете через 10-30 минут, бесплатно без каких либо ограничений.
Почитать полезную информацию по сервису или бесплатно попробовать создать первую форму обратной связи можно ниже.
AjaxForm MODX в модальном окне
Здравствуй дорогой читатель!
После того, как я написал статью: обратный звонок в модальном окне MODX, посетители моего сайта попросили меня реализовать модальное окно с заказом обратного звонка на сниппете AjaxForm.
Дело в том, что с использованием сниппета AjaxForm, сообщения с сайта отправляются на e-mail без перезагрузки сайта, что очень характерно для модального окна.
На данный момент форма имеет возможности:
Вот такое сообщение приходит на почту:
1. Устанавливаем AjaxForm и Formit
Думаю с установкой сниппетов проблем не возникнет. AjaxForm доступен и на modx.com и на modstore.pro
2. Создаем чанк tpl.AjaxForm
После того как установили, в чанках появится категория AjaxForm. В данной категории создаем чанк tpl.AjaxForm:
Думаю что комментарии не нужны, скажу то, что первые два скрытых поля, получают заголовок и ссылку на текущюю страницу
Создаем чанк шаблона собщения modal-zv-tpl, которое будет приходить Вам на электронную почту.
4. Подключаем CSS и JS
В head страницы подключаем modal.css и modal.js, помните что js подключаем после библиотеки jQuery.
Содержимое modal.js
5. Подключаем и настраиваем AjaxForm
Обычно я подключаем AjaxForm перед закрывающим тегом body.
Здесь находятся параметры сниппета AjaxForm и Formit. Документация на AjaxForm здесь, а Formit здесь.
Не забудьте поменять почту на свою!
На этом всё. Если у Вас остались вопросы, задавайте через форму ниже.
И да, не забудьте поставить ссылку с классом modal
Дополнение: Как сделать несколько форм на одной страницы?
Здесь принцип такой же, но код JavaScript нужно будет переделать и немного CSS! Вообщем нужно будет в атрибут ссылки href добавлять селектор, который нужно вывести.
К примеру, если мы заходим вывести модальное окно с id=»modal_zakaz», то необходимо указать в атрибуте href=»#modal_zalaz» или href=».modal_zakaz» если это класс.
Главное помните, что каждое окно должно содержать уникальный атрибут, будь это id или class
Думаю смысл я передал. Итак, приступим:
Также необходимо изменить в CSS #modal_form на .modal_form так как ID должен быть уникальный.
И ещё, на странице достаточно только одной подложки.
Пример вызова нескольких окон
Пишите, какие функции необходимо ещё добавить, с радостью разберемся.
P.S. Нехотите возиться? Обращайтесь ко мне, добавлю на Ваш сайт за мороженку 
Написать комментарий
Комментарии ( 119 )
Добрый день. Подскажите, пожалуйста, почему могли сломаться выводы &validationErrorMessage и &successMessage?
Раньше они открывались в модальном окне, сейчас же они на секунду появляются под футером и исчезают. Сообщения при этом уходят нормально. Как будто какой то css или js не отрабатывает, но не могу понять какой.
Все сделал, все получилось. За что вам огромное спасибо!
Стили поправил под себя. Но когда смотрю в коде страницы интересует что значит перед закрывающим тегом form?
Первым делом необходимо указать способ кодирования данных То есть в чанке tpl.AjaxForm пишем:
$.ajax( <
type: «POST»,
url: url,
data: msg,
success: function(data) <
AjaxForm.Message.success(«Вам выслано письмо со ссылкой для активации рассылки!», < life: 10000, position: 'center' >);
>
>);
return false;
>)
js в этой строке дает ошибку AjaxForm.Message.success
Оформляйте код в
и поддерживайте пожалуйста ветку.
Почему Вам не сделать это на AjaxForm с помощью Formit? Вы ведь используете какое-то API?
Сообщение отправляется, но вот форма не закрывается и не появляется сообщение об отправке. Подскажите, пожалуйста, в чем может быть причина?
В консоле modal.js не упоминается, но есть это:
Я создал чанк tpl.AjaxForm
и чанк modal-zv-tpl
а вывожу чанк таким образом:
Остались вопросы? звоните
Данное соглашение об обработке персональных данных разработано в соответствии с законодательством Российской Федерации.
Все лица заполнившие сведения составляющие персональные данные на данном сайте, а также разместившие иную информацию обозначенными действиями подтверждают свое согласие на обработку персональных данных
Под персональными данными Гражданина понимается нижеуказанная анкетная и биографическая информация:
Общая информация (Ф.И.О); Email; номер телефона; Соискатели направляют свои персональные данные оператору в целях предоставления последним услуги по приему заявок (записи) на консультацию по разработке сайта.
Гражданин, принимая настоящее Соглашение, выражают свою заинтересованность и полное согласие, что обработка их персональных данных может включать в себя следующие действия: сбор, систематизацию, накопление, хранение, уточнение (обновление, изменение), использование
Гражданин гарантирует: информация, им предоставленная, является полной, точной и достоверной; при предоставлении информации не нарушается действующее законодательство Российской Федерации, законные права и интересы третьих лиц; вся предоставленная информация заполнена Гражданина в отношении себя лично.