Modx ajax форма обратной связи. Формы обратной связи при помощи FormIt. Назначение компонентов FormIt и AjaxForm
FormIt 3.0 introduces an update to the encryption methods used for encrypting form submissions. Prior to 3.0 mcrypt was used, which in 3.0 is replaced with openssl, due to mcrypt being deprecated as of PHP 7.2. FormIt 3.0 comes with a migration page which is accessible from the manager.
As of FormIt 2.2.9, all fields will automatically have html_entities applied. To allow HTML tags to be saved/stored, you will need to use the allowSpecialChars validator on each field, that should save raw html tags.
As of FormIt 1.1.4, all fields will automatically have stripTags applied. To allow HTML tags to be saved/stored, you will need to use the allowTags validator on each field, stipulating which tags are permitted.
How to Use
Simply place the FormIt snippet call into the Resource that contains the form you want to use. Unlike similar predecessors (most notably eForm in MODX Evolution), you do not put the form into a Chunk and reference the Chunk in the FormIt snippet call: you literally put the snippet call along side the form you want it to process. Specify the "hooks" (or post-validation processing scripts) in the snippet call. Then add validation via the &validate and &customValidators parameters in the snippet tag.
If you have multiple forms on a page, set the &submitVar property on your Snippet call to a name of a form element within the form (ie, &submitVar=`form1-submit`). This tells FormIt to only process form requests with that POST variable. Multiple forms should be used with INPUT type="submit" name="form1-submit", button elements have been reported not working.
Available Properties
These are the available general properties for the FormIt call (not including hook-specific properties):
Name | Description | Default Value |
---|---|---|
preHooks | What scripts to fire, if any, once the form loads. This can be a comma-separated list of hooks , and if the first fails, the proceeding ones will not fire. A hook can also be a Snippet name that will execute that Snippet. | |
renderHooks | What scripts to fire, if any, once the form loads, preHooks are finished and all fields & errors has been set. This can be a comma-separated list of used for manipulating all the fields of the form before everything is set based on given data from other packages or preHooks. A hook can also be a Snippet name that will execute that Snippet. | |
hooks | What scripts to fire, if any, after the form passes validation. This can be a comma-separated list of , and if the first fails, the proceeding ones will not fire. A hook can also be a Snippet name that will execute that Snippet. | |
submitVar | If set, will not begin form processing if this POST variable is not passed. Notice: Needed if you use &store property (+ set submit var in input="submit"!). | |
validate | A comma-separated list of fields to validate, with each field name as name:validator (eg: username:required,email:required). Validators can also be chained, like email:email:required . This property can be specified on multiple lines. | |
validationErrorMessage | A general error message to set to a placeholder [[!+fi.validation_error_message]] if validation fails. Can contain [[+errors]] if you want to display a list of all errors at the top. | A form validation error occurred. Please check the values you have entered. |
validationErrorBulkTpl | HTML tpl that is used for each individual error in the generic validation error message value. | [[+error]] |
errTpl | The wrapper html for error messages. Note: not a chunk, just straight HTML. | [[+error]] |
customValidators | A comma-separated list of custom validator names (snippets) you plan to use in this form. They must be explicitly stated here, or they will not be run. | |
clearFieldsOnSuccess | If true, will clear the fields on a successful form submission that does not redirect. | 1 |
store | If true, will store the data in the cache for retrieval using the FormItRetriever snippet. | 0 |
storeTime | If "store" is set to true, this specifies the number of seconds to store the data from the form submission. Defaults to five minutes. | 300 |
storeLocation | When using store, this defines where the form is stored after submit. Possible options are "cache" and "session". Defaults to "cache". | cache |
placeholderPrefix | The prefix to use for all placeholders set by FormIt for fields. Make sure to include the "." separator in your prefix. | fi. |
successMessage | If not using the redirect hook, display this success message after a successful submission. | |
successMessagePlaceholder | The name of the placeholder to set the success message to. | fi.successMessage |
redirectTo | page ID of a "Thank You" page, where the visitor can be sent after successfully submitting the form, but this parameter is read ONLY if you include "redirect" in the list of &hooks. | |
allowFiles | Specify if files are allowed to be posted. Submitted files are stored in a temporary directory to prevent files getting lost in multistep forms. | true |
attachFilesToEmail | Attaches uploaded files in email, form needs to be set as enctype="multipart/form-data" | true |
Validation
Validation in FormIt is done via the &validate property, and can be used to automatically handle validation on any of the fields in your form.
For more information on validation in FormIt, see the
Практически на всех коммерческих сайтах есть страница контакты, на которой расположена контактная форма, через которую пользователи могут написать администрации сайта. Сегодня мы рассмотрим как по быстрому создать контактную форму. Реализовывать форму обратной связи мы будем при помощи пакета Formit в связке с пакетом AjaxForm , установите их если они у вас не установлены.
Создание формы обратной связи на MODX Revo с разрешением на обработку персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006.
Первым делом создаем чанк, в котором будет хранится сама форма, пусть это будет чанк «kontact-form» и помещаем в него код стандартной формы, я в основном делаю сайты с использованием bootstrap, так что возьму стандартную заготовку немного переделанную, ее статический код будет таким:
Ваш внешний вид будет отличаться, так как моя форма стилизована под проект, css стили выкладывать не вижу смысла.
Вот здесь вы можете посмотреть другие формы getbootstrap.com/css/#forms
А теперь переделаем код в динамический с учетом синтаксиса Formit и AjaxForm , получим следующее.
Теперь создаем еще один чанк, который будет формировать письмо, назовем его 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 — docs.modx.com/extras/revo/formit
- AjaxForm — docs.modx.pro/components/ajaxform
Вот в принципе и все!
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 - Форма обратной связи, не прошедшая валидацию
У меня уже есть пару уроков по созданию форм на 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=`имя формы на английском`
у каждой формы свое имя.
Борьба со спамом
Как не крути, но вы однозначно столкнетесь со спамом — самый эффективный способ для борьбы с ним — , так же можете попробовать .