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

Создание формы обратной связи на MODX Revo с разрешением на обработку персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006.

Первым делом создаем чанк, в котором будет хранится сама форма, пусть это будет чанк «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 и принимаю условия Пользовательского соглашения

Отправить [[+fi.success:is=`1`:then=` [[+fi.successMessage]]`]] [[+fi.validation_error:is=`1`:then=`[[+fi.validation_error_message]]`]]

Теперь создаем еще один чанк, который будет формировать письмо, назовем его 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

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

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

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

И для этого нам не придется писать ни одной строчки кода!

Давайте, посмотрим, что, например, можно сделать с формами :

Во первых, уберем лишние пункты верхнего меню в один общий пункт - «Разработчику». Для этого заходим в раздел «Система» -> «Действия», создаем в корне новый пункт меню и перетаскиваем все ненужные пункты туда:

Дальше заходим в раздел «Безопасность» -> «Настройка форм» и создаем новый профиль, например, «Контент-менеджер». Потом нажимаем на нем правой кнопкой мыши и выбираем «Редактировать», переходим на вкладку «Группы пользователей» и добавляем группу, к которой будут применены новые правила.

Далее мы создаем новый набор правил. Их два вида - один для формы создания ресурса, второй - для формы его редактирования (create и update, соответственно). Этих правил может быть несколько - хоть по правилу для каждого ресурса.

После того, как правило будет создано, вы увидите страницу настройки - там три вкладки: Информация о наборе правил, Регионы, Дополнительные поля.

На первой вкладке перечислены стандартные поля ресурса. Их можно отключать или переименовывать. Регионы - это вкладки у ресурса. Вы можете создать новый регион и поместить туда некоторые ТВ-параметры, тогда они будут у ресурса не на вкладке «Дополнительные поля», а на новой вкладе - которую вы укажете. Здесь же можно отключать стандартные вкладки, например, «Группы ресурсов».

На третьей вкладке вы указываете расположение того или иного ТВ-параметра.

Я сделал небольшую шпаргалку по стандартным регионам:

Итак, давайте сразу уберем для пользователя все вкладки, кроме первой. Убираем галочки у регионов: modx-page-settings, modx-panel-resource-tv, modx-resource-access-permissions. Дальше - из стандартных полей оставим только pagetitle и alias. У остальных галочки убираем. Указываем новое название для поля pagetitle: «Заголовок новости» и alias: «Адрес страницы».

После этого переходим на вкладку «Дополнительные поля» и указываем, что ТВ-параметры должны находиться в той или иной области формы (в соответствии со шпаргалкой).

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

Давайте, укажем, что это правило относится к ресурсам, находящимся в «Новостях» - в пункте «Ограничивающее поле» пишем parent , а в «Ограничивающее значение» id ресурса «Новости», например, 22 .

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

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