Форма обратной связи MODX revo. Как сделать форму обратной связи в ModX Revolution с помощью FormIt Modx ajax форма обратной связи

Для создания формы на 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:notempty=`

Имя: [[+name]]

`]] [[+email:notempty=`

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

`]] [[+message:notempty=`

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

`]]

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

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

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

У нас осталась только одна страница, которую мы еще не переделали. Это страница Контакты . Здесь у нас помимо контактной информации будет расположена форма обратной связи. В 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+]

Ваше имя

Email:

Тема сообщения

Запрос информации
Техническая поддержка
Предложение

Текст сообщения

Введите этот код:

Где [+validationmessage+] - отвечает за вывод сообщений об ошибке заполнения при отправке формы.
action="[~[*id*]~] - указывает, что обработчиком формы будет та страница, на которой вызван сниппет. Вместо [~[*id*]~] MODx подставит URL текущего документа.
указывает идентификатор формы, который мы укажем при вызове сниппета.
label accesskey - устанавливает доступ к элементам формы с помощью горячих клавиш.
eform="Адрес электронной почты:email:1" - описывает поле для ввода почтового адреса, указывает тип вводимых данных и делает это поле обязательным для заполнения. Вообще, шаблон для заполения этого параметра следующий: eform="[описание поля]:[тип вводимых данных]:[обязательное ли поле]:[сообщение об ошибке ввода]:[правило проверки ввода]" . Но нам достаточно только трех значений. Аналогично этому параметру заполяется eform="Имя::1".
[+verimageurl+] отвечает за вывод капчи.

Создаем чанк с уведомлением посетителя об отправке сообщения

Создаем чанк thank-tpl

Спасибо, что воспользовались формой обратной связи на нашем сайте.

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

Отправленная информация:

• Ваше имя: [+author+]


• Ваш e-mail: [+email+]


• Текст сообщения: [+text+]

Создаем чанк с формой отправленного сообщения

Создаем чанк report-tpl и в его содержимое помещаем следующий код:

Это сообщение было отправлено посетителем по имени [+author+] с помощью формы обратной связи.

Имя:	[+author+]
Email::	[+email+]
Сообщение:	[+text+]

В этом чанке, как и в предыдущем, вся введенная пользователем информация передается с помощью плейсхолдеров вида [+author+]. При этом название каждого плейсхолдера совпадает со значением атрибута «name» соответствующего поля в чанке с формой обратной связи (name="author", name="email" name="text").

Создаем чанк с вызовом формы обратной связи

Создаем чанк с именем form и помещаем туда конструкцию:

[!eForm? &formid=`Send` &tpl=`form-tpl` &to=`[email protected],[email protected],[email protected]` &mailselector=`otdel` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Сообщение с моего сайта`!]

Где &formid=`Send` - идентификатор формы, который мы указывали в чанке form-tpl
&tpl=`form-tpl` - шаблон для формы обратной связи
&to=`[email protected],[email protected],[email protected]` - адрес Email для отправки информации
&mailselector=`otdel` - устанавливает поле формы, которое будет использоваться при выборе единственного адреса из списка адресов разделенных запятой (,) в параметре &to . В нашем случае это выпадающий список в чанке form-tpl, где otdel принимает значения 1,2 или 3, в зависимости от выбранной посетителем темы.
&report=`report-tpl` - шаблон отправляемой информации
&thankyou=`thank-tpl` - сообщение выводимое после отправки данных
&vericode=`1` - включает код проверки. Шаблон должен содержать поле для проверки и плэйсхолдер [+vericode+].
&subject=`Сообщение с моего сайта` - тема отправляемого сообщения

Помещаем вызов формы обратной связи в шаблон

Создаем чанк contacty , в который помещаем следующий код:

Наш адрес
ХХХХХХХХХХХХХХХХХХХХХХХХ

ХХХХХХХХХХХХХХХХХХХХХХХХ

ХХХХХХХХХХХХХХХХХХХХХХХХ



Email: хххххх@хххххх.ххх

Дополнительный офис
ХХХХХХХХХХХХХХХХХХХХХХХХ

ХХХХХХХХХХХХХХХХХХХХХХХХ

ХХХХХХХХХХХХХХХХХХХХХХХХ



Email: хххххх@хххххх.ххх

{{form}}

На странице Контакты помещаем вызов чанка contacty:

{{contacty}}

Изменяем стили

Находим в файле со стилями описание наших кнопок:

margin-left: 108px;
padding: 5px 10px;
background: #cecece;
border: 1px solid #888888;
}

Из-за того, что мы вставили русские надписи к кнопкам Отправить и Сбросить, они сдвинулись. Еще мне не нравится, что при наведении курсора на кнопку, вид курсора не изменяется, я хочу это исправить. За одно, давайте сделаем так, чтобы кнопка меняла цвет при наведении курсора. Ну и сдвинем капчу вправо. Итак, вместо описания стиля, который я привел выше мы вставим вот что:

#contact_form form .submit_btn {
margin-left: 55px; /*Изменяем левый отступ у кнопок*/
padding: 5px 10px;
background: #cecece;
border: 1px solid #888888;
}
#contact_form form .submit_btn:hover {
margin-left: 55px;
padding: 5px 10px;
background: #505050; /*Указываем цвет кнопки при наведении курсора*/
border: 1px solid #888888;
color: #fff; /*Меняем цвет текста*/
cursor: pointer; /*Изменяем вид курсора*/
}
#contact_form form img {
padding: 0 0 0 90px; /*Сдвигаем вправо картинку с кодом*/
}

Если все сделали правильно, форма примет следующий вид:

Теперь пробуем заполнить форму и отправить письмо. Так как мы используем локальный сервер, все поступающие письма можно посмотреть в папке C:\xampp\tmp\sendmail\ . Помните, мы создавали эту папку при установке XAMPP?

Можно задать свой список слов для генерации в капче, делается это на странице системной конфигурации Инструменты >> Конфигурация >> Пользователи >> Слова для генерации CAPTCHA-кодов :

На этом интеграция дизайна нашего сайта в MODx полностью завершена. Осталось выложить наш сайт на каком-нибудь хостинге. Этим мы займемся на следующем уроке.

При создании этого урока использованы материалы с сайта

У меня уже есть пару уроков по созданию форм на 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=``]] Ваше имя*: [[!+fi.error.name]] Ваш телефон*: [[!+fi.error.phone]] Ваш Email*: [[!+fi.error.email]] Сообщение: [[!+fi.error.message]] Отправить

Разбор кода, идем сверху в низ:

&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"

и соответственно добавить поля для прикрепления файла

Прикрепить файл [[!+fi.error.upload]]

Обработка чекбоксов и option

Несколько форм на одной странице

Просто в вызовах каждой формы пропишите

&submitVar=`имя формы на английском`

у каждой формы свое имя.

Борьба со спамом

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

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

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

1. Заходим в Система - Управление пакетами

2. Жмем "Загрузить дополнения"

3. Выбираем из списка Formit

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

4. Далее создаем новый чанк

Назовем его "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 страницы "Письмо успешно отправлено"

5. Создаем чанк sentEmailTpl

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

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

6. Создаем новый документ под названием "Письмо успешно отправлено"

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

7. Теперь займемся самой Каптчей

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

8. Создаем каталоги assets/components/qaptcha/ и core/components/qaptcha/

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

9. Создаем сниппет Qaptcha

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