Formit сообщение об успешной отправке

Обновлено: 02.07.2024

FormIt это динамически обрабатываемый сниппет для MODX Revolution. Он обрабатывает форму после представления, выполняет проверку и последующие действия, такие как отправка письма на email. Он не генерирует форму, но может перезаполнить её в случае некоректно введённых данных.

История изменений

Shaun McCormick написал FormIt как форму дополнительной обработки и впервые опубликовал дополнение 19 октября 2009г.

Загрузка

Вы можете скачать дополнение через менеджер пакетов Modx (Система->управление пакетами->загрузить дополнения) или скачать из

Разработка и отчёт об ошибках

FormIt разрабатывается и хранится на GitHub и доступен по

Как использовать

Просто поместите вызов снипета FormIt в ресурс, содержащий вашу форму. В отличие от аналогичных предшественников (в первую очередь eForm в MODx Evolution) вы можете не помещать форму в чанк, а сослаться на чанк при вызове снипета. Укажите "хуки" (или сценарии пост-обработки) в вызове снипета. Затем добавте проверку с помощью &validate и &customValidators параметров в снипете.

Если у вас несколько форм на странице, установите свойство &submitVar в вызове вашего сниппета, в соответствии с именем элемента в форме (то есть, например, &submitVar=`form1-submit`). Это укажет FormIt обрабатывать указанный POST запрос.

Доступные свойства

Доступны следующие общие свойства для вызова FormIt (не включая хук - специфические свойства ) :

A form validation error occurred. Please check the values you have entered.(Произошла ошибка проверки формы, проверте введёные значения).

Проверка

Проверка в FormIt осуществляется через &validate свойство , и может быть использована для автоматической проверки любого из полей в форме.

Для более подробной информации о проверке в FormIt, посетите .

Хуки в основном сценарии, которые выполняются во время обработки FormIt. Они могут быть соеденены последовательно. Т.е. следующий хук будет выполнятся только в случае успеха предыдущего.

MODX Revo

В данном уроке подробно разберем документацию по компоненту для отправки форм: FormIt и различные фишки к нему. И разберем пример как создать сложную форму.

Что такое FormIt?

FormIt — это MODX сниппет для обработки формы. Обрабатывает форму после нажатия на кнопку отправки: выполняет проверку и последующие действия, такие как отправка электронного письма. Он не генерирует форму, но может повторно заполнить ее, если она не прошла проверку.

Установка

Установка у него стандартная из основного репозитория MODX.

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

Доступные свойства (параметры)

Это доступные общие свойства для вызова FormIt (не включая специфичные для ловушки свойства):

Проверка

Проверка в FormIt выполняется через свойство &validate и может использоваться для автоматической обработки проверки в любом из полей вашей формы.

Хуки — это в основном скрипты, которые запускаются во время обработки FormIt. Хуки всегда выполняются в порядке их появления в свойстве. Если, например, у вас есть хук электронной почты, за которым следует хук проверки, электронное письмо будет отправлено до того, как произойдет проверка.

Если какой-либо хук потерпит неудачу, последующие не будут выполнены.

Теории думаю достаточно, перейдем к практике.

Создание страницы контакты

Создадим ресурс (документ) контакты и назначим ему шаблон Статика (созданный в предыдущем уроке).

И в настройках ресурса отключим html редактор, после чего сохраним страницу.

Теперь открываем файл contact.html копируем из него контентную часть с картой и формой и вставляем в содержимое созданной страницы и снова сохраняем ее.

Если сейчас перейти на эту страницу, то увидим следующее:

Все как в оригинале не считая того что нет хлебных крошек, которые скоро внедрим. Здесь мне не очень нравится, что карта от гугла сверху, я ее перенесу в низ (под форму) и заменю на яндекс карту. С права от формы заменю английские поля — выведу их из настроек ClientConfig (либо можно в ручную заполнить). С этим думаю разберетесь самостоятельно. Приступил к русификации и посадке формы на FormIt.

Создание контактной формы на FormIt

