Форма обратной связи MODX revo. Форма обратной связи на MODX Revo с помощью Formit с необычной каптчей Форма обратной связи modx revolution

Практически на всех коммерческих сайтах есть страница контакты, на которой расположена контактная форма, через которую пользователи могут написать администрации сайта. Сегодня мы рассмотрим как по быстрому создать контактную форму. Реализовывать форму обратной связи мы будем при помощи пакета Formit в связке с пакетом AjaxForm , установите их если они у вас не установлены.

Первым делом создаем чанк, в котором будет хранится сама форма, пусть это будет чанк «kontact-form» и помещаем в него код стандартной формы, я в основном делаю сайты с использованием bootstrap, так что возьму стандартную заготовку немного переделанную, ее статический код будет таким:

Пользовательского соглашения

Ваш внешний вид будет отличаться, так как моя форма стилизована под проект, css стили выкладывать не вижу смысла.

Вот здесь вы можете посмотреть другие формы getbootstrap.com/css/#forms

А теперь переделаем код в динамический с учетом синтаксиса Formit и AjaxForm , получим следующее.

[[+fi.error.name]] [[+fi.error.email]] [[+fi.error.pfone]] [[+fi.error.message]] Согласен на обработку персональных данных
[[+fi.error.opd]]

Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия Пользовательского соглашения

Теперь создаем еще один чанк, который будет формировать письмо, назовем его tpl-kontact-form со следующим содержимым:

Имя: [[+name]]

Email: [[+email]]

Телефон: [[+pfone]]

Сообщение: [[+message]]

Ну и сталось сделать вывод в нужном месте:

[[!AjaxForm? &snippet=`FormIt` &form=`kontact-form` &emailTpl=`tpl-kontact-form` &hooks=`spam,email` &emailSubject=`Сообщение с сайта [[++site_url]]` &emailTo=`[email protected]` &validate=`name:required,email:required` &validationErrorMessage=`В форме содержатся ошибки!` &successMessage=`Сообщение успешно отправлено!` ]]

Не забудьте поменять значение emailTo на свою почту.

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

Вот в принципе и все!

Урок, на котором рассмотрим создание формы обратной связи в CMF MODX Revolution, используя компоненты AjaxForm и FormIt.

FormIt – это компонент (сниппет) для MODX Revolution, предназначенный для обработки формы на стороне сервера. Он может осуществлять проверку полей формы (валидацию) перед дальнейшими действиями, защищать сайт от получения спама, отправлять данные формы на почту, хранить копии заполненных форм, осуществлять редирект на другую страницу (например, после успешной отправки формы на email), выполнять функцию автоответчика и многое другое.

Но для того чтобы работать с FormIt через AJAX необходимо использовать дополнительный компонент AjaxForm .

Перед тем как перейти к разработке формы обратной связи в MODX Revolution, рассмотрим основной алгоритм её работы.

После открытия некоторой страницы с формой (она берётся из чанка, указанного в параметре &form вызова сниппета AjaxForm при формировании страницы на сервере), пользователь переходит к её заполнению. Завершив заполнение, пользователь нажимает на кнопку "Отправить" и компонент AjaxForm (код JavaScript) отправляет её на сервер посредством AJAX. На сервере данный компонент запускает сниппет FormIt и передаёт ему данные формы. Обработав эти данные, сниппет FormIt формирует ответ, который через компонент AjaxForm передаётся клиенту и отображается на странице пользователю. Ответ может быть положительным (это значит, что форма прошла валидацию и, например, данные были успешно отправлены на почту) или отрицательным (например, при заполнении формы пользователь допустил некоторые ошибки).

Для создания формы обратной связи в MODX Revolution необходимо выполнить следующие основные шаги:

Рассмотрим шаги 2 и 4 более подробно.

Создание 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-код:

Имя* E-mail* Телефон Сообщение* Очистить Отправить

Открываем шаблон, который будет использовать ресурс и вводим код, который будет всё это осуществлять.

