MODX Formit — документация и примеры создания форм

MODX Formit - документация и примеры создания форм MODX Revo

Изменена: 29 июля 2020 в 18:58

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

Что такое FormIt?

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

Скачать

Его можно загрузить из стандартного репозитория MODX.

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

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

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

Имя Описание Значение по умолчанию
preHooks Какие скрипты запускать, если они есть, после загрузки формы. Это может быть список хуков, разделенных запятыми , и если первый не удастся, последующие не сработают. Хук также может быть именем сниппета, который будет выполнять этот сниппет.
renderHooks Какие сценарии запускаются, если таковые имеются, после загрузки формы, предварительные зацепки завершаются, и все поля и ошибки установлены. Это может быть разделенный запятыми список хуков, используемых для манипулирования всеми полями формы, прежде чем все будет установлено на основе данных из других пакетов или предварительных хуков. Хук также может быть именем сниппета, который будет выполнять этот сниппет.
hooks Какие скрипты запускать, если таковые имеются, после прохождения формы проходит валидацию. Это может быть список хуков, разделенных запятыми , и если первый не удастся, последующие не сработают. Хук также может быть именем Фрагмента, который будет выполнять этот Фрагмент.
submitVar Если установлено, не будет начинать обработку формы, если эта переменная POST не передана. Примечание: необходимо, если вы используете &store свойство (+ set submit var in input = «submit»!).
validate Разделенный запятыми список полей для проверки с каждым именем поля как name: validator (например:) username:required,email:required. Валидаторы также могут быть прикованы цепью, как email:email:required. Это свойство может быть указано в нескольких строках.
validationErrorMessage Общее сообщение об ошибке, для установки в качестве заполнителя в [[!+fi.validation_error_message]]случае сбоя проверки. Может содержать, [[+errors]]если вы хотите отобразить список всех ошибок в верхней части. A form validation error occurred. Please check the values you have entered.
validationErrorBulkTpl HTML tpl, который используется для каждой отдельной ошибки в общем значении сообщения об ошибке проверки. [[+error]]
errTpl HTML-оболочка для сообщений об ошибках. Примечание: не чанк, просто прямой HTML. [[+error]]
customValidators Разделенный запятыми список пользовательских имен валидаторов (фрагментов), которые вы планируете использовать в этой форме. Они должны быть явно указаны здесь, иначе они не будут запущены.
clearFieldsOnSuccess Если true, очистит поля при успешной отправке формы, которая не перенаправляет. 1
хранить Если true, данные будут сохранены в кеше для извлечения с использованием фрагмента FormItRetriever . 0
storeTime Если для «store» задано значение true, это указывает количество секунд, в течение которых сохраняются данные из отправки формы. По умолчанию пять минут. 300
StoreLocation При использовании магазина это определяет, где форма хранится после отправки. Возможные варианты: «кеш» и «сессия». По умолчанию «кэш». cache
placeholderPrefix Префикс для использования для всех заполнителей, установленный FormIt для полей. Обязательно добавьте «.» разделитель в вашем префиксе. fi.
successMessage Если не использовать переадресацию (перенаправления), отобразите это сообщение об успешном завершении после успешной отправки.
successMessagePlaceholder Имя заполнителя, для которого необходимо установить сообщение об успехе. fi.successMessage
RedirectTo ID страницы страницы «Спасибо», куда посетителя можно отправить после успешной отправки формы, но этот параметр читается ТОЛЬКО, если вы включите «перенаправление» в список & хуков.
allowFiles Укажите, разрешено ли публиковать файлы. Отправленные файлы хранятся во временном каталоге, чтобы предотвратить потерю файлов в многошаговой форме. true
attachFilesToEmail Вложение загруженных файлов в электронную почту, форма должна быть установлена ​​как enctype = «multipart/form-data» true

Проверка

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

Хуки

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

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

Пример создания сложной формы при помощи FormIt

HTML разметка

<form class="row">
    <div class="col-md-6">
        <p class="h4">Виды работ*</p>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input">
            <label class="form-check-label" for="exampleCheck1">Копка колодца</label>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input">
            <label class="form-check-label" for="exampleCheck1">Чистка колодца</label>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input">
            <label class="form-check-label" for="exampleCheck2">Углубление (ремонт) колодца</label>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input">
            <label class="form-check-label" for="exampleCheck3">Строительство септика (канализации)</label>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input">
            <label class="form-check-label" for="exampleCheck4">Водоснабжение</label>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input">
            <label class="form-check-label" for="exampleCheck5">Другое.</label>
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">Местоположение участка*</label>
            <textarea class="form-control" rows="2"></textarea>
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea2">Дополнительная информация</label>
            <textarea class="form-control" rows="2"></textarea>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="h4" for="exampleInputName">Ваше имя*</label>
            <input type="text" class="form-control" placeholder="Ваше имя" aria-describedby="name">
        </div>
        <div class="form-group">
            <label class="h4" for="exampleInputPhone">Телефон*</label>
            <input type="text" class="form-control" placeholder="Ваш телефон" aria-describedby="phone">
        </div>
        <div class="form-group">
            <label class="h4" for="exampleInputEmail">Email*</label>
            <input type="text" class="form-control" placeholder="Ваш email" aria-describedby="email">
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" checked>
            <label class="form-check-label small" for="exampleCheck1">Согласен на <a href="{$_modx->makeUrl(13)}" target="_blank" rel="noopener noreferrer">обработку персональных данных</a>.</label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary center">Рассчитать стоимость</button>