Начнем с разметки, первым делом разметим элемент form, сейчас он выглядит так:

Краткий разбор всего вышеописанного:

required — поле обязательно для заполнения;
minLength=^30^ — минимальное количество вводимых символов должно быть не меньше 30;
maxLength=^21^ — максимальное количество вводимых символов должно быть не более 21;
email — вводимый тип email.

А теперь перезагрузим страницу (CTRL+F5) все заполним и отправим.

И на почту придет уже более информативное письмо!

Дополнительно — для создания более сложных форм или просто смены логики

Перенаправление после успешной отправки на другую страницу

Используйте для этого хук redirect.

Примечание! Тогда из вызова формы выше можно (нужно) удалить параметр successMessage и убрать обвертку формы: [[!+fi.successMessage:default=`здесь весь код формы`]] .

Сохранение форм в административной панели MODX

Для того чтобы форма сохранялась в админке, вам нужно воспользоваться хуком FormItSaveForm.

Чтобы хук заработал нам его нужно указать в вызове, а также заполнить дополнительные параметры formName — название формы, formFields — перечисление полей для сохранения и fieldNames — делаем поля русскими. Пример для нашей формы указанной выше:

Прикрепление файлов к форме

Соответственно замените значения ваш_email и ваш_домен на свои. Создайте чанк testForm со следующим содержимым:

Текст: [[+text]]

Если вообще не чего не отравляется (даже с базовой формы с рекомендациями описанными выше). Первым делом идем в логи (Управление — Отчеты — Журнал ошибок) и смотрим их. Если там пусто, можете попробовать альтернативный вариант: проверять отправку почты с помощью дополнения QuickEmail:

Не смогли решить проблему: опишите ее в комментариях: что в логах, пришлите сам вызов с формной и т.д. Попробую вам помочь.

Смотрите также

все стандартные хуки formit.
Борьба со спамом: без капч и при помощи recaptcha от google.

Как я уже говорил выше, когда у вас много форм на странице и шаблон использует — лучше использовать FormIt в связке с Ajaxform. В следующем уроке сделаем хлебные крошки — чтобы наш шаблон выглядел как оригинал.

FormIt - это динамический Сниппет обработки форм для MODX Revolution. Он обрабатывает форму после отправки, выполняя проверку и последующие действия, такие как отправка электронного письма. Он не создает форму, но может повторно заполнить ее, если проверка не была пройдена.

История¶

FormIt был написан Shaun McCormick как Компонент для обработки форм и впервые выпущен 19 октября 2009 г. В настоящее время поддерживается командой Sterc.

Разработка и ошибки¶

Важные изменения¶

FormIt 3.0 представляет обновление методов шифрования, используемых для шифрования отправленных форм. До версии 3.0 использовался mcrypt , который в версии 3.0 заменен на openssl из-за того, что mcrypt устарел с версии PHP 7.2. FormIt 3.0 поставляется со страницей миграции, доступной из Менеджера.

Начиная с FormIt 2.2.9, ко всем полям автоматически применяется html_entities . Чтобы разрешить сохранение HTML-тегов, вам нужно будет использовать валидатор allowSpecialChars для каждого поля, который должен сохранять необработанные html-теги.

Начиная с FormIt 1.1.4, ко всем полям будут автоматически применяться stripTags . Чтобы разрешить сохранение HTML-тегов, вам нужно будет использовать валидатор allowTags для каждого поля, определяя, какие теги разрешены.

Как использовать¶

Если у вас есть несколько форм на странице, установите для свойства &submitVar в вызове Cниппета имя элемента формы (например, &submitVar = form1-submit ). Это указывает FormIt обрабатывать запросы формы только, если в переданных полях формы (POST) есть эта переменная. Если у вас на одной странице несколько форм, обрабатываемых Formit, следует использовать теги с INPUT type = "submit" name = "form1-submit", элементы button работать не будут.

Доступные свойства¶

Это доступные общие свойства для вызова FormIt (не включая свойства, специфичные для хуков):

Валидация¶