[[!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 без спама, надо её создать с дополнительными невидимыми полями:

1. Загружаем и устанавливаем компоненты Ajaxform и Formit

2. Форма вызывается очень просто, вы должны разобраться

[[!AjaxForm? &snippet=`FormIt` &form=`tpl.AjaxForm..ru ` &emailTo=`info@сайт` &validate=`name:required,email:required,message:required,work-email:blank` &validationErrorMessage=`В форме содержатся ошибки!` &successMessage=`Спасибо за заявку! Мы свяжемся с вами в ближайшее время.` &emailTpl=`mailtpl` ]]

Или через шабланизатор Fenom, вот так:

{$_modx->runSnippet("!AjaxForm", [ "snippet" => "FormIt", "form" => "tpl.AjaxForm.example", "hooks" => "email,spam" "emailFrom" => "[email protected]", "emailSubject" => "Заявка с сайта daruse.ru", "emailTo" => "[email protected]", "validate" => "name:required,email:required,message:required,work-email:blank", "validationErrorMessage" => "В форме содержатся ошибки!", "successMessage" => "Спасибо за заявку! Мы свяжемся с вами в ближайшее время.", "emailTpl" => "mailtpl", ])}

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

• snippet - сниппет для обработки AjaxForm, ставим Formit - он как раз и отправляет письма
• form - чанк оформления формы, стоит тот, который по умолчанию
• hooks - хуки для защиты от спама
• emailFrom - адрес, от которого приходит письмо
• emailTo - адрес, которому приходит письмо
• validate - валидация, тут также два невидимых поля
• validationErrorMessage - сообщение, которые будет выводиться, при не успешном вводе полей
• successMessage - сообщение, которые будет выводиться, при успешной отправке письма
• emailTpl - чанк, в котором храниться шаблон приходящего письма на почту (о нём читайте ниже)

3. После этого заходим в наш чанк оформления формы, в данном случае это tpl.AjaxForm.example и добавим после тега form, следующие два поля.

...

Теперь по Вашей форме не должен проходить спам, за счет двух новых полей.

4. Внешней вид приходящего письма

По умолчанию приходит на почту письмо без всякого форматирования в не очень читаемом формате. Поэтому давайте оформим немного наше письмо на примере.

Шаблон письма это простой чанк, который мы указываем в параметре emailTpl , тут всё очень просто, напишу пример оформления. Если будут вопросы, пишите в комментариях.

mailtpl:

На сайте [[++site_url]] оставили заявку.

Имя: [[+name]]

Почта: [[+email]]

Сообщение: [[+message]]

Пожалуйста свяжитесь с ним в ближайшее время.

Не отвечайте на это письмо, так как оно автоматическое.

Читайте о создании и c защитой от спама.

Добрый день! Сегодня я познакомлю вас с созданием формы обратной связи для Modx Revolution, фишкой которой будет необычная каптча (так как гугловская qaptcha слишком сложная и громоздкая). Делать обратную связь мы будем с помощью дополнения Formit. Установить вы его сможете, наверное, сами, ну а для тех, кто не знает как это сделать я все таки распишу урок от начала до конца. Начинаем!

Пропущу все моменты связанные с установкой MODX Revolution, настройкой системы, встраивание дизайна сайта и так далее. Начнем с установки пакета Formit.

Жмем "загрузить". После загрузки Formit у вас появиться в загруженных пакетах, жмем кнопку установить. Formit установлен!

Назовем его "form", и вставляем следующий код:

[[!Qaptcha]] [[!FormIt?&hooks=`spam,email,redirect` &emailTpl=`sentEmailTpl` &emailSubject=`Заявка на обратный звонок` &emailTo=`ваш электронный почтовый адрес` &redirectTo=`id страницы "Письмо успешно отправлено"` &validate=`contact_name:required,contact_phone_NA_format:required` &customValidators=`qaptcha.Slider`]] Имя\Компания* Телефон* E-mail [[+qaptcha.Slider]]

Здесь сам вызов сниппета Formit, форма и каптча, которую мы заставим работать в следующих пунктах. Не забываем в параметре emailTo указать почтовый ящик, на которое должно приходить письмо, а в redirectTo нужно поставить id страницы "Письмо успешно отправлено"

Он будет говорить, какую информацию отсылать на почту и вставляем туда код:

Имя: [[+contact_name]]
Email: [[+contact_email]]
Телефон: [[+contact_phone_NA_format]]
Примечание: [[+contact_message]]

В содержимое ресурса можно вставить текст типа: Мы получили ваше письмо! Спасибо за выбор нашей компании. Наш менеджер в кратчайшие сроки свяжется с Вами по контактному телефону, который Вы оставили в заявке!

Подключаем на страницу бибилотеку jquery:

В каталог assets/components/qaptcha/ помещаем папку images и jquery с содержимым, а в core/components/qaptcha/ - папку php с файлом Qaptcha.jquery

и поместим туда следующий код: