Форма обратной связи на MODX Revo с помощью Formit с необычной каптчей. MODX - Форма обратной связи (FormIt) 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+]
Теперь по Вашей форме не должен проходить спам, за счет двух новых полей.
4. Внешней вид приходящего письма
По умолчанию приходит на почту письмо без всякого форматирования в не очень читаемом формате. Поэтому давайте оформим немного наше письмо на примере.
Шаблон письма это простой чанк, который мы указываем в параметре emailTpl , тут всё очень просто, напишу пример оформления. Если будут вопросы, пишите в комментариях.
mailtpl:
На сайте [[++site_url]] оставили заявку.
[[+name:notempty=`Имя: [[+name]]
`]] [[+email:notempty=`Почта: [[+email]]
`]] [[+message:notempty=`Сообщение: [[+message]]
`]]Пожалуйста свяжитесь с ним в ближайшее время.
Не отвечайте на это письмо, так как оно автоматическое.
Читайте о создании и c защитой от спама.
У меня уже есть пару уроков по созданию форм на FormIt в связке с — у этой связки есть как плюсы: отправка форм без перезагрузки, есть выплывающее окошко что сообщение отправлено и т.д. Ну и соответственно минусы: в код добавляется js и css файл — что дает минус к скорости и в выводе js не нужный тип в вызове, из-за него в валидаторе появляется предупреждение — в html 5 его указывать не нужно.
По этому я решил делать формы на чистом FormIt, именно об этом сегодня и урок.
HTML разметка формы сейчас имеет следующий код:
Не чего особенного, так сказать стандарт с разметкой от bootstrap 4. Переделаем её с учетом синтаксиса и за одно повыкидываем лишнее, русифицируем, добавим защиту от спама:
[[!FormIt? &hooks=`spam,email` &emailTpl=`email-tpl` &emailTo=`[[++emailsender]]` &emailSubject=`Письмо с сайта [[++site_url]]` &validate=`workemail:blank,name:required,email:email:required,message:required:stripTags,phone:required` &successMessage=`
Спасибо, Ваше обращение отправлено.
` ]] [[!+fi.successMessage:default=``]]Разбор кода, идем сверху в низ:
&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=`имя формы на английском`
у каждой формы свое имя.
Борьба со спамом
Как не крути, но вы однозначно столкнетесь со спамом — самый эффективный способ для борьбы с ним — , так же можете попробовать .
Урок, на котором рассмотрим создание формы обратной связи в 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 - Форма обратной связи, не прошедшая валидацию
Популярное
- Как запаролить Wi-Fi? Подробная инсрукция. Защита беспроводной сети Wi-Fi
- Лучшие программы для компьютера
- Как настроить телефон компании Meizu Как запустить мультиоконный режим на Meizu
- Серия процессоров intel core 2 duo
- Распиновка и распайка USB разъёмов — основные сведения
- Как правильно добавлять сообщения и записи на стену ВКонтакте — пошаговая инструкция Запись девушке на стену в контакте
- Как добавить русский язык в Android
- Как вернуть Мой компьютер на Рабочий стол в Windows
- Как установить приложения и игры на карту памяти Скачать приложение сразу на сд карту
- Клавиатурный тренажёр - слепой и быстрый метод печати