Форма обратной связи modx на MODX без спама. Форма обратной связи MODX revo Не работает форма обратной связи modx evolution

Для создания формы на 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 защитой от спама.

Практически на всех коммерческих сайтах есть страница контакты, на которой расположена контактная форма, через которую пользователи могут написать администрации сайта. Сегодня мы рассмотрим как по быстрому создать контактную форму. Реализовывать форму обратной связи мы будем при помощи пакета 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 на свою почту.

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

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

У меня уже есть пару уроков по созданию форм на 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]]

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

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

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

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

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

Добрый день! Сегодня я познакомлю вас с созданием формы обратной связи для 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

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