Проверка в Formit выполняется с помощью свойства &validate и может использоваться для автоматической обработки любого из полей вашей формы.

Для получения дополнительной информации о проверке в FormIt смотрите Валидаторы.

Хуки - это в основном скрипты, которые запускаются во время обработки FormIt. Они всегда выполняются в том порядке, в котором они указаны в свойстве. Если, например, у вас есть хук для электронной почты, за которой следует хук валидации, электронное письмо будет отправлено до того, как произойдет проверка.

Если какой-либо хук завершится с ошибкой, последующие за ним не будут выполняться.

У FormIt есть Хуки (Hooks) — скрипты, которые выполняются во время обработки. Хуки могут быть линейными, т.е. выполняются по очереди, а могут быть последовательными, т.е. если выполнено условие первого хука, то начнется выполнение следующего хука.

Существуют также Прехуки (Pre-Hooks), скрипты, которые выполняются до загрузки формы. К примеру скрипт который устанавливает значение по умолчанию для полей форм в старых браузерах, которые не поддерживают соответствующие html плейсхолдеры.

Можно создавать собственные хуки и прехуки указывая их в параметрах preHook и hook FormIt. Стоит учитывать, что они будут выполняться в порядке указанном при вызове, поэтому, если один из скриптов выдал ошибку, сломаются и последующие.

Подключение простой формы с использованием FormIt

В нужном месте шаблона, или на отдельной странице создадим html код формы

Добавим некешируемые плейсхолдеры FormIt ([[!+fi.код_поля]])

(префикс fi при желании можно изменить свойством placeholderPrefix при вызове сниппета)

Создаем чанк письма, которое будет приходить на почту после отправки результатов формы. К примеру mailtpl.feedback:

Вызываем сниппет FormIt

К коду выше добавляем параметры для проверки заполненности обязательных полей и другие параметры проверки:

Вместо оповещения об ошибках рядом с полями, можно создать специальный блок, в котором будут указаны все ошибки разом. Для этого надо обернуть код выше в специальный плейсхолдер, примерно так:

Анти-спам

Капча (captcha) — распространенный метод. Некоторые виды этой защиты боты научились распознавать и обходить. Самой эффективной на данный момент является reCAPTCHA от Google. Минусы — дополнительное поле, которое надо заполнить пользователю.
Для FormIt есть специальные хуки с капчами math и reCaptcha (смотрите в резделе Хуки);
Скрытые поля ввода
Для FormIt есть специальный хук; проверяющий указанный email в спам-листе. Данный метод помогает далеко не всегда.

AjaxForm

Сниппет ajaxForm представляет из себя надстройку над FormIt реализующую Ajax вызов. Вызов сниппета

Подробнее на странице об AjaxForm

Параметры FormIt

Если параметр установлен, не будет начинаться обработка формы, если эта переменная POST не передается. Может применяться при конфликте нескольких форм на странице.

Хуки (hooks)

Хуки — специальные скрипты, которые запускаются во время обработки FormIt. Хуки могут быть связаны, к примеру, второй хук начнет выполняться только если первый отработан успешно.

Список предустановленных хуков

Email — отправляет результат формы на почту (активирует функцию mail()).

math — добавляет математическую капчу к форме.

Подобная капча выглядит как вопрос формата: 12 + 23?

Для ее интеграции надо добавить math к параметру &hooks и валидацию к соответствующему полю

В нужное место формы вставить вызов

Дополнительные параметры хука math

По умолчанию
mathMinRange	Минимальное допустимое число	10
mathMaxRange	Максимальное допустимое число	100
mathField	Имя поля с ответом	math
mathOp1Field	Устаревший параметр. Имя поля для первого числа в уравнении.	op1
mathOp2Field	Устаревший параметр. Имя поля для второго числа в уравнении.	op2
mathOperatorField	Имя поля определяющего оператор уравнения	operator

Кастомизация хука math

Подобная запись выведет уравнение формата "23 plus 41?" или "50 minus 12?" вместо операторов -/+. Подобная запись немного усложнит задачу ботам.

