В MODX есть интересная возможность - вы можете менять внешний вид формы редактирования ресурсов практически как вам хочется. Причем вы можете сделать разные формы для разных групп пользователей, и даже для разных ресурсов. Можно выбирать разные профили форм для данного ресурса в зависимости от его шаблона, родителя или других свойств.
И для этого нам не придется писать ни одной строчки кода!
Давайте, посмотрим, что, например, можно сделать с формами :
Во первых, уберем лишние пункты верхнего меню в один общий пункт - «Разработчику». Для этого заходим в раздел «Система» -> «Действия», создаем в корне новый пункт меню и перетаскиваем все ненужные пункты туда:
Дальше заходим в раздел «Безопасность» -> «Настройка форм» и создаем новый профиль, например, «Контент-менеджер». Потом нажимаем на нем правой кнопкой мыши и выбираем «Редактировать», переходим на вкладку «Группы пользователей» и добавляем группу, к которой будут применены новые правила.
Далее мы создаем новый набор правил. Их два вида - один для формы создания ресурса, второй - для формы его редактирования (create и update, соответственно). Этих правил может быть несколько - хоть по правилу для каждого ресурса.
После того, как правило будет создано, вы увидите страницу настройки - там три вкладки: Информация о наборе правил, Регионы, Дополнительные поля.
На первой вкладке перечислены стандартные поля ресурса. Их можно отключать или переименовывать. Регионы - это вкладки у ресурса. Вы можете создать новый регион и поместить туда некоторые ТВ-параметры, тогда они будут у ресурса не на вкладке «Дополнительные поля», а на новой вкладе - которую вы укажете. Здесь же можно отключать стандартные вкладки, например, «Группы ресурсов».
На третьей вкладке вы указываете расположение того или иного ТВ-параметра.
Я сделал небольшую шпаргалку по стандартным регионам:
Итак, давайте сразу уберем для пользователя все вкладки, кроме первой. Убираем галочки у регионов: modx-page-settings, modx-panel-resource-tv, modx-resource-access-permissions. Дальше - из стандартных полей оставим только pagetitle и alias. У остальных галочки убираем. Указываем новое название для поля pagetitle: «Заголовок новости» и alias: «Адрес страницы».
После этого переходим на вкладку «Дополнительные поля» и указываем, что ТВ-параметры должны находиться в той или иной области формы (в соответствии со шпаргалкой).
Осталось указать, для каких ресурсов действует это правило - в пункте «Шаблон» указваем, к ресурсам с каким шаблонам применять правило. Если правило для всех шаблонов, то ничего не указываем. И еще есть два пункта: «Ограничивающее поле» и «Ограничивающее значение». Здесь можно указывать остальные поля.
Давайте, укажем, что это правило относится к ресурсам, находящимся в «Новостях» - в пункте «Ограничивающее поле» пишем parent , а в «Ограничивающее значение» id ресурса «Новости», например, 22 .
У меня уже есть пару уроков по созданию форм на 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. Заходим в Система - Управление пакетами
Жмем "загрузить". После загрузки 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]]
В содержимое ресурса можно вставить текст типа: Мы получили ваше письмо! Спасибо за выбор нашей компании. Наш менеджер в кратчайшие сроки свяжется с Вами по контактному телефону, который Вы оставили в заявке!
7. Теперь займемся самой КаптчейПодключаем на страницу бибилотеку jquery:
8. Создаем каталоги assets/components/qaptcha/ и core/components/qaptcha/
В каталог assets/components/qaptcha/ помещаем папку images и jquery с содержимым, а в core/components/qaptcha/ - папку php с файлом Qaptcha.jquery
и поместим туда следующий код:
