Как сделать форму на MODx?
Возьмём главные способы создания форм обратной связи на сайтах под управлением Modx Revolution. Выбор способа зависит от навыков разработчика или сложности формы.
Написать самому
Классический «дедовский» способ написания кода «с нуля» — построение html–структуры, написание файла-обработчика, отправляющего входные данные.
Преимущества самописного кода для обратной связи очевидны — полная вариативность результата и функционала. Закрывает любые цели, использует любые технологии.
Но есть недостатки:
Итог: тратить время на написание с абсолютного нуля имеет смысл лишь в особо «запущенных» случаях, когда нужен уникальный результат с уникальным функционалом.
Formit для Revo
Самое «народное» решение — форма обратной связи MODx Revo через компонент FormIT. Это стандартный компонент «модикса», позволяющий быстро создавать простые формы для отправки пользовательских данных на электронную почту из любого места сайта.
Разберем пример простой пример работы с Formit. В том месте, где будет отстраиваться форма, необходимо разместить чанк. В него добавить вызов сниппета с минимально необходимым набором параметров:
Выше — готовый код сниппета, который можно добавить в новый чанк с формой. Не забудьте удалить строки с комментариями, начинающиеся с //!
После написания сниппета нужно прописать в том же чанке HTML-код. Он должен отвечать следующим правилам:
Чтобы форма обрабатывалась без перезагрузки страниц используют сниппет AjaxForm. Он по умолчанию рассчитан на работу с FormIt, но вы можете использовать и собственный сниппет.
Как работает AjaxForm?
Сниппет AjaxForm — является оберткой для Formit и отвечает только за асинхронную отправку.
Для его настройки необходимо заменить код вызова FormIt (снипет в начале текста) на вызов AjaxForm, задать в качестве параметра snippet — FormIt и передать все параметры, которые были в вызове Formit.
В данном случае часто возникают конфликты скриптов и библиотек. Для отладки всего этого Вам понадобятся минимальные знания JavaScript.
Недостатками использования связки Formit (и AjaxForm) являются:
Итог: использовать FormIt как основу — вероятно лучший вариант для команды разработчиков. При наличии нужных навыков можно разработать практически любую обратную связь. Простую и рабочую форму можно скопировать из примеров выше.
Онлайн-конструкторы
Есть более простые варианты, не требующих от пользователей никаких знаний вообще. Сервисы-конструкторы обратной связи исчисляются 10-ками и почти все отлично работают с MODx. Другое дело — функционал внутри сервисов: многие из них стоят неоправданно высоко, где-то не хватает важных фишек и почти везде бесплатная версия сервиса урезана до полной бесполезности.
Мы разберём работу подобных сервисов на примере QForm24 — он достаточно прост для пользователей любого уровня и имеет полноценный функционал даже в бесплатной версии.
После регистрации и добавления сайта в сервис нужно вручную в визуальном конструкторе создасть свою форму.
Основные настройки сайта, добавленного в конструктор
Первый шаг — это настройка «скелета». Определите, какие поля и кнопки будет содержать форма, какие плейсхолдеры, имена иметь, поставьте обязательные поля.
Выбраны и настроены все поля форм и кнопка
Настройте адрес для отправки заявки. При помощи меню выберите, с каким CMS и по какому протоколу будет работать элемент. Это необходимо для корректной обработки ошибок и интеграции.
Опционально можно установить галку с принятием «Соглашения об обработке» и настроить капчу. Подобный функционал не везде доступен на бесплатном тарифе, но в QForm нет ограничений по настройкам.
Здесь можно задать текст соглашения об обработке ПД
В финале настройте дизайн — оформление, выбор цветовой темы и фона, вида кнопок. На сервисах почти всегда доступны шаблоны оформления, где-то можно разработать дизайн с нуля (как правило и то и другое ограничено тарифом). На QForm доступные шаблоны и адаптация дизайна под существующие стили сайта.
Настройка дизайна формы
В первом случае останется выбрать шаблон и вставить строчку кода в чанк, который будет выводить форму обратной связи. После вставки чанка в любое место сайта, он автоматически выводит там обратную связь. Для настройки дизайна потребуется чуть больше времени, подробнее здесь.
В конце настраивается отправка сообщений или интеграция с CRM.
Итог: вне зависимости от сложности работы и опыта предыдущего пользования, отправить первую успешную заявку вы сможете через 10-30 минут, бесплатно без каких либо ограничений.
Почитать полезную информацию по сервису или бесплатно попробовать создать первую форму обратной связи можно ниже.
MODX. Создание и обработка форм с использованием FormIt
Отредактировано: 20 Февраля 2019
FormIt — компонент который обрабатывает поля формы после нажатия кнопки «Отправить». Не стоит расценивать его как компонент которым можно создавать форму, это лишь помощник в настройке уже подготовленной формы, избавляющий от написания своих PHP скриптов.
У FormIt есть Хуки (Hooks) — скрипты, которые выполняются во время обработки. Хуки могут быть линейными, т.е. выполняются по очереди, а могут быть последовательными, т.е. если выполнено условие первого хука, то начнется выполнение следующего хука.
Существуют также Прехуки (Pre-Hooks), скрипты, которые выполняются до загрузки формы. К примеру скрипт который устанавливает значение по умолчанию для полей форм в старых браузерах, которые не поддерживают соответствующие html плейсхолдеры.
Можно создавать собственные хуки и прехуки указывая их в параметрах preHook и hook FormIt. Стоит учитывать, что они будут выполняться в порядке указанном при вызове, поэтому, если один из скриптов выдал ошибку, сломаются и последующие.
Подключение простой формы с использованием FormIt
Добавим некешируемые плейсхолдеры FormIt ([[!+fi.код_поля]])
(префикс fi при желании можно изменить свойством placeholderPrefix при вызове сниппета)
Создаем чанк письма, которое будет приходить на почту после отправки результатов формы. К примеру mailtpl.feedback:
Вызываем сниппет FormIt
К коду выше добавляем параметры для проверки заполненности обязательных полей и другие параметры проверки:
Добавим оповещение пользователя, о неправильно заполненном поле. В специально отведенное для сообщения об ошибке место (к примеру в тег ) вставляем код:
Вместо оповещения об ошибках рядом с полями, можно создать специальный блок, в котором будут указаны все ошибки разом. Для этого надо обернуть код выше в специальный плейсхолдер, примерно так:
Анти-спам
Метод от Ильи Уткина, добавить замаскированное поле, которое будет отвечать на спам успешной отправкой, благодаря чему спам-бот и его хозяин сочтут что сообщение отправлено:
AjaxForm
Сниппет ajaxForm представляет из себя надстройку над FormIt реализующую Ajax вызов. Вызов сниппета
Подробнее на странице об AjaxForm
Параметры FormIt
| По умолчанию | Описание | |
| hooks | Скрипты, которые запускаются после того как нажимается кнопка отправки. Сюда также можно записать имя сниппета, который должен воспроизводиться после отправки формы. | |
| preHooks | Скрипты, которые запускаются после загрузки формы. Сюда также можно записать имя сниппета, который должен воспроизводиться после отправки формы. | |
| submitVar | Префикс для плейсхолдеров полей формы, которые должен обрабатывать FormIt. Разделитель в виде точки ‘.’ обязателен. | |
| successMessage | Если не используется переадресация, отобразите это сообщение об успешном завершении после успешной отправки. | |
| successMessagePlaceholder | fi.successMessage | Имя плейсхолдера, для размещения сообщения об успешной отправке. |
| redirectTo | ID страницы, с сообщением отображающимся после отправки формы. Является частью хука redirect, работает только с его подключением. | |
| allowFiles | true | Разрешены ли файлы для публикации. Отправленные файлы хранятся во временном каталоге, для предотвращения потери файлов в многоэтапных формах. |
Хуки (hooks)
Хуки — специальные скрипты, которые запускаются во время обработки FormIt. Хуки могут быть связаны, к примеру, второй хук начнет выполняться только если первый отработан успешно.
Список предустановленных хуков
Email — отправляет результат формы на почту (активирует функцию mail()).
FormItAutoResponder — отправляет автоответ автору сообщения.
math — добавляет математическую капчу к форме.
Подобная капча выглядит как вопрос формата: 12 + 23?
Для ее интеграции надо добавить math к параметру &hooks и валидацию к соответствующему полю
В нужное место формы вставить вызов
Дополнительные параметры хука math
| По умолчанию | ||
| mathMinRange | Минимальное допустимое число | 10 |
| mathMaxRange | Максимальное допустимое число | 100 |
| mathField | Имя поля с ответом | math |
| mathOp1Field | Устаревший параметр. Имя поля для первого числа в уравнении. | op1 |
| mathOp2Field | Устаревший параметр. Имя поля для второго числа в уравнении. | op2 |
| mathOperatorField | Имя поля определяющего оператор уравнения | operator |
Кастомизация хука math
recaptcha — добавляет рекапчу к форме.
Хук recaptcha предназначен для вставки в форму устаревшей версии рекапчи от гугл. На момент написания статьи лучше установить и использовать хук recaptchav2.
Для использования recaptcha надо добавить подключение в параметр hooks
и вставить следующие теги в нужное место формы
затем прописать ключи google в системные настройки:
Дополнительные настройки хука recapture
Ключи можно получить на странице google recapture
redirect — перенаправляет пользователя на специальный ресурс, при завершении отправки.
При переадресации, значения полей формы не будут доступны на конечном ресурсе. Если необходимо передать значения полей формы, можно использовать свойство &store компонента FormItRetriever.
spam — проверяет все поля формы, указанные в свойстве spamEmailFields, на фильтр спама через StopForumSpam. Если пользователь помечен как спамер, форма покажет сообщение об ошибке.
Не рекомендуется использовать IP для проверки спама, поскольку спамеры могут легко изменять IP-адреса, а проверка IP-адресов может выдать ложное срабатывание.
FormItSaveForm — хук для сохранения результатов формы внутри панели менеджера.
Список расположен в Приложения (Extras) => FormIt. Доступные настройки:
Дополнительные хуки
Помимо предустановленных хуков можно писать свои или скачивать их с репозиториев. Для написания своего хука можно использовать сниппет, указав в параметре hooks его название.
Список полезных хуков которые можно скачать:
recaptchav2 — хук для интеграции с рекапчей от гугл второй и третьей версии.
Для интеграции надо добавить подключение в параметр hooks:
и вставить следующие теги в нужное место формы:
затем прописать ключи google в системные настройки:
для рекапси 3 версии используйте соответствующие настройки:
Ключи можно получить на странице google recapture
Селекты, чекбоксы, переключатели
(selects, checkboxes, radio buttons)
Для множественных полей формы, таких как селекты, чекбоксы и переключатели, стандартный способ подключения не сработает. Для таких случаев в FormIt предусмотрены сниппеты FormItIsSelected и FormItIsChecked.
Оформление select поля
Оформление checkbox и radio поля
У html чекбоксов есть особенность — если значение отсутствует, параметр не передаётся, это так же влияет на проверку заполненности поля. Для того, чтобы отправить пустое значение, необходимо добавить скрытое input поле
Таким образом можно проверить, выбран ли хотябы 1 флажок.
Если надо установить поле с массивом значений (группу флажков, с одинаковым именем, или множественный селект) в преХук, надо сперва раскодировать данные из json формата
Настройка целей для счетчиков
Возможные ошибки
— Если FormIt говорит об успешной отправке формы, но письмо на почту не приходит, стоит проверить
Если же на сервере стоит версия php 5.4 и выше, то искать проблему стоит в логах Modx (core/cache/logs/error.log) и сервера. Если записей в логах нет, попробуйте переустановить компоненты FormIt и AjaxForm, и посмотрите, не вылезают ли ошибки во время установки. Если компонент ругается на ошибки, проставьте соответствующим папкам на сервере права доступа 700. И попробуйте переустановить снова (кнопка reinstall может не помочь, иногда эффективнее воспользоваться uninstall). Подробнее об ошибке 500.
— Если в списке отправленных форм, на странице FormIt в админ панели, вместо нормального списка отображается массив символов — вероятно вы раньше времени перешли на php 7.1, спуститесь на 7.0, либо ждите фикса компонента.
FormIt email хук¶
Email хук отправит содержимое вашей HTML формы на любой адрес электронной почты.
Поддерживаемые параметры¶
Любое из свойств email хука может содержать плейсхолдеры имен полей из вашей формы, которые будут обрабатываться.
Использование¶
Просто укажите его как хук в вызове FormIt, а затем укажите свойства электронной почты в вызове FormIt.
Обратите внимание, что свойство &emailTpl указывает на имя чанка. В этом блоке у вас будут плейсхолдеры для каждого поля в вашей форме. Наш чанк может выглядеть так:
Это конечно предполагает, что у вас есть поля «name», «cdo_package» и «email» в вашей форме.
Добавление динамики в адресацию¶
FormIt, начиная с версии 4.2.5+, мог выбирать получателя почты по числовому значению поля, то есть по значению параметра ‘select’. Таким образом можно избежать создания поддельного поля формы, в котором пользователь может легко отправить любой почтовый адрес. Пользователь будет видеть только нумерованный список получателей, которые будут перенаправлены на адреса электронной почты с помощью свойств FormIt.
Для этого вы можете использовать следующие свойства FormIt:
и следующее поле формы
Использование поля Темы в качестве строки Темы электронного письма¶
Предположим, у вас есть поле темы в вашей форме. Вы хотите, чтобы это было темой отправляемого электронного письма. Хук электронной почты может делать следующее:
Работа с чекбоксами и множественным выбором в электронном письме¶
FormIt email хук¶
Email хук отправит содержимое вашей HTML формы на любой адрес электронной почты.
Поддерживаемые параметры¶
Любое из свойств email хука может содержать плейсхолдеры имен полей из вашей формы, которые будут обрабатываться.
Использование¶
Просто укажите его как хук в вызове FormIt, а затем укажите свойства электронной почты в вызове FormIt.
Обратите внимание, что свойство &emailTpl указывает на имя чанка. В этом блоке у вас будут плейсхолдеры для каждого поля в вашей форме. Наш чанк может выглядеть так:
Это конечно предполагает, что у вас есть поля «name», «cdo_package» и «email» в вашей форме.
Добавление динамики в адресацию¶
FormIt, начиная с версии 4.2.5+, мог выбирать получателя почты по числовому значению поля, то есть по значению параметра ‘select’. Таким образом можно избежать создания поддельного поля формы, в котором пользователь может легко отправить любой почтовый адрес. Пользователь будет видеть только нумерованный список получателей, которые будут перенаправлены на адреса электронной почты с помощью свойств FormIt.
Для этого вы можете использовать следующие свойства FormIt:
и следующее поле формы
Использование поля Темы в качестве строки Темы электронного письма¶
Предположим, у вас есть поле темы в вашей форме. Вы хотите, чтобы это было темой отправляемого электронного письма. Хук электронной почты может делать следующее:
Работа с чекбоксами и множественным выбором в электронном письме¶
FormIt
Что такое FormIt?¶
История¶
FormIt был написан Shaun McCormick как Компонент для обработки форм и впервые выпущен 19 октября 2009 г. В настоящее время поддерживается командой Sterc.
Скачать¶
Formit можно загрузить из Менеджера MODX Revolution через Управление пакетами или из репозитория MODX здесь: https://modx.com/extras/package/formit.
Разработка и ошибки¶
FormIt хранится и разрабатывается в GitHub, и его можно найти здесь: https://github.com/Sterc/FormIt
Документацию по API также можно найти здесь: https://api.modx.com/formit/
Важные изменения¶
Как использовать¶
Если у вас есть несколько форм на странице, установите для свойства &submitVar в вызове Cниппета имя элемента формы (например, &submitVar = form1-submit ). Это указывает FormIt обрабатывать запросы формы только, если в переданных полях формы (POST) есть эта переменная. Если у вас на одной странице несколько форм, обрабатываемых Formit, следует использовать теги с INPUT type = «submit» name = «form1-submit», элементы button работать не будут.
Доступные свойства¶
Это доступные общие свойства для вызова FormIt (не включая свойства, специфичные для хуков):
Валидация¶
Проверка в Formit выполняется с помощью свойства &validate и может использоваться для автоматической обработки любого из полей вашей формы.
Для получения дополнительной информации о проверке в FormIt смотрите Валидаторы.
Если какой-либо хук завершится с ошибкой, последующие за ним не будут выполняться.
Для получения дополнительной информации о хуках смотрите Хуки.