recaptcha — добавляет рекапчу к форме.

Хук recaptcha предназначен для вставки в форму устаревшей версии рекапчи от гугл. На момент написания статьи лучше установить и использовать хук recaptchav2.

Для использования recaptcha надо добавить подключение в параметр hooks

и вставить следующие теги в нужное место формы

затем прописать ключи google в системные настройки:

formit.recaptcha_private_key — секретный ключ;
formit.recaptcha_public_key — ключ сайта;
formit.recaptcha_use_ssl — использовать ssl для запросов рекапчи. По умолчанию false.

Дополнительные настройки хука recapture

recaptchaJs — обьект JSON для вставки в параметры рекапчи, который будет генерировать соответствующий виджет. По умолчанию <>.
recaptchaTheme — шаблон рекапчи который должен использоваться. По умолчанию не указан.

Ключи можно получить на странице google recapture

redirect — перенаправляет пользователя на специальный ресурс, при завершении отправки.

При переадресации, значения полей формы не будут доступны на конечном ресурсе. Если необходимо передать значения полей формы, можно использовать свойство &store компонента FormItRetriever.

Не рекомендуется использовать IP для проверки спама, поскольку спамеры могут легко изменять IP-адреса, а проверка IP-адресов может выдать ложное срабатывание.

FormItSaveForm — хук для сохранения результатов формы внутри панели менеджера.

Список расположен в Приложения (Extras) => FormIt. Доступные настройки:

Дополнительные хуки

Помимо предустановленных хуков можно писать свои или скачивать их с репозиториев. Для написания своего хука можно использовать сниппет, указав в параметре hooks его название.

Список полезных хуков которые можно скачать:

recaptchav2 — хук для интеграции с рекапчей от гугл второй и третьей версии.

Для интеграции надо добавить подключение в параметр hooks:

и вставить следующие теги в нужное место формы:

затем прописать ключи google в системные настройки:

recaptchav2.secret_key — секретный ключ;
recaptchav2.site_key — ключ сайта.

для рекапси 3 версии используйте соответствующие настройки:

recaptchav3.secret_key — секретный ключ;
recaptchav3.site_key — ключ сайта.

Ключи можно получить на странице google recapture

Селекты, чекбоксы, переключатели

(selects, checkboxes, radio buttons)

Для множественных полей формы, таких как селекты, чекбоксы и переключатели, стандартный способ подключения не сработает. Для таких случаев в FormIt предусмотрены сниппеты FormItIsSelected и FormItIsChecked.

Оформление select поля

Оформление checkbox и radio поля

Таким образом можно проверить, выбран ли хотябы 1 флажок.

Если надо установить поле с массивом значений (группу флажков, с одинаковым именем, или множественный селект) в преХук, надо сперва раскодировать данные из json формата

Настройка целей для счетчиков

Возможные ошибки

— Если FormIt говорит об успешной отправке формы, но письмо на почту не приходит, стоит проверить

— Если FormIt или AjaxForm выдают 500 ошибку при отправке, причин может быть несколько, и все они связаны с проблемами на сервере. К примеру, если на сервере используется php ниже 5.4 (не рекомендуется для новых версий modx), то проблему можно решить установкой в файле .htaccess следующего параметра:

Если же на сервере стоит версия php 5.4 и выше, то искать проблему стоит в логах Modx (core/cache/logs/error.log) и сервера. Если записей в логах нет, попробуйте переустановить компоненты FormIt и AjaxForm, и посмотрите, не вылезают ли ошибки во время установки. Если компонент ругается на ошибки, проставьте соответствующим папкам на сервере права доступа 700. И попробуйте переустановить снова (кнопка reinstall может не помочь, иногда эффективнее воспользоваться uninstall). Подробнее об ошибке 500.

— Если в списке отправленных форм, на странице FormIt в админ панели, вместо нормального списка отображается массив символов — вероятно вы раньше времени перешли на php 7.1, спуститесь на 7.0, либо ждите фикса компонента.

Читайте также: