Formit вывод ошибок

Добрый день!

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

[[!FormIt?
&hooks=`email`
&emailTpl=`sentEmailTpl`
&emailSubject=`Сообщение с сайта`
&emailTo=`mail@mail.ru`
&validate=`kontaktnoe_lico:required,
vid_produkcii_ili_uslugi:required,
telefon:required`
&successMessage=`Сообщение отправлено!`
]]
<form class="webform-client-form" enctype="multipart/form-data" action="/[[*alias]]" method="post" id="webform-client-form-30" accept-charset="UTF-8">
  <label class="element-invisible" for="edit-submitted-vid-produkcii-ili-uslugi">Тема обращения <span class="form-required" title="Обязательно для заполнения.">*</span></label>
 <select id="edit-submitted-vid-produkcii-ili-uslugi" name="vid_produkcii_ili_uslugi" class="form-select required" value="[[!+fi.vid_produkcii_ili_uslugi]]"><option value="" selected="selected">- Выберите -</option><option value="zakaz" [[!+fi.vid_produkcii_ili_uslugi:FormItIsSelected=`zakaz`]]>Заказ</option><option value="consult" [[!+fi.vid_produkcii_ili_uslugi:FormItIsSelected=`consult`]]>Консультация</option><option value="sotrudnichstvo" [[!+fi.vid_produkcii_ili_uslugi:FormItIsSelected=`sotrudnichstvo`]]>Сотрудничество</option><option value="usluga4">Другое</option></select>
</div>
<div class="form-item webform-component webform-component-textfield" id="webform-component-kontaktnoe-lico">
  <label class="element-invisible" for="edit-submitted-kontaktnoe-lico">Контактное лицо * <span class="form-required" title="Обязательно для заполнения.">*</span></label>
<span class="error">[[!+fi.error.error_message]]</span>
 <input placeholder="Контактное лицо *" type="text" id="edit-submitted-kontaktnoe-lico" name="kontaktnoe_lico" value="[[!+fi.kontaktnoe_lico]]" size="60" maxlength="128" class="form-text required" />
</div>
<div class="form-item webform-component webform-component-textfield" id="webform-component-telefon">
  <label class="element-invisible" for="edit-submitted-telefon">Телефон * <span class="form-required" title="Обязательно для заполнения.">*</span></label>
 <input placeholder="Телефон *" type="text" id="edit-submitted-telefon" name="telefon" value="[[!+fi.telefon]]" size="60" maxlength="128" class="form-text required" />
</div>
<div class="form-item webform-component webform-component-textfield" id="webform-component-e-mail">
  <label class="element-invisible" for="edit-submitted-e-mail">E-mail </label>
 <input placeholder="Электронная почта" type="text" id="edit-submitted-e-mail" name="e_mail" value="[[!+fi.e_mail]]" size="60" maxlength="128" class="form-text" />
</div>
<div class="form-item webform-component webform-component-textarea" id="webform-component-primechaniya">
  <label class="element-invisible" for="edit-submitted-primechaniya">Примечания </label>
 <div class="form-textarea-wrapper"><textarea placeholder="Примечания" id="edit-submitted-primechaniya" name="primechaniya" cols="60" rows="5" class="form-textarea">[[!+fi.primechaniya]]</textarea></div>
</div>
<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-webform-ajax-submit-30" name="form1-submit" value="отправить" class="form-submit" /></form>	<div id="form-close-button">Закрыть</div> [[+fi.successMessage]] [[+fi.validation_error_message]] 

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

Что такое FormIt?¶

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

История¶

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

Скачать¶

Formit можно загрузить из Менеджера MODX Revolution через Управление пакетами или из репозитория 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 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 для каждого поля, определяя, какие теги разрешены.

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

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

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

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

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

Валидация¶

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

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

Хуки¶

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

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

Для получения дополнительной информации о хуках смотрите Хуки.

Посмотрите также¶

1. Хуки
   1. FormIt.Hooks.email
   2. FormIt.Hooks.FormItAutoResponder
   3. FormIt.Hooks.math
   4. FormIt.Hooks.recaptcha
   5. FormIt.Hooks.redirect
   6. FormIt.Hooks.spam
   7. FormIt.Hooks.FormItSaveForm
2. Валидаторы
3. FormItRetriever
4. Руководства и примеры
   1. Пользовательский произвольный хук
   2. Пример простой формы
   3. Обработка выпадающих списков, чекбоксов и радио кнопок
   4. Использование пустого поля для защиты от спама
5. FormItCountryOptions
6. FormItStateOptions

Open COllective

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

Budget

$407 per month—let’s make that $500!

Learn more

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

Что такое FormIt?

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

Установка

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

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

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

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

Проверка

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

Хуки

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

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

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

Модернизация страницы контакты — оживляем форму

Открываем ресурс (документ) Контакты, который вы должны были создать в предыдущем уроке.

Там у нас есть секция с контактной формой, которая имеет следующий код:

<div class="col-lg-6 col-xl-5 offset-lg-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1250">
	<form class="contact-form custom-form-style-1" action="php/contact-form.php" method="POST">
                <div class="contact-form-success alert alert-success d-none mt-4">
                    <strong>Success!</strong> Your message has been sent to us.
                </div>

                <div class="contact-form-error alert alert-danger d-none mt-4">
                    <strong>Error!</strong> There was an error sending your message.
                    <span class="mail-error-message text-1 d-block"></span>
                </div>

                <div class="row row-gutter-sm">
                    <div class="form-group col mb-3">
                        <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name" required placeholder="First Name">
                    </div>
                </div>
                <div class="row row-gutter-sm">
                    <div class="form-group col mb-3">
                        <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" required placeholder="E-mail Address">
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col mb-3">
                        <textarea maxlength="5000" data-msg-required="Please enter your message." rows="4" class="form-control" name="message" id="message" required placeholder="Message"></textarea>
                    </div>
                </div>
                <div class="row appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1500">
                    <div class="form-group col mb-0">
                        <button type="submit" class="btn btn-primary btn-modern font-weight-bold custom-btn-border-radius custom-btn-arrow-effect-1 text-3 px-5 py-3" data-loading-text="Loading...">
                        	SUBMIT
                        	<svg class="ms-2" version="1.1" viewBox="0 0 15.698 8.706" width="17" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
								<polygon stroke="#FFF" stroke-width="0.1" fill="#FFF" points="11.354,0 10.646,0.706 13.786,3.853 0,3.853 0,4.853 13.786,4.853 10.646,8 11.354,8.706 15.698,4.353 "/>
							</svg>
                        </button>
                    </div>
                </div>
            </form>
	</div>

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

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

<form class="contact-form custom-form-style-1" action="php/contact-form.php" method="POST">

Здесь в атрибуте action указан файл — php обработчик (который мы не загружали) — по идее его можно загрузить на сайт, отредактировать и использовать, но мы все будем обрабатывать при помощи FormIt. По этому в атрибуте action указываем [[~[[*id]]? &scheme=`full`]] или {$_modx->makeUrl($_modx->resource.id, '', '', 'full')}— данная конструкция подставляет туда полную ссылку на страницу. В конечном итоге получаем:

<form class="contact-form custom-form-style-1" action="[[~[[*id]]? &scheme=`full`]]" method="post">

тоже самое на fenom:

<form class="contact-form custom-form-style-1" action="{$_modx->makeUrl($_modx->resource.id, '', '', 'full')}" method="post">

Теперь апгрейдим наши поля ввода textarea и input. Разберу на примере input, он сейчас выглядит так:

<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" required placeholder="E-mail Address">

Так как вся валидация у нас будет на плечах дополнения, то data-msg-.. можно удалить, maxlength и id можно удалить — т.к. он не влияет на внешний вид и сразу русифицируем.

<input type="email" value="" class="form-control" name="email" required placeholder="Введите ваш E-mail">

Здесь уже есть обязательный атрибут name (если в вашей форме в полях ввода его нет, то нужно добавить, например name="phone").

Атрибут value="" можно оставить, можно удалить, либо в него можно поместить вот такую конструкцию: [[!+fi.email]], где email это имя атрибута name=. Лично я обычно удаляю, работает и без него, либо оставляю пустым, а в забугорных статьях везде показано с такими конструкциями.

По поводу кнопки отправить, она всегда должна иметь атрибут type=»submit» (у нас он есть).

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

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

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

Создание чанка с оформлением письма

Создайте чанк с именем «tplForm» со следующим содержимым:

<p><strong>Имя</strong>: [[+name]]</p> 
<p><strong>Почта</strong>: <a href="mailto:[[+email]]">[[+email]]</a></p> 
<p><strong>Сообщение</strong>: [[+message]]</p>
Тоже самое на fenom:
<p><strong>Имя</strong>: {$name}</p> 
<p><strong>Почта</strong>: <a href="mailto:{$email}">{$email}</a></p> 
<p><strong>Сообщение</strong>: {$message}</p>

Здесь у нас обычный html с перечислением полей формы в формате [[+name_polya]]. Имена полей берем из атрибутов name (в input и textarea).

Осталось сделать вывод самого FormIt.

Вызываем FormIt

FormIt вызывается перед самой формой, вот пример минимального вызова:

[[!FormIt? 
    &hooks=`email` 
    &emailTpl=`tplForm` 
    &emailTo=`[[++emailsender]]` 
]]
тоже самое на fenom:
{'!FormIt' | snippet : [
   'hooks' => 'email',
   'emailTpl' => 'tplForm',
   'emailTo' => $_modx->config.emailsender,
]}

Здесь указываем:

• хук email — который отвечает за отправку формы на email;
• в emailTpl — указываем ранее созданный чанк, который отвечает за оформление письма;
• в emailTo — указываем почту, куда отправлять письма (я указал системную настройку emailsender — в которой прописан email, а так его можно и в ручную указать).

Этого достаточно чтобы форма начала отправляться.

В данном случае форма не отправлялась пока не убрал из шаблона (чанка tpl) подключение скрипта view.contact.js.

Минусы минимального вызова следующие:

• После отправки формы не понятно что-то отправилось или нет (пользователь не поймет отправилась форма или нет).
• Форму можно отправить и пустой (если убрать атрибуты required).

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

Добавим ко всем нашим полям формы input и textarea (над ними или под ними) вот такие конструкции:

<span class="error">[[!+fi.error.name_polya]]</span>

А вот эту разметку вывода ошибок:

<div class="contact-form-success alert alert-success d-none mt-4">
                    <strong>Success!</strong> Your message has been sent to us.
                </div>

                <div class="contact-form-error alert alert-danger d-none mt-4">
                    <strong>Error!</strong> There was an error sending your message.
                    <span class="mail-error-message text-1 d-block"></span>
                </div>

Удаляем (ну вернее мы ее перенесем в вызов в параметры successMessage и  validationErrorMessage) и вместо нее пишем:

[[+fi.validation_error_message]]
[[+fi.successMessage]]

И перепишем вызов формит так:

[[!FormIt?
&hooks=`email`
&validate=`name:required:maxLength=^21^,email:email:required,message:required:minLength=^30^`
&emailTpl=`tplForm`
&emailTo=`[[++emailsender]]`
&emailFrom=`noretly@[[++base_url]]`
&emailSubject=`Сообщение со страницы контакты на сайте [[++site_url]]`
&successMessage=`<div class="contact-form-success alert alert-success mt-4"><strong>Успешно!</strong> Ваше сообщение отправлено нам.</div>`
&validationErrorMessage=`<div class="contact-form-success alert alert-danger mt-4"><strong>Ошибка!</strong> Произошла ошибка при отправке вашего сообщения.</div>`
]]
тоже самое на fenom:
{'!FormIt' | snippet : [
   'hooks' => 'email',
   'validate' => 'name:required:maxLength=^21^,email:email:required,message:required:minLength=^30^',
   'emailTpl' => 'tplForm',
   'emailTo' => $_modx->config.emailsender,
   'emailFrom' => 'noretly@modx-revolution.ru',
   'emailSubject' => 'Сообщение со страницы контакты на сайте' ~ $_modx->config.site_name,
   'successMessage' => '<div class="contact-form-success alert alert-success mt-4"><strong>Успешно!</strong> Ваше сообщение отправлено нам.</div>',
   'validationErrorMessage' => '<div class="contact-form-success alert alert-danger mt-4"><strong>Ошибка!</strong> Произошла ошибка при отправке вашего сообщения.</div>'
]}

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

В вызове formIt появился параметр validate — в нем я перечислил поля в формате «Имя_поля:параметр:параметр». Давайте пробежимся по указанным параметрам:

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

К стати бывают глюки с отправками форм, когда в html разметке, у инпута указан тип email. Поэтому рекомендую поменять type="email", на type="text".

Параметры:

• emailFrom — это email с которого отправляется форма;
• emailSubject — тепа письма (которое к вам отправляется);
• successMessage — сообщение которое выводиться после успешной отправки формы.
• validationErrorMessage- сообщение которое выводиться если форма не отправлена.

Конечный код формы будет следующим:

<form class="contact-form custom-form-style-1" action="[[~[[*id]]? &scheme=`full`]]" method="post">
        [[+fi.validation_error_message]]
        [[+fi.successMessage]]
        <div class="row row-gutter-sm">
            <div class="form-group col mb-3">
                <input type="text" value="" class="form-control" name="name" id="name" placeholder="Ваше имя">
                <span class="error">[[+fi.error.name]]</span>
            </div>
        </div>
        <div class="row row-gutter-sm">
            <div class="form-group col mb-3">
                <input type="email" value="" class="form-control" name="email" placeholder="Введите ваш E-mail">
                <span class="error">[[+fi.error.email]]</span>
            </div>
        </div>
        <div class="row">
            <div class="form-group col mb-3">
                <textarea rows="4" class="form-control" name="message" placeholder="Сообщение"></textarea>
                <span class="error">[[+fi.error.message]]</span>
            </div>
        </div>
        <div class="row appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1500">
            <div class="form-group col mb-0">
                <button type="submit" class="btn btn-primary btn-modern font-weight-bold custom-btn-border-radius custom-btn-arrow-effect-1 text-3 px-5 py-3">
                	ОТПРАВИТЬ
                	<svg class="ms-2" version="1.1" viewBox="0 0 15.698 8.706" width="17" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    					<polygon stroke="#FFF" stroke-width="0.1" fill="#FFF" points="11.354,0 10.646,0.706 13.786,3.853 0,3.853 0,4.853 13.786,4.853 10.646,8 11.354,8.706 15.698,4.353 "/>
    				</svg>
                </button>
            </div>
        </div>
    </form>

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

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

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

Как скрыть форму после успешной отправки.

Хотите скрыть форму после успешной отправки сообщения, оберите ее в конструкцию [[!+fi.successMessage:default=`код формы <form .... </form>`]]. Соответственно [[+fi.successMessage]] нужно удалить.

Перестало работать в formit 4.2.7 может и в чуть более старых версиях, возможно поправят в новых версиях компонента.

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

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

&hooks=`email,redirect`
&redirectTo=`12`

Где 12 — это id ресурса на который нужно перенаправить пользователя.

Примечание! Тогда из вызова формы выше можно (нужно) удалить параметр successMessage .

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

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

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

&hooks=`email,FormItSaveForm`
&formName=`Контакты`
&formFields=`name,email,subject,message`
&fieldNames=`name==Имя,email==Электронная почта,subject==Тема,message==Сообщение`

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

Для того чтобы была возможность прикреплять и отправлять вложения, необходимо в тег формы прописать enctype=»multipart/form-data».

<form class="form-contact contact_form" action="[[~[[*id]]? &scheme=`full`]]" method="post" enctype="multipart/form-data">

Соответственно добавить поля для прикрепления файла.

<div class="control-group form-group"> 
   <label for="upload">Прикрепить файл</label>
   <input type="file" name="upload"> 
</div>

И прописать в чанке оформления письма (tplForm) данное поле.

[[+upload:!empty=`<p><strong>Вложение</strong>: [[+upload]]</p>`]]

Как в FORMit передать название и url адрес страницы

Для того чтобы в форме получить Название страницы и ее адрес — удобно когда есть сквозные формы (например заказ звонка в шапке сайта). В форме выведете 2 скрытых поля:

<input type="hidden" name="pagetitle" value="[[*pagetitle]]">

<input type="hidden" name="urladress" value="[[~[[*id]]? &scheme=`full`]]">

fenom:

<input type="hidden" name="pagetitle" value="{$_modx->resource.pagetitle}">

<input type="hidden" name="urladress" value="{$_modx->makeUrl($_modx->resource.id, '', '', 'full')}">

После чего в чанке оформления письма (tplForm), добавьте следующую строку.

<p><strong>Страница, с которой отправлена форма</strong>: <a href="[[+urladress]]" target="_blank">[[+pagetitle]]</a></p>

