У нас осталась только одна страница, которую мы еще не переделали. Это страница Контакты . Здесь у нас помимо контактной информации будет расположена форма обратной связи. В 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+]
Разбор кода, идем сверху в низ:
&hooks — сюда добавляются различные хуки, в том числе самописные: в нашем случае 2 стандартных: span — простенькая защита от спама и email — обязательный, для отправки данных на почтовый ящик. Об остальных хуках я достаточно подробно рассказываю в видео.
&emailTpl — чанк с оформлением письма, имеет следующий код:
От кого: [[+name]]
Телефон: [[+phone]]
E-mail: [[+email]]
Сообщение: [[+message]]
&emailTo — адрес электронной почты куда отправляются формы, в данном случае указана системная настройка (ключ) ++emailsender
&emailSubject — тема отправляемого письма
&validate — прописываем обязательные поля для заполнения и частенько поля для защиты от спама
&successMessage — сообщение после успешной отправки
Разбирать код формы не буду, кому интересно смотрите видео и читайте документацию: docs.modx.com/extras/revo/formit
Прикрепление файлов к форме
Для того чтобы была возможность прикрепляти и отправлять вложения, необходимо в тег формы прописать
Enctype="multipart/form-data"
и соответственно добавить поля для прикрепления файла
Обработка чекбоксов и option
Несколько форм на одной странице
Просто в вызовах каждой формы пропишите
&submitVar=`имя формы на английском`
у каждой формы свое имя.
Борьба со спамом
Как не крути, но вы однозначно столкнетесь со спамом — самый эффективный способ для борьбы с ним — , так же можете попробовать .
В MODX есть интересная возможность - вы можете менять внешний вид формы редактирования ресурсов практически как вам хочется. Причем вы можете сделать разные формы для разных групп пользователей, и даже для разных ресурсов. Можно выбирать разные профили форм для данного ресурса в зависимости от его шаблона, родителя или других свойств.
И для этого нам не придется писать ни одной строчки кода!
Давайте, посмотрим, что, например, можно сделать с формами :
Во первых, уберем лишние пункты верхнего меню в один общий пункт - «Разработчику». Для этого заходим в раздел «Система» -> «Действия», создаем в корне новый пункт меню и перетаскиваем все ненужные пункты туда:
Дальше заходим в раздел «Безопасность» -> «Настройка форм» и создаем новый профиль, например, «Контент-менеджер». Потом нажимаем на нем правой кнопкой мыши и выбираем «Редактировать», переходим на вкладку «Группы пользователей» и добавляем группу, к которой будут применены новые правила.
Далее мы создаем новый набор правил. Их два вида - один для формы создания ресурса, второй - для формы его редактирования (create и update, соответственно). Этих правил может быть несколько - хоть по правилу для каждого ресурса.
После того, как правило будет создано, вы увидите страницу настройки - там три вкладки: Информация о наборе правил, Регионы, Дополнительные поля.
На первой вкладке перечислены стандартные поля ресурса. Их можно отключать или переименовывать. Регионы - это вкладки у ресурса. Вы можете создать новый регион и поместить туда некоторые ТВ-параметры, тогда они будут у ресурса не на вкладке «Дополнительные поля», а на новой вкладе - которую вы укажете. Здесь же можно отключать стандартные вкладки, например, «Группы ресурсов».
На третьей вкладке вы указываете расположение того или иного ТВ-параметра.
Я сделал небольшую шпаргалку по стандартным регионам:
Итак, давайте сразу уберем для пользователя все вкладки, кроме первой. Убираем галочки у регионов: modx-page-settings, modx-panel-resource-tv, modx-resource-access-permissions. Дальше - из стандартных полей оставим только pagetitle и alias. У остальных галочки убираем. Указываем новое название для поля pagetitle: «Заголовок новости» и alias: «Адрес страницы».
После этого переходим на вкладку «Дополнительные поля» и указываем, что ТВ-параметры должны находиться в той или иной области формы (в соответствии со шпаргалкой).
Осталось указать, для каких ресурсов действует это правило - в пункте «Шаблон» указваем, к ресурсам с каким шаблонам применять правило. Если правило для всех шаблонов, то ничего не указываем. И еще есть два пункта: «Ограничивающее поле» и «Ограничивающее значение». Здесь можно указывать остальные поля.
Давайте, укажем, что это правило относится к ресурсам, находящимся в «Новостях» - в пункте «Ограничивающее поле» пишем parent , а в «Ограничивающее значение» id ресурса «Новости», например, 22 .
06-08-2014 22:30:00 3886 Comments ollserg & MaxWeb for you
О
чень быстро создаем форму обратной связи на сайте под управлением CMF MODX revo используя пакетFormIt.
Процесс установки пакетов на MODX revo подробно описывать в этом посте не буду по причине его простоты и большого количества материала на эту тему в интернете. Напомню лишь последовательность действий:
<Система> - <Управление пакетами> - <Загрузить дополнения> - <Поиск>(вводим - FormIt)
Н
ажимаем <Загрузить>, а затем <Установить>
Д
алее создадим новый чанк и назовем его
С оздаем чанк 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% ВЕРНА. ДЕЙСТВУЙТЕ ПО ИНСТРУКЦИИ.
Внимательно прочтите статью. Обратите внимание на чанк
Создание кода, содержащего вызов сниппета 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 - Форма обратной связи, не прошедшая валидацию