FormIt — cниппет обработки форм: настройка, проверка и отправка форм

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

• Обработка данных из форм.
• Поддержка файловых вложений.
• Сохранение данных в базе данных.
• Отправка уведомлений на почту и т.д..

Зачем использовать FormIt?

• Легко создавать формы: добавьте необходимые поля, настройте их и получите рабочую форму за несколько минут.
• Встроенная валидация: убедитесь, что пользователи вводят корректные данные.
• Обработка данных: сохраняйте данные в базу, отправляйте на email или обрабатывайте их как вам нужно.
• Безопасность: защита от спама и атак с помощью встроенных механизмов.
• Гибкость: интегрируется с другими компонентами MODX для расширения функционала.

Установка

FormIt можно загрузить через менеджер пакетов из основного репозитория. Для этого:

1. Перейдите в панель управления MODX.
2. Откройте раздел «Установщик».
3. Найдите компонент FormIt в разделе «Дополнения».
4. Установите и активируйте компонент.

Также вы можете скачать транспортный пакет из репозитория MODX здесь: https://modx.com/extras/package/formit.

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

FormIt хранится и разрабатывается в GitHub, и его можно найти здесь: https://github.com/Sterc/FormIt

Здесь можно писать об ошибках: https://github.com/Sterc/FormIt/issues.

Документацию по API также можно найти здесь: https://api.modx.com/formit/.

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

Просто разметьте форму которую вы хотите использовать и поместите над ней вызов сниппета FormIt. Укажите «hooks» (или сценарии обработки после проверки) в вызове Сниппета. Затем добавьте проверку с помощью параметров &validate и &customValidators.

Пример, у нас есть простенькая HTML разметка формы:

<form action="#" method="post">
   <label for="name">Имя:</label>
   <input type="text" id="name" required>

   <label for="email">Email:</label>
   <input type="email" id="email" required>

   <label for="message">Сообщение:</label>
   <textarea id="message" required></textarea>

   <button>Отправить</button>
</form>

Для того чтобы FormIt смог ее в дальнейшем обрабатывать, нам необходимо добавить к отправляемым полям (в данном случае к input и textarea) атрибуты name и добавить к кнопке отправки type="submit".

<form action="[[~[[*id]]]]" method="post">
   <label for="name">Имя:</label>
   <input type="text" name="name" id="name" required>

   <label for="email">Email:</label>
   <input type="email" name="email" id="email" required>

   <label for="message">Сообщение:</label>
   <textarea name="message" id="message" required></textarea>

   <button type="submit">Отправить</button>
</form>

Далее помещаем над формой вызов сниппета FormIt с необходимыми параметрами, пример:

[[!FormIt?
   &hooks=`email`
   &emailTo=`admin@example.com`
]]

<form action="[[~[[*id]]]]" method="post">
   <label for="name">Имя:</label>
   <input type="text" name="name" id="name" required>

   <label for="email">Email:</label>
   <input type="email" name="email" id="email" required>

   <label for="message">Сообщение:</label>
   <textarea name="message" id="message" required></textarea>

   <button type="submit">Отправить</button>
</form>

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

Смотрите также: Практика создания контактных форм.

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

FormIt поддерживает множество параметров, которые можно настроить в зависимости от ваших потребностей. Самые ходовые из них:

• &hooks — цепочка действий, выполняемых после отправки формы (например, email, spam).
• &emailTo — адрес электронной почты, на который будет отправлено сообщение.
• &validate — правила проверки полей формы.
• &successMessage — сообщение об успешной отправке формы.
• &errorMessage — сообщение об ошибке.

Пример использования параметров:

[[!FormIt?
   &hooks=`email`
   &emailTo=`admin@example.com`
   &validate=`name:required,email:email`
   &successMessage=`Ваше сообщение успешно отправлено.`
   &errorMessage=`Произошла ошибка. Проверьте введённые данные.`
]]

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