Маска ввода для полей телефон, дата, время

Для этого подключаем к сайту jquery (если не подключен) и maskedinput (подключается внизу сайта)

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>

Далее прописываем для полей телефон, дата и время id=»name», пример.

<input type="text" name="phone" id="phone" class="form-control">
<input type="text" value="[[+fi.date]]" name="date" id="date" class="form-control">
<input type="text" value="[[+fi.cloc]]" name="cloc" id="cloc" class="form-control">

Далее инициализируем maskedinput

<script>
    $(function() {
        $("#date").mask("99.99.9999");
        $("#phone").mask("+7(999) 999-9999");
        $("#cloc").mask("99:99");
    });
</script>

Обработка checkbox

Для того чтобы FormIt начал обрабатывать чекбоксы, необходимо к атрибуту name в конце добавить [], пример:

<p class="h4">Виды работ*</p>
<div class="form-group form-check">
    <input type="checkbox" class="form-check-input" name="kopka_kolodca[]">
    <label class="form-check-label">Копка колодца</label>
</div>
<div class="form-group form-check">
    <input type="checkbox" class="form-check-input" name="chistka_kolodca[]">
    <label class="form-check-label">Чистка колодца</label>
</div>

а в чанке tplForm выводим его так:

[[+kopka_kolodca:!empty=`<p><strong>Вид работы</strong>: Копка колодца</p>`]]

[[+chistka-kolodca:!empty=`<p><strong>Вид работы</strong>: Чистка колодца</p>`]]

Базовая защита от спама — использование пустого поля NoSpam

Часто спам-боты заполняют каждое поле формы, чтобы пройти проверку. Таким образом, хорошим способом предотвращения спама является добавление поля в форму и требование, чтобы оно было пустым для успешной отправки.

Добавьте в форму поле

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

Затем в вызове, в validate укажите через запятую после email значение workemail:blank

&validate=`email,workemail:blank`

Внимание! Если на страницах сайта по несколько форм, лучше использовать связку Formit + AjaxForm

Как использовать 1 обработчик для всех форм на сайте

Чтобы не создавать для разных форм свои обработчики, я обычно все поля дописываю в данный обработчик, но у же с модификатором модификатором empty или if (на fenom).

Пример empty:

[[+phone:!empty=`<p><strong>Телефон</strong>: [[+phone]]</p>`]]

Пример if на fenom:

{if $phone?}<p><strong>Телефон</strong>: {$phone}</p>{/if}

В принципе можно прям все поля в обработчике завернуть в  одно из этих условий.

FormIt не работает — не отправляет письма, как исправить?

Давайте разберем самые типовые проблемы, почему формы не отправляться.

Проверка возможности отправки почты

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

1. Просто через функцию mail(): print (int)mail('test@some.host', 'subject', 'message');

2. Через MODX: print (int)$modx->user->sendEmail('message');

Желательно, чтобы оба варианта вернули 1. Если оба кода возвращают не единицу, пишите хостеру и ругайтесь с ним, либо попробуйте настроить отправку почты через SMTP.

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

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

Для начала обновите FormIt (Пакеты — Установщик — проверить обновления — обновить (если пакет не актуальный)).

Создайте любую страницу (ресурс) с пустым шаблоном, отключите у него html редактор и в поле содержимое поместите самую примитивную html разметку с простеньким вызовом formit:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тест формы</title>
</head>
<body>
[[!FormIt?
&hooks=`email`
&emailTpl=`testForm`
&emailTo=`ваш_email`
&emailFrom=`mail@ваш_домен`
&successMessage=`<h2>Отправлено</h2>`
]]
[[!+fi.successMessage:default=``]]
<form action="[[~[[*id]]]]" method="post">
    <input type="text" name="text" placeholder="Введите любой текст" value="[[!+fi.text]]" />
    <input type="submit" value="Отправить" />
</form>
[[!+fi.validation_error_message:notempty=`<p>[[!+fi.validation_error_message]]</p>`]]
</body>
</html>

Соответственно замените значения ваш_email и ваш_домен на свои. Создайте чанк testForm со следующим содержимым: <p><strong>Текст</strong>: [[+text]]</p> и попробуйте отправить форму.

Если после отправки увидите сообщение, что оправлено

а в почте письмо не видите, проверьте в первую очередь папку со спамом. Если и там письма нет, то попробуйте указать другой ящик (особенно если вы пользуйтесь почтой от mail.ru (bk, list)), например от google или яндекс. Так же бывает такое, что хостеры не хотят отсылать почту на сторонние сервисы, поэтому также можно попробовать создать на хостинге почту типа admin@ваш_домен и указать ее. И заново отправить форму и снова проверить отправку.

Если помогло, попробуйте перенести свой вызов формы на эту страницу (доработав данный вызов и форму) и снова отправить ее — не отправилась ищите ошибки в вызове. Если все отправляется с этой страницы, а со страницы с полноценным шаблоном нет — копайте в сторону js скриптов.

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

[[!QuickEmail?
    &to=`my-mail@mydomain.ru`
    &debug=`1`
]]

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

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

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

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

Отредактировано: 20 Февраля 2019

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

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

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

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

Код полностью

[<!--code-->[!FormIt?
   &hooks=`email`
   &emailFrom=`donotreply[@]yourdomain.com`
   &emailTpl=`mailtpl.feedback`
   &emailTo=`donotreply@yourdomain.com, admin@yourdomain.com`
   &emailSubject=`Письмо с сайта yourdomain.com`
   &successMessage=`Сообщение отправлено`
   &validate=`name:required,
      email:email:required,
      comment:required,
      antispam:blank`
]]

<form action="" method="post">
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" value="[<!--code-->[!+fi.name]]">
    <label for="email">Email</label>
    <input type="text" name="email" id="email" value="[<!--code-->[!+fi.email]]">
    <label for="comment">Comment</label>
    <textarea name="comment" id="comment" cols="30" rows="10" value="[<!--code-->[!+fi.comment]]"></textarea>
    <input type="text" name="antispam" id="antispam" value="">
    <input type="submit" value="Submit">
</form>

[[!+fi.validation_error_message:!empty=`
<div class="alert">
  <h3>Пожалуйста, исправьте следующие ошибки:</h3>
    <ul>
        [[!+fi.error.name:!empty=`<li><a href="blog/web/back-end/modx/formit/#name">Поле «Имя» не заполнено</a></li>`]]
        [[!+fi.error.email:!empty=`<li><a href="blog/web/back-end/modx/formit/#email">Поле «Email» не заполнено</a></li>`]]
        [[!+fi.error.comment:!empty=`<li><a href="blog/web/back-end/modx/formit/#comment">Поле «Комментарий» не заполнено</a></li>`]]
    </ul>
</div>`]]

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

2. <form action="" method="post">
       <label for="name">Имя:</label>
       <input type="text" name="name" id="name" >
       <label for="email">Email</label>
       <input type="text" name="email" id="email" >
       <label for="comment">Комментарий</label>
       <textarea name="comment" id="comment" cols="30" rows="10"></textarea>
       <input type="submit" value="Submit">
   </form>

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

   <form action="" method="post">
       <label for="name">Name:</label>
       <input type="text" name="name" id="name" value="[[!+fi.name]]">
       <label for="email">Email</label>
       <input type="text" name="email" id="email" value="[[!+fi.email]]">
       <label for="comment">Comment</label>
       <textarea name="comment" id="comment" cols="30" rows="10" value="[[!+fi.comment]]"></textarea>
       <input type="submit" value="Submit">
   </form>

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

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

   /* В качестве плейсхолдеров указывается код поля,
    который был записан в форме после префикса fi*/
   <p>Имя: [[+name]]</p>
   <p>Email: [[+email]]</p>
   <p>Комментарий: [[+comment]]</p>     

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

   [[!FormIt?
      &hooks=`email`
      &emailFrom=`donotreply@yourdomain.com`
      &emailTpl=`mailtpl.feedback`
      &emailTo=`donotreply@yourdomain.com, admin@yourdomain.com`
      &emailSubject=`Письмо с сайта yourdomain.com`
      &successMessage=`Сообщение отправлено`
   ]]

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

   &validate=`name:required,
         email:email:required,
         comment:required`
   
   /* К полю email добавлен параметр :email,
   он проверяет правильность написания адреса электронной почты */
   
   

6. Добавим оповещение пользователя, о неправильно заполненном поле. В специально отведенное для сообщения об ошибке место (к примеру в тег <label>) вставляем код: 

   [[!+fi.error.placeholder_code:notempty=`<span>Обязательное поле не заполнено</span>`]]

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

   [[!+fi.validation_error_message:!empty=`
   <div class="alert">
     <h3>Пожалуйста, исправьте следующие ошибки:</h3>
       <ul>
           [[!+fi.error.name:!empty=`<li><a href="[[*uri]]#name">Поле «Имя» не заполнено</a></li>`]]
           [[!+fi.error.email:!empty=`<li><a href="[[*uri]]#email">Поле «Email» не заполнено</a></li>`]]
           [[!+fi.error.comment:!empty=`<li><a href="[[*uri]]#comment">Поле «Комментарий» не заполнено</a></li>`]]
       </ul>
   </div>`]]

Анти-спам

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

  /* Скрытое поле. Не эффективный метод, т.к. боты научились не заполнять скрытые поля */
  <input type="hidden" name="antispam" value=""> 
  
  /* Обычное поле, скрытое за счет css */
  <input type="text" id="antispam" value="">
  
  /* Такие поля можно добавлять с использованием JS, 
  это усилит защиту, т.к. большинство ботов не использует js */
  
  /* При использовании скрытых полей в FormIT надо добавить проверку*/
  [[!FormIt? &validate=`antispam:blank`]]

• Для FormIt есть специальный хук; проверяющий указанный email в спам-листе. Данный метод помогает далеко не всегда.

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

• Метод от Ильи Уткина, добавить замаскированное поле, которое будет отвечать на спам успешной отправкой, благодаря чему спам-бот и его хозяин сочтут что сообщение отправлено:

/* Создаём сниппет checkSpam */
<?php
if ($_POST['surname']) { // проверяем наше поле на пустоту
    echo $AjaxForm->success('Ваше сообщение отправлено');
    die();
} else {
    return true;
}

/* Добавляем в форму поле, по которому будем фильтровать */
<input type="text" name="surname" class="form-input" placeholder="Фамилия">

/* Маскируем поле */
input[name="surname"] {
    display: block;
    width: 2px;
    height: 3px;
    margin-bottom: -3px;
    opacity: 0.01;
}

/* Добавляем сниппет checkSpam в качестве хука перед email */
`hooks` => `checkSpam,email...`

AjaxForm

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

[[!AjaxForm?
    &snippet=`FormIt`
    &form=`tpl.AjaxForm.example`
    &emailTpl=`mailtpl.feedback`
    &hooks=`email`
    &emailSubject=`Письмо с сайта yourdomain.com`
    &emailFrom=`donotreply[@]yourdomain.com`
    &emailTo=`donotreply@yourdomain.com, admin@yourdomain.com`
    &validate=`name:required,
      email:email:required,
      comment:required,
      antispam:blank`
    &successMessage=`Сообщение отправлено`
]]
   

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

Параметры FormIt

// запись при вызове
&submitVar=`contactform`