</form>

Задача. Заставить данную форму отправлять сообщения на email, разметить обязательные поля, отправлять адрес страницы (url текущей страницы) с которой отправлена форма и скрыть форму после успешной отправки, а на ее месте вывести сообщение.

Решение.

Шаг 1. Добавляем в вывод формы свойство action=»[[~[[*id]]]]» и указываем method=»post».

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

Шаг 2. Добавляем ко всем input и textarea атрибутам name (на английском, без пробелов), пример:

<input type="checkbox" class="form-check-input" name="kopka-kolodca">
<input type="text" class="form-control" name="name" placeholder="Ваше имя" aria-describedby="name" required>
<textarea class="form-control" rows="2" name="mestopolozhenie-uchastka" required></textarea>

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

<input type="checkbox" class="form-check-input" name="kopka-kolodca[]">

Шаг 4. Делаем поля обязательными, для этого воспользуемся атрибутом required.

<input type="text" class="form-control" name="name" placeholder="Ваше имя" aria-describedby="name" required>

Шаг 5. Добавляем поля которые получают адрес и заголовок страницы.

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

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

Создаем чанк с именем tpl-form с перечислением всех полей формы, в следующем формате.

[[+name:!empty=`<p><strong>Имя</strong>: [[+name]]</p>`]]
[[+phone:!empty=`<p><strong>Телефон</strong>: <a href="tel:[[+phone]]">[[+phone]]</a></p>`]]
[[+email:!empty=`<p><strong>Почта</strong>: <a href="mailto:[[+email]]">[[+email]]</a></p>`]]
[[+kopka-kolodca:!empty=`<p><strong>Вид работы</strong>: Копка колодца</p>`]]
[[+chistka-kolodca:!empty=`<p><strong>Вид работы</strong>: Чистка колодца</p>`]]
[[+uglublenie-remont-kolodca:!empty=`<p><strong>Вид работы</strong>: Углубление (ремонт) колодца</p>`]]
[[+stroitelstvo-septika-kanalizacii:!empty=`<p><strong>Вид работы</strong>: Строительство септика (канализации)</p>`]]
[[+vodosnabzhenie:!empty=`<p><strong>Вид работы</strong>: Водоснабжение</p>`]]
[[+drugoe:!empty=`<p><strong>Вид работы</strong>: Другое</p>`]]
[[+mestopolozhenie-uchastka:!empty=`<p><strong>Местоположение участка</strong>: [[+mestopolozhenie-uchastka]]</p>`]]
[[+dopolnitelnaya-informaciya:!empty=`<p><strong>Дополнительная информация</strong>: [[+dopolnitelnaya-informaciya]]</p>`]]
<p><strong>Страница с которой отправлена форма</strong>: <a href="[[+urladress]]">[[+pagetitle]]</a></p>

Внимание! Здесь используется модификатор empty, который проверяет поля на пустоту , т.е. если поле не заполнено, не чего не выведется. Так можно сделать 1 универсальный обработчик для всех форм.

Пример для fenom.

{if $name?}
	<p><strong>{$name}</strong></p>
{/if}

Шаг 7. Вызываем FormIt со скрытием формы после отправки — в общем полностью готовый код с вызовом.

