Modx revolution: Простая форма обратной связи, используя Formit! Modx revolution formit документация
| hooks | Здесь указываются скрипты, которые необходимо будет выполнить после проверки формы. Это может быть разделенный запятыми список хуков. В случае если проверка не пройдена, обработка не происходит. Также хуком может быть имя сниппета, которое будет выполнять этот сниппет. | |
| preHooks | Здесь указываются хуки, которые необходимо будет выполнить перед проверкой формы. | |
| submitVar | Если задано, обработка формы не начнется пока не обнаружится указанная POST-переменная. Внимание: требуется, если Вы используете свойство &store (+ установите submit переменную в input="submit"!). | |
| validate | Разделенный запятыми список полей для проверки, где каждое имя поля имеет вид name:validator (например, username:required,email:required). Валидаторы также могут быть сцеплены, как email:name:required. Это свойство может присваиваться нескольким строкам. | |
| validationErrorMessage | Общее сообщение об ошибке, устанавливается в плейсхолдер [[!+fi.validation_error_message]], если валидация не пройдена. Если Вы хотите отобразить список всех ошибок в верхней части, используйте плейсхолдер [[+errors]]. | <p>Форма содержит ошибки, проверьте вводимые данные</p> |
| validationErrorBulkTpl | Темплейт, который используется для каждой отдельной ошибки в общем массиве сообщений об ошибке. | <li>[[+error]]li> |
| errTpl | HTML код для сообщений об ошибках. Примечание: не чанк, а только HTML. | <span>[[+error]]span> |
| customValidators | Разделенный запятыми список сниппетов-валидаторов, которые Вы планируете использовать в этой форме. | |
| clearFieldsOnSuccess | Если значение true и не используется редирект, сниппет очистит все поля формы после успешной обработки. | 1 |
| store | Если значение true, сниппет будет хранить данные в кэше для выборочного использования сниппетом FormItRetriever. | 0 |
| storeTime | Если свойство 'store' равно true, то это свойство устанавливает количество секунд для сохранения данных из формы. По умолчанию пять минут. | 300 |
| placeholderPrefix | Префикс, используемый для всех плейсхолдеров сниппета | fi. |
| successMessage | Если не используется хук-редирект, по завершению успешного выполнения сниппета отображается это сообщение. | |
| successMessagePlaceholder | Имя плейсхолдера, куда помещается сообщение об успешном выполнении. | fi.successMessage |
| redirectTo | ID страницы "Thank You", куда посетитель будет перенаправлен после успешного выполнения сниппета. Примечание: использовать с хуком "redirect" в в списке свойства &hooks. |
FormIt MODX Revolution. Создание многостраничной формы с помощью Formit
Чтобы избежать огромных, с прокруткой, форм, дизайнеры разбивают их на несколько страниц. Вот простой, пошаговый пример, как это реализовать в MODX с помощью дополнения FormIt.
- Я сделал это “дешево и сердито”, как на этом форуме (спасибо odeclas)
- Я предполагаю, что вы уже использовали FormIt, но не делали многостраничную форму. Официальную документацию на FormIt можно найти по ссылке: http://www.modx.cc/documentation/additions/formit/
- Это решение использует FormItRetriever, который идет вместе с FormIt. Вам нужны оба, потому что это работает следующим образом: Обработав первую страницу, FormIt просто «сохраняет» результаты, которые FormItRetriever “извлекает” и размещает в плейсхолдере в скрытых полях на следующей странице. При обработке второй страницы появляется результат (в этом примере это email).
- Вызов первой страницы сниппетом FormIt
Немного деталей::
!FormIt? » вызов сниппета&hooks » обратите внимание, здесь нет email, вычислений или чего-то еще, я просто делаю редирект на следующую страницу. Кто-то заподозрит меня в создании спам-крючка или чего-то в этом роде – я не думаю, что в этом есть необходимость.&store » сообщаем FormIt о записи результатов.&redirectTo » Заменяем ID на ID документа следующей старницы формы.&validate » Это стандартная проверка FormIt – добавляет необходимые поля в форму. Эта страница формы не появится, пока не пройдет проверку.
Больше ничего особенного нет, поэтому – вперед!- Вторая страница вызова сниппета FormIt
Немного деталей:
!FormIt? » Здесь вы можете использовать любой FormIt крючок, который обычно используете. В этом примере FormIt проверяет на спам адреса результаты формы и перенаправляет на страницу с благодарностью (Thank You page).&emailTpl » Имя email шаблона чанка. Оно необходимо, иначе FormIt отправит списокполей и значений.&emailSubject » Тема письма с отчетом – вы можете использовать плейсхолдер для любых полей формы&emailTo » Массив адресов получателей, разделитель – запятая.&redirectTo » заменяет ID2 документа на ID вашей “страницы с благодарностью”.&validate » Дополнительные опции проверки. Информацию о использовании и список опций можно найти по ссылке http://www.modx.cc/documentation/additions/formit/validation-formit/- Очень важная часть!
Простая форма обратной связи, используя Formit! — Арсений Дугин
В интернете множество статей об установке и настройке дополнения Formit с целью создать обратную связь.
Но я хотел бы рассказать о том, как создать простую и рабочую форму обратной связи за максимально короткое время.
Устанавливаем дополнение Formit
Нажимаем Загрузить, а затем Установить.
После этого создадим новый чанк и назовем его, к примеру, sentEmailTpl. По этому чанку-шаблону будут приходить письма с сайта
Здесь
- [[+name]] — имя отправителя
- [[+email]] — электронная почта отправителя
- [[+message]] — сообщение, написанное отправителем на сайте
Далее создадим страницу с благодарностью за то, что пользователь отправил сообщение через форму обратной связи.
Эта страница имеет ID — 10. Это идентификатор мы будем использовать ниже при вызове FormIt.
Теперь открываем страницу, на которой будет форма обратной связи. Перед будущей формой вставляем:
[[!FormIt? &hooks=`email,redirect` &emailTpl=`sentEmailTpl` &emailSubject=`Заяка с сайта Рога и Копыта` &redirectTo=`10` &emailTo=`[email protected]` ]]Это блок вызова дополнения FormIt. Рассмотрим его подробнее:
- Первый параметр — hooks. Хуки — это скрипты дополнения FormIt. В нашем случае у нас их два — email отвечает за саму отправку электронной почты, а redirect — отсылает пользователя на страницу с благодарностью за контакт;
- emailTpl — шаблон письма, отправляемого на сайте. Выше мы его создали и отредактировали;
- emailSubject — тема писем, которые будут приходить с сайта;
- redirectTo — ID страницы, которую будем показывать пользователю после того, как он отправил сообщение через форму обратной связи. Мы ее создали ранее;
- emailTo — адрес электронной почты куда будут приходить письма с сайта.
Теперь перейдем к самой html-форме:
<form action="[[~[[*id]]]]" method="post"> <label for="name">Как Вас зовут?</label> <input type="text" name="name" value="[[!+fi.name]]" /> <label for="email">E-mail</label> <input type="text" name="email" value="[[!+fi.email]]" /> <label for="message">Сообщение</label> <textarea cols="30" name="message" rows="30"></textarea> <input type="submit" value="Отправить" /></form>Здесь самое интересное то, чтобы поменять у каждого элемента значение value на имя, которое мы описали в шаблоне sentEmailTpl.
Так же не забывайте про параметры тэга form. Эти значения id, action и method обязательны для корректной работы.
Итоговый варианты формы с вызовом FormIt:
[[!FormIt? &hooks=`email,redirect` &emailTpl=`sentEmailTpl` &emailSubject=`Заяка с сайта Рога и Копыта` &redirectTo=`10` &emailTo=`[email protected]` ]] <form action="[[~[[*id]]]]" method="post"><label for="name">Как Вас зовут?</label> <input type="text" name="name" value="[[!+fi.name]]" /> <label for="email">E-mail</label> <input type="text" name="email" value="[[!+fi.email]]" /> <label for="message">Сообщение</label> <textarea cols="30" name="message" rows="30"></textarea> <input type="submit" value="Отправить" /></form>adugin.ru
MODX Revo - Продвинутая форма с вложениями при помощи Formit + AjaxForm
<form method="post" action="[[~[[*id]]]]" enctype="multipart/form-data">
<fieldset>
<div>
<div>
<div>
<i></i>
<input type="text" name="name" required="" placeholder="Ваше имя*" value="[[+fi.name]]">
<span>[[+fi.error.name]]</span>
</div>
</div>
<div>
<div>
<i></i>
<input type="text" name="email" required="" placeholder="Ваш email*" value="[[+fi.email]]">
<span>[[+fi.error.email]]</span>
</div>
</div>
<div>
<div>
<i></i>
<input type="text" name="pfone" required="" placeholder="Ваш телефон*" value="[[+fi.pfone]]">
<span>[[+fi.error.pfone]]</span>
</div>
</div>
</div>
<div>
<select name="department">
<option value="">--- Выберите тип работы ---</option>
<option value="Разработка-сайта-под-ключ">Разработка сайта под ключ</option>
<option value="Доработка-сайта">Доработка сайта</option>
<option value="Адаптация-имеющегося-сайта">Адаптация имеющегося сайта</option>
<option value="Разработка-верстка-дизайна-сайта">Разработка/верстка дизайна сайта</option>
<option value="Продвижение-сайта">Продвижение сайта</option>
<option value="Рекламные-компании">Рекламные компании</option>
<option value="Разработка-дизайна-групп">Разработка дизайна групп</option>
<option value="Продвижение-групп">Продвижение групп</option>
<option value="Прочеее">Прочеее</option>
</select>
</div>
<div>
<textarea rows="5" name="message" required="" data-maxlength="2000" data-info="textarea-words-info" placeholder="Примечания / пожелания"></textarea>
<i><!-- icon --></i>
<span>[[+fi.error.message]]</span>
</div>
<div>
<input type="file" name="attachment" data-btn-text="Выберите файл" tabindex="-1">
</div>
</fieldset>
<button type="submit">Отправить</button>
[[+fi.success:is=`1`:then=`
<div>[[+fi.successMessage]]</div>`]]
[[+fi.validation_error:is=`1`:then=`<div>[[+fi.validation_error_message]]</div>`]]
</form>
web-revenue.ru
Сохранение MODX форм с FormIt + AjaxForm в админке сайта
Сегодня небольшой урок о том как сохранять данные с MODX форм созданных на FormIt или в связке с FormIt + AjaxForm в админке сайта.
Сделать это очень просто, для этого достаточно установить пакет FormSave, немного модифицировать вызов формы, а именно добавить в нее хук (hooks) FormSave в принципе этого достаточно, но если у вас много форм, то также желательно добавить параметр fsFormTopic (Тема для формы. Используется для разделения нескольких форм.). Так же есть еще пару параметров:
fsFormFields — Список сохраненных полей через запятые , если они опущены, все поля формы будут сохранены. (пример: name,email,message)
fsFormPublished — Должна ли форма публиковать «1» в базе данных. В настоящее время не используется (т.е. публикует по умолчанию).
Пример вызова для FormIt
[[!FormIt? &hooks=`spam,FormSave,email,redirect` &emailTpl=`MyEmailChunk` &emailTo=`[email protected]` &redirectTo=`321` &fsFormTopic=`contact` &validate=`name:required, email:email:required, subject:required, text:required:stripTags, numbers:required, colors:required` ]]
[[!FormIt? &hooks=`spam,FormSave,email,redirect` &emailTpl=`MyEmailChunk` &emailTo=`[email protected]` &redirectTo=`321` &fsFormTopic=`contact` &validate=`name:required, email:email:required, subject:required, text:required:stripTags, numbers:required, colors:required` ]] |
Пример вызова для FormIt + AjaxForm
[[!AjaxForm? &snippet=`FormIt` &form=`kontact-form` &emailTpl=`tpl-kontact-form` &hooks=`spam,email,FormSave` &emailSubject=`Сообщение с сайта [[++site_url]]` &emailTo=`[[++emailsender]]` &validate=`name:required,email:required` &fsFormTopic=`contact` &validationErrorMessage=`В форме содержатся ошибки!` &successMessage=`Сообщение успешно отправлено!` ]]
[[!AjaxForm? &snippet=`FormIt` &form=`kontact-form` &emailTpl=`tpl-kontact-form` &hooks=`spam,email,FormSave` &emailSubject=`Сообщение с сайта [[++site_url]]` &emailTo=`[[++emailsender]]` &validate=`name:required,email:required` &fsFormTopic=`contact` &validationErrorMessage=`В форме содержатся ошибки!` &successMessage=`Сообщение успешно отправлено!` ]] |
Просмотр отправленных форм в админке
Для того что бы посмотреть отправленные формы, перейдите в Приложения и выберите FormSave, на открывшейся странице увидите следующее:
Для просмотра сообщений, щелкните по нужному пункту и выберите VIew data и уведите развернутое сообщение.
Если у кого возникли сложности, спрашивайте в комментариях.
web-revenue.ru
Email хук FormIt MODX Revolution
Email хук отправляет содержание Вашей формы на любой электронный адрес(а).
Доступные свойства
|
Имя |
Описание |
|
emailTpl |
Запрашиваемое. Tpl чанк для email сообщения. Если не указан, будет посылаться список полей с их значениями. |
|
emailSubject |
Тема email сообщения. |
|
emailUseFieldForSubject |
Если 1 и поле «subject» пройдено, то будет использоваться значение этого поля в качестве строки темы email-а. |
|
emailTo |
Разделенный запятыми список писем для отправки |
|
emailToName |
Опционно. Разделенный запятыми список имен вместе со значениями emailTo. |
|
emailFrom |
Опционно. Если установлено, будет определять From: адрес для email. Если не установлено, сначала будет искать поле формы «email». Если ничего не найдено, настройка системы по умолчанию – «emailsender» . |
|
emailFromName |
Опционно. Если установлено, будет определять From: имя для email. |
|
emailHtml |
Опционно. Так или иначе, email должен быть в HTML-формате. По умолчанию 1. |
|
emailConvertNewlines |
Опционно. Если установлено 1, будет преобразовывать все разрывы строки в br теги. |
|
emailReplyTo |
Еmail, который установлен как «ответа на». |
|
emailReplyToName |
Опционно. Имя поля Reply-To. |
|
emailCC |
Разделенный запятыми список электронных адресов для отправки через cc. |
|
emailCCName |
Опционно. Разделенный запятыми список имен вместе со значениями emailCC. |
|
emailBCC |
Разделенный запятыми список электронных адресов для отправки через bcc. |
|
emailBCCName |
Опционно. Разделенный запятыми список имен вместе со значениями emailBCC. |
|
emailMultiWrapper |
Обрабатывает значения, представленные флажками/мульти-селекторами с этим значением. По умолчанию только значение. (1.6.0 +) |
|
emailMultiSeparator |
Разделяет флажки/ мульти-селекторы этим значением. По умолчанию разрыв строки. (1.6.0 +) |
Любое из свойств email хуков может содержать плейсхолдеры или имена полей из Вашей формы, которые будут оцениваться.
Использование
Просто укажите его в своем запросе FormIt, а затем также добавьте в него специфичные email свойства.
Обратите внимание, что свойство &emailTpl указывает на имя Chunk. В этом Chunk у Вас будут плейсхолдеры для каждого поля в форме. Наш Chunk может выглядеть следующим образом:
<p>Hello,</p> <p> just purchased the CDO package: .</p> <p>Their email: </p> <p>Thanks!</p> Это предполагает, конечно, что в Вашей форме есть поля «name», «cdo_package» и «email».
Определение динамических адресов
В примере использована форма для определения адресатов:
... <select name="addressTo"> <option value="[email protected]" >John</option> <option value="[email protected]" >Jane</option> </select>
Таким образом email отправляется тому, кто выбран в поле «addressTo».
Использование поля темы в качестве строки темы еmail-а
Скажем, у Вас есть поле темы в форме. Вы хотите, чтобы содержимое было темой письма email рассылки. Хук email может:
Далее идет поиск поля «subject», которое будет использоваться в email. Если оно не найдено или пустое, то по умолчанию – свойство &emailSubject.
Управление флажками и мультиселектами в e-mail
FormIt, версия 1.6.0 +, будет автоматически обрабатывать флажки и объединять их в одно поле. Можно использовать свойства &emailMultiSeparator и &emailMultiWrapper, чтобы следить за добавлением. Например, чтобы сделать флажки неразрывными в тегах LI:
Или просто разделить их с тегами BR: 1
www.modx.cc
Обработка селектов, флажков и радио MODX Revolution
Хотя FormIt может обрабатывать поля любого типа, для селектов, радио и флажков требуются специальные инструкции, в связи с их естественным значением.
Обработка селективных полей
FormIt предоставляет утилитный сниппет, называемый FormItIsSelected, который может использоваться в качестве Output Filter для обработки selected="selected" части опции.
Пример: <select name="color"> <option value="blue" >Blue</option> <option value="red" >Red</option> <option value="green" >Green</option> <!-- This would also work --> <option value="yellow" >Yellow</option> </select>
Таким образом будет автоматически обрабатываться «selected» часть поля опции, которая проходит валидацию и обработку ошибок.
Обработка флажков и радио
Обработка флажков и радио очень похожа на обработку селектов, с той лишь разницей, как Вы проводите для них валидацию «required». FormIt предоставляет помощь OutputFilter для FormItIsChecked (похожую на FormItIsSelected) для обработки персистентности значения.
В этом примере показана обработка флажков, персистируя их значения:<label>Color: </label> <input type="checkbox" name="color[]" value="blue" > Blue <input type="checkbox" name="color[]" value="red" > Red <input type="checkbox" name="color[]" value="green" > Green
Зпомните, что [] удаляется при установке плейсхолдера «fi.error.color».
Обработка Required в Checkboxes (по флажкам)
Так как HTML не отправляет значение, если флажок не установлен, обработка валидации «required» по флажкам может быть сложнее. Вам нужно будет добавить поле «hidden» перед, так что, по крайней мере, отправляется пустое значение:
... <label>Color: </label> <input type="hidden" name="color[]" value="" /> <input type="checkbox" name="color[]" value="blue" > Blue <input type="checkbox" name="color[]" value="red" > Red <input type="checkbox" name="color[]" value="green" > Green
Таким образом проводится успешная проверка, что, по крайней мере, один флажок был выбран при отправке формы.
www.modx.cc
