Форма обратной связи modx revolution. Форма обратной связи на MODX Revo с помощью Formit с необычной каптчей. Выбираем из списка Formit
В MODX есть интересная возможность - вы можете менять внешний вид формы редактирования ресурсов практически как вам хочется. Причем вы можете сделать разные формы для разных групп пользователей, и даже для разных ресурсов. Можно выбирать разные профили форм для данного ресурса в зависимости от его шаблона, родителя или других свойств.
И для этого нам не придется писать ни одной строчки кода!
Давайте, посмотрим, что, например, можно сделать с формами :
Во первых, уберем лишние пункты верхнего меню в один общий пункт - «Разработчику». Для этого заходим в раздел «Система» -> «Действия», создаем в корне новый пункт меню и перетаскиваем все ненужные пункты туда:
Дальше заходим в раздел «Безопасность» -> «Настройка форм» и создаем новый профиль, например, «Контент-менеджер». Потом нажимаем на нем правой кнопкой мыши и выбираем «Редактировать», переходим на вкладку «Группы пользователей» и добавляем группу, к которой будут применены новые правила.
Далее мы создаем новый набор правил. Их два вида - один для формы создания ресурса, второй - для формы его редактирования (create и update, соответственно). Этих правил может быть несколько - хоть по правилу для каждого ресурса.
После того, как правило будет создано, вы увидите страницу настройки - там три вкладки: Информация о наборе правил, Регионы, Дополнительные поля.
На первой вкладке перечислены стандартные поля ресурса. Их можно отключать или переименовывать. Регионы - это вкладки у ресурса. Вы можете создать новый регион и поместить туда некоторые ТВ-параметры, тогда они будут у ресурса не на вкладке «Дополнительные поля», а на новой вкладе - которую вы укажете. Здесь же можно отключать стандартные вкладки, например, «Группы ресурсов».
На третьей вкладке вы указываете расположение того или иного ТВ-параметра.
Я сделал небольшую шпаргалку по стандартным регионам:
Итак, давайте сразу уберем для пользователя все вкладки, кроме первой. Убираем галочки у регионов: modx-page-settings, modx-panel-resource-tv, modx-resource-access-permissions. Дальше - из стандартных полей оставим только pagetitle и alias. У остальных галочки убираем. Указываем новое название для поля pagetitle: «Заголовок новости» и alias: «Адрес страницы».
После этого переходим на вкладку «Дополнительные поля» и указываем, что ТВ-параметры должны находиться в той или иной области формы (в соответствии со шпаргалкой).
Осталось указать, для каких ресурсов действует это правило - в пункте «Шаблон» указваем, к ресурсам с каким шаблонам применять правило. Если правило для всех шаблонов, то ничего не указываем. И еще есть два пункта: «Ограничивающее поле» и «Ограничивающее значение». Здесь можно указывать остальные поля.
Давайте, укажем, что это правило относится к ресурсам, находящимся в «Новостях» - в пункте «Ограничивающее поле» пишем parent , а в «Ограничивающее значение» id ресурса «Новости», например, 22 .
Урок, на котором рассмотрим создание формы обратной связи в CMF MODX Revolution, используя компоненты AjaxForm и FormIt.
Назначение компонентов FormIt и AjaxForm
FormIt – это компонент (сниппет) для MODX Revolution, предназначенный для обработки формы на стороне сервера. Он может осуществлять проверку полей формы (валидацию) перед дальнейшими действиями, защищать сайт от получения спама, отправлять данные формы на почту, хранить копии заполненных форм, осуществлять редирект на другую страницу (например, после успешной отправки формы на email), выполнять функцию автоответчика и многое другое.
Но для того чтобы работать с FormIt через AJAX необходимо использовать дополнительный компонент AjaxForm .
Принцип работы формы обратной связи
Перед тем как перейти к разработке формы обратной связи в MODX Revolution, рассмотрим основной алгоритм её работы.
После открытия некоторой страницы с формой (она берётся из чанка, указанного в параметре &form вызова сниппета AjaxForm при формировании страницы на сервере), пользователь переходит к её заполнению. Завершив заполнение, пользователь нажимает на кнопку "Отправить" и компонент AjaxForm (код JavaScript) отправляет её на сервер посредством AJAX. На сервере данный компонент запускает сниппет FormIt и передаёт ему данные формы. Обработав эти данные, сниппет FormIt формирует ответ, который через компонент AjaxForm передаётся клиенту и отображается на странице пользователю. Ответ может быть положительным (это значит, что форма прошла валидацию и, например, данные были успешно отправлены на почту) или отрицательным (например, при заполнении формы пользователь допустил некоторые ошибки).
Создание формы обратной связи
Для создания формы обратной связи в MODX Revolution необходимо выполнить следующие основные шаги:
Рассмотрим шаги 2 и 4 более подробно.
Создание HTML формы в чанке
Создание HTML формы обратной связи можно осуществить посредством копирования заготовки tpl.AjaxForm.example . Например, присвоим скопированному чанку имя tpl.AjaxForm . Этот чанк, уже содержит готовую HTML-форму, состоящую из 3 полей: Имя, E-mail и Сообщение. Основные действия, которые надо производить с формой в основном будут сводиться к добавлению новых категорий или к удалению существующих. Под категорией будем понимать группу связанных между собой элементов: метка (label), элемент формы (input , select , textarea) и элемент span (используется для отображения ошибки валидации).
Основные моменты:
- Текст метки (элемента label). Обычно берётся либо из словаря (для многоязычных сайтов) или указывается непосредственно с помощью текста.
- Элемент span , должен иметь атрибут class со значением error_name , в котором фразу name необходимо изменить на значение атрибута name элемента формы, вслед за которым он расположен.
Внимание: использование плейсхолдера [[+fi.name]] в качестве значения атрибута value элемента формы и плейсхолдера [[+fi.error.name]] в качестве контента элемента span актуально только для классической работы с FormIt , т.е. без AJAX. Они используются для заполнения формы при её повторной отправке для того чтобы сохранить значения введённые пользователем и отобразить ошибки валидации.
Например, добавим в HTML форму поле для ввода телефонного номера:
В итоге данный чанк будет содержать следующий HTML-код:
Создание кода, содержащего вызов сниппета AjaxForm
Открываем шаблон, который будет использовать ресурс и вводим код, который будет всё это осуществлять.
[[!AjaxForm? &form=`tpl.AjaxForm` &snippet=`FormIt` &hooks=`FormItSaveForm,email` &emailSubject=`Тестовое сообщение` &emailTo=`[email protected]` &emailFrom=`[email protected]` &emailTpl=`tpl.email` &validate=`name:minLength=^2^,email:email:required,message:minLength=^10^` &validationErrorMessage=`В форме содержатся ошибки!` &successMessage=`Сообщение успешно отправлено` ]]
Разберём основные параметры:
- &form – отвечает за чанк, содержащий форму (tpl.AjaxForm).
- &snippet - сниппет, обрабатывающий форму (FormIt).
- &hooks – хуки, которые будет выполнять сниппет FormIt после успешной проверки формы (1 - FormItSaveForm , 2 - email). Хуки - это скрипты, которые запускаются после того когда форма прошла валидацию (проверку). Они указываются через запятую и запускаются последовательно один за другим. Если в одном из них произошла ошибка, то остальные не запускаются. В этом уроке будем использовать 2 хука. Хук FormItSaveForm предназначен для сохранения формы в базе данных. Хук email предназначен для отправки данных формы на почту.
- &emailSubject , &emailTo , &emailFrom , &emailTpl – параметры, значения которых использует хук email . Они предназначены для указания темы письма (&emailSubject), адреса отправки (&emailTo), заголовка From (&emailFrom), шаблона письма (&emailTpl).
- &validate – параметр, на основании значения которого осуществляется валидация формы. Значения параметра представляет собой список элементов, разделённых между собой запятыми. Каждый элемент состоит из имени элемента формы (который нужно проверить) и правила (требования к нему), разделённые между собой с помощью знака двоеточия. Например, валидатор name:minLength=^2^ проверяет, чтобы поле name содержало не меньше 2 символов. Валидатор email:email:required проверяет, чтобы поле mail содержало адрес электронной почты. С основными правилами создания валидаторов можно познакомиться на странице "FormIt Validators" .
- &validationErrorMessage - содержит сообщение, которое будет выводиться, если в форме содержатся ошибки.
- &successMessage - сообщение, которое увидит пользователь, если сообщение будет успешно отправлено.
Осталось только создать чанк tpl.email , который будет содержать шаблон письма.
Сообщение
От кого: [[+name]]
E-mail: [[+email]]
Телефон: [[+phone]]
Сообщение: [[+message]]
MODX - Чанк tpl.email
Внимание: Для вывода значений полей формы, используется плейсхолдеры.
Демонстрация работы формы обратной связи
Основные моменты при работе с формой обратной связи на странице продемонстрируем с помощью следующих изображений.
MODX - Форма обратной связи, не прошедшая валидацию
У нас осталась только одна страница, которую мы еще не переделали. Это страница Контакты . Здесь у нас помимо контактной информации будет расположена форма обратной связи. В MODx существует специальный сниппет для создания такой формы - eForm . Давайте сначала рассмотрим из чего вообще может состоять форма обратной связи.
1. В первую очередь, это сама форма с полями ввода Имени , Почтового адреса , Темы сообщения и самого Сообщения . Для защиты от спама следует добавить капчу - форму для ввода кода со сгенерированного изображения. Необходимо еще включить проверку правильности ввода информации.
2. Уведомление посетителя об отправке сообщения.
3. Форма отправленного сообщения, которое придет на почту.
Создаем чанк с шаблоном формы обратной связи
Прежде, чем создавать чанк с шаблоном для формы обратной связи, давайте изучим код, которым описывается эта форма в нашем шаблоне. Открываем в Notepad++ файл contact.html который лежит в папке C:/xampp/htdocs/site/www/assets/templates/templatemo_250_chess/. Это будут строки со 135 по 159 включительно. Как видим, это контейнер с id="contact_form" , в котором находится наша форма. Беря за основу этот код, создаем новый чанк form-tpl и добавляем необходимые нам плэйсхолдеры:
Обратная связь
[+validationmessage+]
С оздаем чанк sendEmailTpl Он описывает какую информацию отсылать на почту и вставляем туда код:
От кого:
Телефон:
Сообщение:
Здесь:
- имя отправителя
- телефон отправителя
- электронная почта отправителя
- сообщение, написанное отправителем на сайте
Д
алее создадим страницу с сообщением об успешной отправке и благодарностью за то, что пользователь отправил сообщение через форму обратной связи.
Например:
Благодарим Вас за отправку письма!
Ваше письмо успешно отправлено.
Наш специалист ответит Вам в ближайшее время.
Н
а эту страницу настроим редирект по ее ID.
Не
забываем изменить значение параметра &redirectTo=`178` в месте вызова сниппета FormIt (в коде чанка
ответить
ollserg replied on пт, 17/04/2015 - 11:07
ЭТОТ КОД ФОРМЫ ОБРАТНОЙ СВЯЗИ НЕ МОЖЕТ РАБОТАТЬ!
Это не адаптация! Вы удалили весь функционал! Перечитайте внимательно статью и разберётесь.
Здесь я подробно всё расписал, но если всё же не выйдет, то можете обратиться через форму "заказа" на этом сайте.
ответить
Денис replied on пн, 20/04/2015 - 17:56
FORMIT ВСПЛЫВАЮЩИЕ ОКНО
Спасибо! разобрался!
А есть у вас урок как сделать, чтобы при нажатии кнопки "отправить" , сообщение об испешной отправки появлялось в сплывающем окне, а не на новой странице?
ответить
ollserg replied on чт, 23/04/2015 - 14:56
МОДАЛЬНОЕ ОКНО
Используйте на своём сайте как всплывающее. Методов реализации много, один пример:
Открыть окно 1
Здесь вы можете разместить любой текст, картинки или видео!
Ну и CSS для этого кода.
ответить
Алексей replied on вс, 31/05/2015 - 16:09
МОДАЛЬНОЕ ОКНО
нужно прописать в html шаблоне, но значение #win1 то ему неизвестно? Его где-то нужно задать?
Спасибо.
ответить
Алексей replied on вс, 31/05/2015 - 16:17
МОДАЛЬНОЕ ОКНО
Уточните пожалуйста, а параметр #win1 где в чанке form нужно прописать, чтобы в шаблоне html ссылка понимала что именно нужно вызывать? Может быть я что-то недопонял, но строку
нужно прописать в html шаблоне, но значение win1 то ему неизвестно? Его где-то нужно задать?
С modx знаком только 3 дня, пожалуйста, как и всё вышеописанное, по простому объясните.
Спасибо.
ответить
ollserg replied on пн, 01/06/2015 - 12:28
HTML КОД МОДАЛЬНОГО ОКНА
Привет, Гость!
ответить
Алекс replied on вт, 07/07/2015 - 10:18
НЕТ ПИСЬМА
Ваш сработал, письмо пришло.
поменял поля на те которые нужны ме и увы, письмо перестало приходить.
вот код
ответить
ollserg replied on ср, 08/07/2015 - 13:09
В!FORMIT? ОПИШИТЕ TEXT И EMAIL
В!FormIt? нужно описание типа - &validate=`email:email:required,text:required:stripTags`
ответить
Виктор replied on пн, 19/10/2015 - 14:03
ТЕМА СООБЩЕНИЯ В ФОРМЕ ОБРАТНОЙ СВЯЗИ FORMIT
Доброго времени суток.
Использую "&emailSubject=`Письмо с сайта https://сайт/" - письмо не отправляется, форма возвращается в состояние буд-то ошибка в поле.
.
Понятно, что оно не разумеет кириллической кодировки, но где искать?
Подскажите пожалуйста, в чём м.б. причина.
Спасибо.
ответить
ollserg replied on вт, 20/10/2015 - 22:47
ВЕРСИИ APACHE И PHP
Первое на что думаю следует обратить внимание в Вашем случае это - версии Apache и PHP на вашем сервере.
ответить
AlexP replied on чт, 29/10/2015 - 14:15
PLACEHOLDER
Урезается placeholder..
Хотелось сделать внутри импута "Ваше имя" и стилизовать css Но почему то режется код после value="" placeholder="Ваше имя" - обрезается
Спасибо
ответить
ollserg replied on чт, 29/10/2015 - 20:01
ВСЕ CSS ПОДКЛЮЧЕННЫЕ НЕОБХОДИМО ПРОВЕРИТЬ
Обрезка "placeholder" происходит именно из-за вёрстки
ответить
Роман replied on пт, 27/11/2015 - 13:43
FORMIT И ПРОБЛЕМЫ
Есть большой минус у Fornit или документации к нему. Вот у меня есть красивое всплывающее окно обратной связи, но оно не создано отдельным документом, а выплывает при помощи jquery! Так вот Formit с ней не работает.. И как настроить, я никак не пойму! Может быть вы встречались с чем-то подобным.
ответить
ollserg replied on вт, 01/12/2015 - 23:23
AJAXFORM ИСПОЛЬЗОВАТЬ ДЛЯ POPUP ОБРАТНОЙ СВЯЗИ
FormIt из коробки ajax творить не умеет… К нему т.е. FormIt надо писать надстройку… или AjaxForm использовать, что и будет лучшим решением для popup обратной связи.
ответить
andreev888 replied on сб, 05/12/2015 - 22:26
ЧТО-ТО НИКАК
Народ подскажите, инструкция на вид самая доступная из всех, что видел, все сделал по инструкции, но формы на сайте вообще не вижу...ни крючка, ни запятой... Она не по-просту не выводится... Где смотреть?
ответить
ollserg replied on вс, 06/12/2015 - 23:37
MODX REVOLUTION - ОЧИСТКА КЭША
А если в Меню - Сайт и Обновить сайт (Очистить кэш сайта) Это первое, что приходит на ум. Ну а так, всё просто, ещё раз или два перечитайте пост и у вас всё получится!!!
ответить
Зло replied on пт, 18/12/2015 - 07:00
ЗЛОСТЬ
Вы задолбали копировать одни и теже статьи! Придумайте что-то свое или хотя бы измените код в статье!
ответить
ollserg replied on пт, 18/12/2015 - 14:28
КОД ЭТОЙ ФОРМЫ ЧИТАТЕЛИ УЖЕ ПЫТАЛИСЬ МЕНЯТЬ
У них возникали вопросы связанные с неработоспособностью этого кода.
В комментариях выше можете почитать.
Другой вопрос, многие (точной статистики нет) бездумно копируют и вставляют код этой статьи на свои сайты даже не прочитав её внимательно. Я намеренно скопировал код формы обратной связи со своего сайта и указал в статье места в коде которые нужно изменить на свои. И сколько же писем с сайтов шло на мою почту до тех пор пока я не исправил адрес в коде?! Их были нет не сотни, всего лишь десятки.
ответить
svbel replied on чт, 02/06/2016 - 10:11
ОШИБКА ПРИ ОТПРАВКЕ ПОЧТЫ
Что значит сообщение "Произошла ошибка при попытке отправить почту. Невозможно запустить функцию mail."?
ответить
ollserg replied on чт, 02/06/2016 - 10:54
НЕВОЗМОЖНО ЗАПУСТИТЬ ФУНКЦИЮ MAIL.
Причин может быть много. Смотрите логи, указанный в FormIt почтовый домен и почта существуют и работают нормально?
Задайте вопрос в сапорт вашего хостинг провайдера. В общем однозначного ответа нет на ваш вопрос.
ответить
Денис replied on ср, 15/06/2016 - 15:53
НЕ ПРИХОДЯТ ПИСЬМА НА ПОЧТУ
Добрый день! Сделал форму по Вашему описанию, всё работает, перемещает на страницу благодарности, но на почту так ничего не приходит
Сайт на хостинге. По идее всё в коде норм
Подскажите, в чём проблема то? Спасибо!
ответить
ollserg replied on пт, 17/06/2016 - 12:17
ФОРМА ОБРАТНОЙ СВЯЗИ MODX 100% ВЕРНА. ДЕЙСТВУЙТЕ ПО ИНСТРУКЦИИ.
Внимательно прочтите статью. Обратите внимание на чанк