[[!FormIt?
&hooks=`email`
&emailTpl=`tpl-form`
&emailTo=`[[++emailsender]]`
&emailSubject=`Калькулятор на сайте [[++site_url]]`
&successMessage=`<h2 class="text-center">Спасибо, наш менеджер скоро с вами свяжется!</h2>`
]]
[[!+fi.successMessage:default=`
<form class="row" action="[[~[[*id]]? &scheme=`full`]]" method="post">
    <input type="hidden" name="pagetitle" value="[[*pagetitle]]">
    <input type="hidden" name="urladress" value="[[~[[*id]]? &scheme=`full`]]"> 
    <div class="col-md-6">
        <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" for="exampleCheck1">Копка колодца</label>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" name="chistka_kolodca[]">
            <label class="form-check-label" for="exampleCheck1">Чистка колодца</label>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" name="uglublenie_remont_kolodca[]">
            <label class="form-check-label" for="exampleCheck2">Углубление (ремонт) колодца</label>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" name="stroitelstvo_septika_kanalizacii[]">
            <label class="form-check-label" for="exampleCheck3">Строительство септика (канализации)</label>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" name="vodosnabzhenie[]">
            <label class="form-check-label" for="exampleCheck4">Водоснабжение</label>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" name="drugoe[]">
            <label class="form-check-label" for="exampleCheck5">Другое.</label>
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">Местоположение участка*</label>
            <textarea class="form-control" rows="2" name="mestopolozhenie_uchastka" required></textarea>
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea2">Дополнительная информация</label>
            <textarea class="form-control" rows="2" name="dopolnitelnaya_informaciya"></textarea>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="h4" for="exampleInputName">Ваше имя*</label>
            <input type="text" class="form-control" name="name" placeholder="Ваше имя" aria-describedby="name" required>
        </div>
        <div class="form-group">
            <label class="h4" for="exampleInputPhone">Телефон*</label>
            <input type="text" class="form-control" name="phone" placeholder="Ваш телефон" aria-describedby="phone" required>
        </div>
        <div class="form-group">
            <label class="h4" for="exampleInputEmail">Email*</label>
            <input type="text" class="form-control" name="email" placeholder="Ваш email" aria-describedby="email" required>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" checked required>
            <label class="form-check-label small" for="exampleCheck1">Согласен на <a href="[[~13]]" target="_blank" rel="noopener noreferrer">обработку персональных данных</a>.</label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary center">Рассчитать стоимость</button>
</form>
`]]

Вызов формы на феном

{'!FormIt' | snippet : [ 
   'hooks' => 'email',
   'emailTpl' => 'tpl-form',
   'emailTo' => $_modx->config.emailsender, 
   'emailSubject' => 'Калькулятор на сайте' ~ $_modx->config.site_name,
   'successMessage' => '<h2 class="text-center">Спасибо, наш менеджер скоро с вами свяжется!</h2>'
]}

Сам форма с fenom разметкой, отличается только начало, остальное тоже

<form class="row" action="{$_modx->makeUrl($_modx->resource.id, '', '', 'full')}" method="post"> 
<input type="hidden" name="pagetitle" value="{$_modx->resource.pagetitle}"> 
<input type="hidden" name="urladress" value="{$_modx->makeUrl($_modx->resource.id, '', '', 'full')}">

Небольшой разбор и проверка.

Делаю названия полей через нижнее подчеркивание (mestopolozhenie_uchastka), т.к. потом переделаю на fenom — и ему подчеркивание через дефис (mestopolozhenie-uchastka) не нравится.

Здесь условие [[!+fi.successMessage:default=` `]] скрывает форму после отправки и выводит сообщение из successMessage.

Вот мы заполняем форму

заполняем форму сделанную при помощи formit

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

выводится сообщение

и данные приходят на почту.

полученное письмо на почте

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

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

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

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

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

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

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

&validate=`email,workemail:blank`

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

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

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

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

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

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

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

&hooks=`email,FormItSaveForm`
&formName=`Калькулятор`
&formFields=`name,phone,email,kopka_kolodca,chistka_kolodca,uglublenie_remont_kolodca,stroitelstvo_septika_kanalizacii,vodosnabzhenie,drugoe,mestopolozhenie_uchastka,dopolnitelnaya_informaciya`
&fieldNames=`name==Имя,phone==Телефон,email==Электронная почта,kopka_kolodca==Копка колодца,chistka_kolodca==Чистка колодца,uglublenie_remont_kolodca==Углубление (ремонт) колодца,stroitelstvo_septika_kanalizacii==Строительство септика (канализации),vodosnabzhenie==Водоснабжение,drugoe==Другое,mestopolozhenie_uchastka==Местоположение участка,dopolnitelnaya_informaciya==Дополнительная информация`

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

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

<form class="row" 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>

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

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

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

1. Создаем сниппет formit-url с кодом: $_SERVER[‘HTTP_REFERER’]; и помещаем его вызов в поле hidden, после чего выводим в чанке оформления письма.

Строчка в форме.

<input type="hidden" name="formit-url" value="[[formit-url]]">

Строчка в чанке оформления письма.

<p>URL страницы, с которой отправлена форма: [[+formit-url]]</p>

2. В hidden поле помещаем [[~[[*id]]]] далее в чанке с текстом письма выводим содержимое этого поля.

По сути почти тоже самое, что и в первом случае, только еще проще.

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

Для этого подключаем к сайту 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" value="[[+fi.phone]]" 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>

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

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

Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
web-revenue.ru
Добавить комментарий