// в форме добавляется скрытое поле с аналогичным именем
<input type="hidden" name="contactform" value="1" />

Хуки (hooks)

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

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

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

FormItAutoResponder — отправляет автоответ автору сообщения.

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

&hooks=`math,email`
&validate=`math:required`

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

<label>[[!+fi.op1]] [[!+fi.operator:is=`-`:then=`minus`:else=`plus`]] [[!+fi.op2]]?</label>

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

&hooks=`recaptcha,email`

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

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

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

<!-- 
С redirectParam формат полученного адреса будет таким
test.html?user=123&success=1 
-->

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

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

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

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

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

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

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

&hooks=`recaptchav2,email`

// для 3 версии
   &hooks=`recaptchav3,email`

    [[!recaptchav2_render]]
    [[!+fi.error.recaptchav2_error]]

// для 3 версии
    [[!recaptchav3_render]]
    [[!+fi.error.recaptchav3_error]]

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

(selects, checkboxes, radio buttons)

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

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

<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>
   <!-- Способ заполнения с использованием phx фильтров -->
   <option value="yellow" [[!+fi.color:is=`yellow`:then=`selected`]]>Желтый</option>
</select>

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

<label>Color: [[!+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`]] > Зеленый

У html чекбоксов есть особенность — если значение отсутствует, параметр не передаётся, это так же влияет на проверку заполненности поля. Для того, чтобы отправить пустое значение, необходимо добавить скрытое input поле

[[!FormIt? &validate=`color:required`]]
...
<label>Color: [[!+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`]] > Зеленый

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

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

$hook->setValue('цвет',json_encode(array('синий','красный','зеленый')));

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

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

&successMessage=`Ваше письмо успешно отправлено <script>yaCounterXXXXXXXX.reachGoal('form');</script>`

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

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

1. правильную настройку mx записи на сервере;
2. в вызове formIt указан ли адрес исходящей почты: &emailFrom=`mail@site.ru`

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

php_flag register_globals off

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

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

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

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

В этой статье рассмотрим процесс создания формы обратной связи на MODX с использованием FormIt. А также работу с ней через Ajax посредством AjaxForm.

О компоненте FormIt

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

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

Установить пакет FormIt можно из главного репозитория modx.com/extras/package/formit.

Пример простой формы обратной связи на FormIt

В этом примере создадим простую HTML форму с использованием Bootstrap 5. Она будет состоять из 3 полей: имя, email и сообщение. FormIt будет выполнять валидацию формы и отправлять сообщение с данными, которые ввел пользователь, на email.

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

[[!FormIt?
  &emailFrom=`[[++emailsender]]`
  &emailTo=`alexander@mail.com`
  &emailTpl=`myEmailTpl`
  &hooks=`email`
  &submitVar=`feedback-form`
  &successMessage=`Форма успешно отправлена!`
  &validate=`nospam:blank,
    name:required,
    email:email:required,
    message:required:minLength=^20^`
]]

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

• hooks – список скриптов, которые нужно выполнить после успешной валидации формы; скрипты будут запускаться последовательно друг за другом; если какой-то скрипт завершится не удачно, то следующие за ним выполняться не будут;
• validate – список полей, которые нужно проверить на соответствии указанным требованиям; можно указать несколько валидаторов, например, как это сделано для email;
• submitVar – необходим, чтобы этот вызов сниппета FormIt обрабатывал не все формы, а только те, которые содержат указанный ключ в составе передаваемых на сервер данных (в суперглобальном массиве $_POST);
• successMessage – сообщение, которое необходимо вывести после успешного завершения обработки формы; работает, только если не используется свойство для редиректа;
• emailTpl – чанк, содержащий шаблон email письма;
• emailTo – адрес, на который нужно отправить email;
• emailFrom – адрес, от которого будет отправлен email; в этом примере email будем брать из системного параметра emailsender;
• emailSubject – тема письма.
• validationErrorMessage – сообщение, которое нужно вывести, если в форме содержатся ошибки.

Работает FormIt следующим образом:

1. Получает данные формы. Так как в вызове сниппета FormIt, мы указали свойство submitVar, то этот сниппет будет обрабатывать только ту форму, которая будет передавать в теле запроса этот ключ. Его мы добавили к кнопке type="submit".

2. Выполняет валидацию. После этого выполняется валидация формы в соответствии с требованиями, которые мы указали в свойстве validate. Валидатор в этом свойстве задаётся через двоеточие.

Валидатор blank проверяет, является ли поле пустым. В данном примере мы проверяем с помощью него поле nospam:

nospam:blank

Кроме blank в этом примере ещё используются следующие валидаторы:

• required – проверяет, является ли поле не пустым;
• email – содержит ли поле корректный адрес электронной почты;
• minLength – требование, к минимальному количеству символов.

Например, для проверки поля email мы используем 2 валидатора:

email:email:required

Таким образом это поле должно быть не пустым и содержать корректный email.

Если какие-то поля не прошли валидацию, то ошибки будут выведены в соответствующие плейсхолдеры. Например, для поля email это будет:

[[+fi.error.email]]

3. Выполнение хуков. После успешной валидации будут последовательно друг за другом выполнены скрипты, указанные в hooks.

В приведённом примере мы используем в hooks только один скрипт: email. Он отправит форму на email. Шаблон для этого письма он возьмёт из чанка, заданного в emailTpl. А отправит он письмо на email, указанный в свойстве emailTo.

4. Вывод сообщения об успехе. После успешного завершения хука email будет выведено в плейсхолдер fi.successMessage сообщение, указанное в свойстве successMessage.

HTML код формы:

[[!+fi.successMessage:notempty=`<div class="alert alert-success" role="alert">[[!+fi.successMessage]]</div>`]]
<form action="[[~[[*id]]]]" method="post" class="form">
  <input type="hidden" name="nospam" id="nospam" value="">
  <div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control[[!+fi.error.name:notempty=` is-invalid`]]" name="name" id="name" value="[[!+fi.name]]">
    <div class="invalid-feedback">[[!+fi.error.name]]</div>
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control[[!+fi.error.email:notempty=` is-invalid`]]" name="email" id="email" value="[[!+fi.email]]">
    <div class="invalid-feedback">[[!+fi.error.email]]</div>
  </div>
  <div class="mb-3">
    <label for="phone" class="form-label">Phone</label>
    <input type="tel" class="form-control[[!+fi.error.phone:notempty=` is-invalid`]]" name="phone" id="phone"
        value="[[!+fi.phone]]">
    <div class="invalid-feedback">[[!+fi.error.phone]]</div>
  </div>
  <div class="mb-3">
    <label for="message" class="form-label">Message</label>
    <textarea class="form-control[[!+fi.error.message:notempty=` is-invalid`]]" name="message" id="message"
        rows="5">[[!+fi.message]]</textarea>
    <div class="invalid-feedback">[[!+fi.error.message]]</div>
  </div>
  <div class="mb-3">
    <input type="submit" class="btn btn-primary" name="feedback-form" value="Отправить">
  </div>
</form>

Оформление формы выполнено на Bootstrap 5.

Скрытое поле nospam используется для защиты от спама. Обычно спам боты пытаются заполнить все поля, а это поле должно быть пустым. Если поле nospam не пустое, то форма не пройдёт проверку и её дальнейшая обработка выполняться не будет.

Сниппет FormIt будет заполнять в форме заданные плейсхолдеры. Например, для поля email:

• fi.email – значением поля email;
• fi.error.email – сообщением об ошибке при валидации.

Выделение полей, которые не прошли валидацию, выполняется посредством добавления к ним класса is-invalid. Например, для поля email это будет выглядеть так:

[[!+fi.error.email:notempty=` is-invalid`]]

Т.е. когда плейсхолдер fi.error.email не пустой, у элемента <input> появится класс is-invalid.

Для вывода сообщения об успешной обработки формы используется следующая конструкция:

[[!+fi.successMessage:notempty=`<div class="alert alert-success" role="alert">[[!+fi.successMessage]]</div>`]]

Она работает очень просто: если плейсхолдер fi.successMessage что-то содержит, то выведи HTML блок с содержимым [[!+fi.successMessage]]:

<div class="alert alert-success" role="alert">[[!+fi.successMessage]]</div>

Этот HTML блок является компонентом Alert фреймворка Bootstrap.

В теге <form> для атрибута action укажем URL на эту же страницу:

<form action="[[~[[*id]]]]" method="post">

Содержимое чанка myEmailTpl:

<p style="font-weight: bold;">Сообщение с формы обратной связи.</p>
<p><mark>[[+name]]</mark> (email: <mark>[[+email]]</mark>, phone: <mark>[[+phone:default=`-`]]</mark>) оставил следующее сообщение:</p>
<p style="background-color: #eee; padding: 15px;">[[+message]]</p>

Отправка формы через AJAX

По умолчанию FormIt не умеет работать с формой через AJAX. Но в репозитории modstore.pro имеется дополнение AjaxForm, которое позволяет отправлять формы через AJAX. По умолчанию оно работает с FormIt. Но при необходимости вместо FormIt можно использовать собственный сниппет.

При использовании AjaxForm работа с формой будет осуществляться следующим образом:

1. вывод HTML формы будет осуществляться из чанка, который передан AjaxForm в свойстве form;
2. отправка форма выполняется через AJAX, для этого сниппет AjaxForm регистрирует на фронтенде нужные скрипты;
3. на сервере запускает сниппет FormIt и передаёт ему данные формы;
4. после получения ответа от FormIt передаёт его браузеру, который выводится пользователю на страницу с использованием JavaScript.

Перед тем как начать переделывать форму проверим установлено ли у нас расширение AjaxForm.

Ход работы:

1. Создадим чанк myFormTpl и вставим в него HTML код формы.

AjaxForm вывод сообщений об ошибках, например, для поля email, осуществляет в элемент с классом error_mail. Кроме этого, к полям, которые не прошли валидацию добавляет класс error.

Но нас это не устраивает, т.к. сообщения об ошибке нужно помещать в элемент с классом invalid-feedback, а к полям, которые не прошли проверку необходимо добавлять класс is-invalid.

Это мы будем выполнять с помощью JavaScript при получении ответа от сервера:

$(document).on('af_complete', function (event, response) {
  const elForm = $(response.form);
  elForm.find('.is-invalid').each(function (index, el) {
    $(el).removeClass('is-invalid');
  });
  for (let key in response.data) {
    const elInput = elForm.find(`[name=${key}]`);
    elInput.addClass('is-invalid');
    elInput.next('.invalid-feedback').text($(response.data[key]).text());
  }
});

После этого из формы необходимо удалить плейсхолдеры [[!+fi.name]], [[!+fi.error.name]] и др. Они используются в качестве заполнителей для сниппета FormIt и позволяют нам сохранять значения, введённые пользователем и отображать ошибки валидации. Но так как сейчас работа ведётся через AJAX, то они нам не нужны.

В итоге HTML форма будет иметь следующий код:

<form action="#" method="post" class="feedback-form">
  <input type="hidden" name="nospam" id="nospam">
  <div class="mb-3">
    <label for="name" class="form-label">Имя</label>
    <input type="text" class="form-control" name="name" id="name">
    <div class="invalid-feedback"></div>
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" name="email" id="email">
    <div class="invalid-feedback"></div>
  </div>
  <div class="mb-3">
    <label for="message" class="form-label">Сообщение</label>
    <textarea class="form-control" name="message" id="message" rows="3"></textarea>
    <div class="invalid-feedback"></div>
  </div>
  <div class="mb-3">
    <input type="submit" class="btn btn-primary" name="feedback-form" value="Отправить">
  </div>
</form>

2. Добавим в нужный ресурс или шаблон вызов сниппета AjaxForm и скрипт:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
[[AjaxForm?
  &form=`myFormTpl`
  &formSelector=`feedback-form`
  &emailTpl=`myEmailTpl`
  &emailTo=`alexander@gmail.com`
  &hooks=`email`
  &successMessage=`Форма успешно отправлена!`
  &validationErrorMessage=`В форме содержатся ошибки!`
  &submitVar=`feedback-form`
  &validate=`nospam:blank,
    name:required,
    email:email:required,
    message:required:minLength=^20^`
]]
<script>
  $(document).on('af_complete', function(event, response) {
    const elForm = $(response.form);
    elForm.find('.is-invalid').each(function(index, el) {
      $(el).removeClass('is-invalid');
    });
    for (let key in response.data) {
      const elInput = elForm.find(`[name=${key}]`);
      elInput.addClass('is-invalid');
      elInput.next('.invalid-feedback').text($(response.data[key]).text());
    }
  });
</script>

Свойство form в вызове сниппета AjaxForm указывает чанк, в котором содержится HTML форма. Остальные свойства данный сниппет просто передаёт FormIt.

Скрипт необходим для установки не валидным полям класса is-invalid и вставки сведений об ошибках в элементы .invalid-feedback. Кроме этого JavaScript файлы, которые регистрирует AjaxForm во фронтенде, написаны с использованием библиотеки jQuery. Поэтому её нужно подключить.

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

1. Редирект на другую страницу после успешной обработки формы.

Перенаправить пользователя на другую страницу после успешной отправки формы можно с помощью хука redirect:

&hooks=`email,redirect`
&redirectTo=`7`

Указание ресурса, на который необходимо перенаправить пользователя осуществляется с помощью свойства redirectTo. В данном примере пользователь будет перенаправлен на ресурс, который имеет в качестве id значение 7.

2. Сохранение данных формы в базу данных.

Сохранить отправленные формы в базу данных можно с помощью хука FormItSaveForm:

&hooks=`email,FormItSaveForm`
&formName=`Форма обратной связи`
&formFields=`name,email,message`
&fieldNames=`name==Имя,email==Email,message==Сообщение`

Свойства:

• formName – название формы. По умолчанию: "form-{resourceid}";
• formFields – список полей, которые следует сохранить. По умолчанию: все поля, включая кнопку submit;
• fieldNames – позволяет задать отображение полей на форме в менеджере.

3. Добавление в форму заголовка и URL страницы

Добавить в форму дополнительные данные, например заголовок страницы и её URL, можно с помощью скрытых полей:

<input type="hidden" name="title" value="[[*pagetitle]]">
<input type="hidden" name="url" value="[[~[[*id]]? &scheme=`full`]]">

Для отправки этой информации на email добавьте в шаблон письма:

<p>Страница, с которой отправлена форма: <a href="[[+url]]">[[+title]]</a></p>

4. Обработка полей select

Для обработки <select> FormIt предоставляет фильтр вывода FormItIsSelected. Он устанавливает атрибут selected, если значение <option> соответствует выбранной:

<div class="mb-3">
  <label for="color" class="form-label">Цвет</label>
  <select class="form-select[[!+fi.error.color:notempty=` is-invalid`]]" name="color" id="color" value="[[!+fi.color]]">
    <option value="" selected disabled>Выберите цвет</option>
    <option value="Красный" [[!+fi.color:FormItIsSelected=`Красный`]]>Красный</option>
    <option value="Оранжевый" [[!+fi.color:FormItIsSelected=`Оранжевый`]]>Оранжевый</option>
    <option value="Желтый" [[!+fi.color:FormItIsSelected=`Желтый`]]>Желтый</option>
  </select>
  <div class="invalid-feedback">[[!+fi.error.color]]</div>
</div>

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

FormIt для обработки type="checkbox" и type="radio" предоставляет фильтр FormItIsChecked аналогичный FormItIsSelected.

Это пример с чекбоксами:

<div class="mb-3">
  <div class="form-check">
    <input type="checkbox" class="form-check-input [[!+fi.error.colors:notempty=` is-invalid`]]" name="colors[]" id="colors-red" value="Красный" [[!+fi.colors:FormItIsChecked=`Красный`]]>
    <label class="form-check-label" for="colors-red">Красный</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input [[!+fi.error.colors:notempty=` is-invalid`]]" name="colors[]" id="colors-orange" value="Оранжевый" [[!+fi.colors:FormItIsChecked=`Оранжевый`]]>
    <label class="form-check-label" for="colors-orange">Оранжевый</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input [[!+fi.error.colors:notempty=` is-invalid`]]" name="colors[]" id="colors-yellow" value="Желтый" [[!+fi.colors:FormItIsChecked=`Желтый`]]>
    <label class="form-check-label" for="colors-yellow">Желтый</label>
  </div>
  <input type="hidden" class="[[!+fi.error.colors:notempty=` is-invalid`]]" name="colors[]" value="">
  <div class="invalid-feedback">[[!+fi.error.colors]]</div>
</div>

Если colors должно быть обязательным, то нужно добавить «скрытое» поле, как это показано в примере выше. После этого в свойство validate добавить colors:required:

[[!FormIt?
  ...
  &validate=`...
    colors:required`
]]