Проверка данных (Валидация)

FormIt поддерживает различные типы проверки полей формы через параметр &validate. Основные правила:

• required — поле обязательно для заполнения.
• email — проверка корректности email-адреса.
• minLength:X — минимальная длина строки (X — число).
• maxLength:X — максимальная длина строки.
• isNumber — проверка на число.

Пример, чтобы сделать поле имени пользователя обязательным, вы можете сделать так:

&validate=`name:required`

Валидаторы также могут быть «связаны» или выполняться последовательно. В следующем примере сначала проверяется, передано ли значение поля text, а затем удаляются все теги из сообщения:

[[!FormIt? &validate=`text:required:stripTags`

Несколько полей и валидаторов разделяются запятыми:

[[!FormIt?
    &validate=`date:required:isDate=^%m/%d/%Y^,
        name:required:testFormItValidator,
        email:email:required,
        colors:required,
        subject:required,
        username:required:islowercase,
        message:stripTags,
        numbers:required`
]]

FormIt допускает разделение валидаторов на несколько строк, если вам так будет удобнее.

Примечание: не используйте обратные кавычки внутри проверочного вызова (это сломает синтаксическую разметку). Вместо этого используйте символы^`:

[[!FormIt? &validate=`date:required:isDate=^%m/%d/%Y^`]]

Это исправит вызов и заставит валидацию работать правильно.

Общее сообщение об ошибке для валидаторов, полезное, если ошибки не отображаются, но проверка не проходит, используется со следующим плейсхолдером:

[[!+fi.validation_error_message]]

Он будет содержать сообщение об ошибке валидации, которое можно установить с помощью свойства &validationErrorMessage и используя [[+errors]] в значении свойства, которое будет заменено всеми ошибками поля.

Также существует «Да/нет» плейсхолдер:

[[!+fi.validation_error]]

Полный перечень встроенных валидаторов

Пользовательские валидаторы

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

[[!FormIt? &customValidators=`isBigEnough`]]

Все такие произвольные валидаторы должны быть указаны в свойстве customValidators, иначе они не будут запускаться. И кроме того в качестве валидатора для свойства &validate:

[[!FormIt? &validate=`cost:isBigEnough`]]

Ну и сам сниппет, «isBigEnough»:

<?php
$value = (float)$value;
$success = $value > 1000;
if (!$success) {
    // Обратите внимание, как мы можем добавить здесь ошибку в поле.
    $validator->addError($key,'Маловато будет!');
}
return $success;

Валидатор отправит в сниппет следующие свойства в массиве $scriptProperties:

Пользовательские сообщения об ошибках

Начиная с FormIt 2.0-pl, вы можете переопределить сообщения об ошибках, отображаемые валидаторами, отправив соответствующее свойство:

Вы также можете указать сообщение для каждого поля, поставив префикс ключа поля в свойстве. Например, чтобы переопределить обязательное («required») сообщение валидатора, просто передайте в свой вызов FormIt:

[[!FormIt?
    &vTextRequired=`Пожалуйста, укажите значение для этого поля.`
    &subject.vTextRequired=`Пожалуйста введите тему.`
]]

Это будет использовать &subject.vTextRequired для поля темы, а затем вернуться к сообщению &vTextRequired для всех других полей.

Хуки

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

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

Есть три типа хуков:

• preHook, указанный в свойстве preHooks в сниппете FormIt, который выполняется при загрузке формы. Полезны для предварительной загрузки значений.
• renderHook, указанный в свойстве renderHooks в сниппете FormIt, который выполняется, когда форма загружается и предварительные preHooks хуки уже завершены. Полезно для обработки полей и ошибок перед отрисовкой формы, как это используется в Formalicious.
• Обычный хук, указанный в свойстве hooks в сниппете FormIt, который выполняется после проверки формы. Полезно для пользовательской пост-обработки.

Использование preHooks

Просто укажите preHook в свойстве preHooks в вызове сниппета FormIt. Встроенных preHooks хуков нет, но если у вас есть например preHook под названием loadCustomValues, то вызов будет таким:

[[!FormIt? &preHooks=`loadCustomValues`]]

Formit перед загрузкой формы запустит сниппет loadCustomValues. Вы можете установить поля в форме следующим образом:

<?php
$hook->setValue('name','Иван Петров');
$hook->setValue('email','ivan.petrov@fake-emails.com');
return true;

Или альтернативно использовать ->setValues:

<?php
$hook->setValues(array(
    'name' => 'Иван Петров',
    'email' => 'ivan.petrov@fake-emails.com',
));
return true;

Обратите внимание, что использование здесь метода setValues() сделает соответствующие Плейсхолдеры доступными для вашего блока электронной почты; эффект ручной установки значений аналогичен добавлению скрытых полей в вашу форму.

Вы также можете делать все, что хотите, в preHook. Не забудьте вернуть true, если ваш preHook или hook успешны. Если вы хотите добавить в поле сообщение об ошибке:

$hook->addError('user','Пользователь не найден.');
return $hook->hasErrors();

Использование параметра renderHooks

Просто укажите renderHook в свойстве renderHooks в вашем вызове сниппета FormIt. Встроенных хуков для renderHooks нет, но если у вас например есть renderHook с именем buildSessionFields, то можно сделать вот так:

// Получить конфигурацию Formit и возможные заданные значения
$formit =& $hook->formit;
$values = $hook->getValues();

// Получить данные сеансов
$values = array_merge($_SESSION['preset_fields_from_session'], $values);
$fields = array();
foreach ($values as $value) {
    // $value = array('label' => '', 'name' => '')
    $fields[] = $modx->getChunk('fieldChunk', $value);
}
$modx->toPlaceholder('extraFields', implode(PHP_EOL, $fields));

С новой системой хуков стало проще создавать пользовательские формы из сессий, базы данных или данных API.

Использование хуков

Просто укажите хук в свойстве hooks при вызове сниппета FormIt. Например, следующий вызов загружает хук-перехватчик спама и хук отправки электронной почты:

[[!FormIt? &hooks=`spam,email`]]

Встроенные хуки

Хук email

Хук email отправляет содержимое вашей HTML формы на любой адрес электронной почты.

Поддерживаемые параметры

Любое из свойств email хука может содержать плейсхолдеры имен полей из вашей формы, которые будут обрабатываться.

Использование

Просто укажите его как хук в вызове FormIt, а затем укажите свойства электронной почты в вызове FormIt.

[[!FormIt?
    ...
    &hooks=`email`
    &emailTpl=`CentralizedDebtObligationEmailTpl`
    &emailSubject=`Кто-то еще купил пакет CDO`
    &emailTo=`sales@mortgagemoney.com`
    &emailCC=`boss@mortgagemoney.com`
    &emailBCC=`fbi@gov.com`
    &emailBCCName=`CDO информатор о мошенничестве`
]]

Обратите внимание, что свойство &emailTpl указывает на имя чанка. В этом блоке у вас будут плейсхолдеры для каждого поля в вашей форме. Наш чанк может выглядеть так:

<p>Привет,</p>
<p>[[+name]] только что приобрел CDO пакет: [[+cdo_package]].</p>
<p>Его адрес: [[+email]]</p>
<p>Спасибо!</p>

Это конечно предполагает, что у вас есть поля «name», «cdo_package» и «email» в вашей форме.

Добавление динамики в адресацию

FormIt, начиная с версии 4.2.5+, мог выбирать получателя почты по числовому значению поля, то есть по значению параметра ‘select’. Таким образом можно избежать создания поддельного поля формы, в котором пользователь может легко отправить любой почтовый адрес. Пользователь будет видеть только нумерованный список получателей, которые будут перенаправлены на адреса электронной почты с помощью свойств FormIt.

Для этого вы можете использовать следующие свойства FormIt:

&emailSelectTo=`mail1@my.domain,mail2@my.domain;different@my.domain` 
&emailSelectToName=`Mail1,Mail2;Different` 
&emailSelectField=`emailselect`

и следующее поле формы

<select name="emailselect">
    <option value="1" [[!+fi.emailselect:default=`1`:FormItIsSelected=`1`]]>Адрес 1</option>
    <option value="2" [[!+fi.emailselect:default=`1`:FormItIsSelected=`2`]]>Адрес 2</option>
</select>

Если выбран Адрес 1, почта будет отправляться на mail1@my.domain,mail2@my.domain, если же выбран Адрес 2, почта будет отправлена наdifferent@my.domain.

Использование поля Темы в качестве строки Темы электронного письма

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

[[!FormIt?
    ...
    &emailUseFieldForSubject=`1`
]]

Будет выполнен поиск поля с именем «тема», которое будет использоваться в электронном письме. Если он не будет найден или окажется пуст, по умолчанию будет использовано значение &emailSubject.

Работа с чекбоксами и множественным выбором в электронном письме

FormIt, начиная с версии 1.6.0+, автоматически обрабатывает чекбоксы и объединяет их в одно поле. Вы можете использовать свойства &emailMultiSeparator и &emailMultiWrapper, чтобы указать, как они соединяются. Например, чтобы обернуть флажки в теги <li>:

[[!FormIt?
    ...
    &emailMultiWrapper=`<li>[[+value]]</li>`
]]

Или просто разделить при помощи BR тегов:

[[!FormIt?
    ...
    &emailMultiSeparator=`<br />`
]]

Хук redirect

Хук перенаправит пользователя на указанный ресурс, когда его HTML форма завершит отправку. Для этого требуется один параметр redirectTo, который должен быть идентификатором ресурса, на который вы хотите выполнить перенаправление. Значения полей формы не пересылаются.

Поддерживаемые параметры

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

Использование

Просто включите redirect хук в свойство &hooks при вызове FormIt. Затем укажите идентификатор ресурса для перенаправления с помощью свойства &redirectTo.

Перенаправление с параметрами

Вы можете указать параметры для перенаправления при использовании этого хука. Просто используйте свойство &redirectParams:

[[!FormIt?
   &hooks=`redirect`
   &redirectTo=`212`
   &redirectParams=`{"user":"123","success":"1"}`
]]

Это создаст URL-адрес с этими параметрами. Скажем, идентификатор ресурса 212 находится в books.html, тогда URL-адрес перенаправления будет:

• books.html?user=123&success=1

Хук spam

Хук проверяет все поля, указанные в свойстве spamEmailFields, на соответствие фильтру спама через StopForumSpam. Если пользователь отмечен как спамер, будет показано сообщение об ошибке для этого отмеченного поля.

Для хука требуется поддержка cURL или Sockets в вашей установке PHP (те же требования для [Управление пакетами](development-in-modx/advanced-development/package-management «Управление пакетами»)).

Возможные параметры

Использование

Просто укажите хук «spam» в вызове FormIt, остальное сниппет сделает сам.

[[!FormIt? &hooks=`spam`]]

Проверка IP адреса на спам

Хотя настоятельно не рекомендуется использовать IP адрес для проверки на спам (поскольку спамеры могут легко изменить IP адреса, а проверка IP адресов часто дает ложные срабатывания), FormIt предоставляет вам такую возможность. Просто установите для параметра &spamCheckIp значение 1 при вызове FormIt.

Хук math

Хук math позволит вам иметь математический вопрос в вашей форме, чтобы предотвратить спам. Он отобразит математическое выражение, которое необходимо сосчитать, чтобы ответить правильно, а именно:

12 + 23?

Поддерживаемые параметры

Использование

Включите его как хук в вызове FormIt:

[[!FormIt? &hooks=`math`]]

Чтобы сделать вычисление математического выражения обязательным, используйте вызов следующим образом:

[[!FormIt? &hooks=`math` &validate=`math:required`]]

Вставьте этот образец HTML-кода в ту часть формы, в которую вы хотите включить математический вопрос:

<label>[[!+fi.op1]] [[!+fi.operator]] [[!+fi.op2]]?</label>
[[!+fi.error.math]]
<input type="text" name="math" value="[[!+fi.math]]" />
<input type="hidden" name="op1" value="[[!+fi.op1]]" />
<input type="hidden" name="op2" value="[[!+fi.op2]]" />
<input type="hidden" name="operator" value="[[!+fi.operator]]" />

Математический вопрос в месте поля ввода с именем «math».

ПРИМЕЧАНИЕ. Поля формы «op1», «op2» и «operator» больше не используются, начиная с версии FormIt 2.2.11 и выше.

Настройка описания операции

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

<label>[[!+fi.op1]] [[!+fi.operator:is=`-`:then=`минус`:else=`плюс`]] [[!+fi.op2]]?</label>

В результате уравнение будет выглядеть как «23 плюс 41?» или «50 минус 12?» вместо символа -/+, что усложняет работу спам-ботов.

Хук recaptcha

The recaptcha хук включит поддержку reCaptcha для форм FormIt.

Использование

Во-первых, добавьте recaptcha в параметр &hooks в вызове FormIt. Затем вам нужно будет включить в форму следующие плейсхолдеры:

[[+formit.recaptcha_html]]
[[!+fi.error.recaptcha]]

Первый плейсхолдер — это место, где будет отображаться форма reCaptcha; 2-е — сообщение об ошибке (если есть) для reCaptcha.

Наконец, вам необходимо настроить закрытый и открытый ключи reCaptcha в системных настройках. Для reCaptcha доступны следующие настройки:

Поддерживаемые параметры

Хук reCaptcha имеет несколько дополнительных параметров конфигурации:

Хук FormItAutoResponder

Хук отправляет авто-ответ отправителю по электронной почте.

Поддерживаемые параметры

Хук имеет следующие параметры, которые нужно передать в вызов сниппета FormIt:

Хук FormItSaveForm

Этот хук сохранит отправленные формы внутри Formit CMP.

Поддерживаемые параметры

Хук имеет следующие параметры, которые нужно передать в вызов сниппета FormIt:

Вспомогательные сниппеты

FormItRetriever

FormItRetriever — это вспомогательный Сниппет для FormIt, который будет получать пользовательские данные последней отправки формы через FormIt. Это полезно для страниц, куда пользователь перенаправляется после отправки формы.

Использование

Просто добавьте этот Сниппет на любую страницу, с которой вы перенаправляете (используя свойство FormIt &redirectTo), и установите &store=1 в вызове FormIt:

[[!FormItRetriever]]

А затем отобразите данные формы с плейсхолдерами, относящимися к именам полей, например:

<p><Благодарим [[!+fi.name]] за сообщение. Письмо будет отправлено вам на ящик [[!+fi.email]].</p>

Не забудьте установить &store=1 в вызове FormIt, чтобы сниппет понимал, что нужно хранить значение.

Обязательно вызывайте Плейсхолдеры некэшированными. Эти данные изменяются при каждом запросе, поэтому Плейсхолдеры также должны изменять каждый запрос.

Свойства FormItRetriever

FormItRetriever имеет некоторые свойства по умолчанию, которые вы можете переопределить. Вот что там есть:

Пример

Отправим форму с автоматическим ответом и защитой от спама, затем перенаправим на страницу с благодарностью, где загружается последняя отправленная форма, и, если она не найдена, перенаправим на Ресурс с идентификатором 444.

На вашей странице с формой:

[[!FormIt?
    &submitVar=`go`
    &hooks=`spam,FormItAutoResponder,redirect`
    &emailTo=`my@email.com`
    &store=`1`
    &redirectTo=`123`
]]
<form action="[[~[[*id]]]]" method="post">
    <input type="hidden" name="nospam" value="" />
    <label for="name">Имя: [[!+fi.error.name]]</label>
    <input type="text" name="name:required" id="name" value="[[!+fi.name]]" />
    <label for="email">Email: [[!+fi.error.email]]</label>
    <input type="text" name="email:email:required" id="email" value="[[!+fi.email]]" />
    <label for="message">Сообщение: [[!+fi.error.message]]</label>
    <textarea name="message:stripTags" id="message" cols="55" rows="7">[[!+fi.message]]</textarea>
    <br />
    <input type="submit" name="go" value="Отправить" />
</form>

На вашей странице подтверждения (Resource ID 123):

[[!FormItRetriever? &redirectToOnNotFound=`444`]]
<p>Спасибо [[!+fi.name]] за ваше обращение. Вам будет отправлен автоматически электронное письмо на адрес [[!+fi.email]]. Текст вашего обращения:</p>
[[!+fi.message]]

FormItCountryOptions

FormItCountryOptions это вспомогательный Сниппет для FormIt, начиная с версии 1.7.0, для вывода список стран мира. Это полезно для форм, которым нужен, например, раскрывающийся список стран.

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

Замечание: В ближайшее время появится список стран по-русски.

Какой язык для списка стран выбрать — решается на основании значения системной переменной cultureKey, по умолчанию — английский (значение ключа us).

Использование

Просто добавьте Сниппет в вашу форму внутрь <select> элемента:

<select name="country">
    [[!FormItCountryOptions? &selected=`[[!+fi.country]]`]]
</select>

Обратите внимание, как мы передаем значение плейсхолдера «fi.country» (в котором хранится значение поля страны) в выбранный параметр. Это сообщает FormItCountryOptions выбрать последний выбранный параметр в форме.

Свойства FormItCountryOptions

FormItCountryOptions имеет некоторые свойства по умолчанию, которые вы можете переопределить. Вот что там есть:

Приоритетные страны

Иногда вы хотите, чтобы определенные страны отображались вверху списка в блоке optiongroup. FormItCountryOptions поддерживает это с помощью параметра &prioritized. Например:

[[!FormItCountryOptions?
    &selected=`[[+fi.country]]`
    &prioritized=`US,GB,DE,RU,JP,FR,NL,CA,AU,UA`
]]

Будет выведен список, который выглядит так:

Вы просто передаете коды ISO стран, которым вы хотите присвоить приоритет, в параметре &prioritized. Вы также можете настроить текст optiogroup с помощью свойств &prioritizedGroupText и &allGroupText.

FormItStateOptions

FormItStateOptions это вспомогательный Сниппет для FormIt, с версии 1.7.0+, который возвращает список регионов. Это полезно для форм, которым нужен такой список.

В настоящий момент доступен переводные списки регионов для следующих стран — США, Франция, Нидерланды, Германия, Бельгия, Швеция и Канада.

Замечание: В ближайшее время появится список регионов РФ.

Какой список регионов выбрать — решается на основании значения системной переменной cultureKey, по умолчанию — регионы США (значение ключа us).

Использование

Просто добавьте Сниппет в вашу форму внутрь <select> элемента:

<select name="state">
[[!FormItStateOptions? &selected=`[[!+fi.state]]`]]
</select>

Обратите внимание, как мы передаем значение плейсхолдера «fi.state» (в котором хранится значение поля штата) в выбранный параметр. Это сообщает FormItStateOptions выбрать последний выбранный параметр в форме.

Свойства FormItStateOptions

FormItStateOptions имеет некоторые свойства по умолчанию, которые вы можете переопределить. Вот что там есть:

Дополнительно

Обработка выпадающих списков, чекбоксов и радио кнопок

Хотя FormIt может обрабатывать поля любого типа, для выпадающих селекторов, радио-кнопок и флажков (чекбоксов) требуются специальные указания из-за их особенностей их значения.

Обработка выпадающих списков

FormIt предоставляет служебный Сниппет под названием FormItIsSelected, который можно использовать как Выходной фильтр для обработки выбранных значений (selected="selected"). Например:

<select name="color">
   <option value="blue" [[!+fi.color:FormItIsSelected=`blue`]] >Синий</option>
   <option value="red" [[!+fi.color:FormItIsSelected=`red`]] >Красный</option>
   <option value="green" [[!+fi.color:FormItIsSelected=`green`]] >Зеленый</option>
   <!-- Это также могло бы работать -->
   <option value="yellow" [[!+fi.color:is=`yellow`:then=`selected`]]>Желтый</option>
</select>

Это автоматически обработает выбранное поле, запоминая его во время проверки и обработки ошибок.

Обработка чекбоксов и радио кнопок

Обработка флажков и радио кнопок очень похожа на обработку селекторов, с той лишь разницей, что вы проверяете здесь «обязательность». FormIt предоставляет вспомогательный выходной фильтр FormItIsChecked, аналогичный FormItIsSelected, для обработки сохраняемости значений.

В этом примере будут обрабатываться флажки, c сохранением их выбранных значений:

<label>Цвет: [[!+fi.error.color]]</label>
<input type="checkbox" name="color[]" value="blue" [[!+fi.color:FormItIsChecked=`blue`]] > Синий
<input type="checkbox" name="color[]" value="red" [[!+fi.color:FormItIsChecked=`red`]] > Красный
<input type="checkbox" name="color[]" value="green" [[!+fi.color:FormItIsChecked=`green`]] > Зеленый

Обратите внимание, что [] удаляется при установке плейсхолдера «fi.error.color».

Обработка атрибута required для чекбокса

Поскольку HTML не отправляет значение, если флажок не установлен, проверки «обязательности» (required) флажка может быть затруднительной. Перед этим вам нужно будет добавить скрытое (type = hidden) поле, чтобы отправлялось хотя бы пустое значение:

[[!FormIt? &validate=`color:required`]] ...
<label>Цвет: [[!+fi.error.color]]</label>
<input type="hidden" name="color[]" value="" />
<input
    type="checkbox"
    name="color[]"
    value="blue"
    [[!+fi.color:FormItIsChecked="`blue`]]"
/>
Синий
<input
    type="checkbox"
    name="color[]"
    value="red"
    [[!+fi.color:FormItIsChecked="`red`]]"
/>
Красный
<input
    type="checkbox"
    name="color[]"
    value="green"
    [[!+fi.color:FormItIsChecked="`green`]]"
/>
Зеленый

Это успешно проверит, чтобы при отправке формы был установлен хотя бы один флажок.

Обработка чекбоксов и мульти-селектора в пользовательском хуке

Если вы хотите установить поле массива (т.е. группу флажков с тем же именем или мульти-селектор) в preHook, вам нужно применить json_encode для значения массива.

$hook->setValue('hobbies',json_encode(array('music','films','books')));

Использование пустого поля для защиты от спама

Часто спам-боты заполняют все поля формы, чтобы пройти проверку. Таким образом, хороший способ предотвратить спам — это добавить поле в вашу форму и потребовать, чтобы оно было пустым для успешной отправки. Для этого можно использовать валидатор blank, который можно использовать для добавления поля nospam. Пример:

<input type="hidden" name="workemail" value="" />

Затем в вызове FormIt добавьте проверку на пустоту:

[[!FormIt? &validate=`workemail:blank`]]

Если вы хотите отобразить сообщение об ошибке, вы можете сделать это в обычном синтаксисе FormIt (в этом примере будет [[+fi.error.workemail]]).

Убедитесь, что вы не используете существующее имя поля в вашей форме для поля nospam! Это может прервать обработку вашей формы FormIt.

Заключение

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