Formit modx revo: Создание контактных форм на MODX при помощи Formit + AjaxForm – MODX — Форма обратной связи (FormIt)

Leave a Comment / Разное / By /

Содержание

Создание контактных форм на MODX при помощи Formit + AjaxForm

Автор Алексей На чтение 5 мин. Опубликовано

Последнее изменение поста: 21 октября 2018 в 17:37

Практически на всех коммерческих сайтах есть страница контакты, на которой расположена контактная форма, через которую пользователи могут написать администрации сайта. Сегодня мы рассмотрим как по быстрому создать контактную форму. Реализовывать форму обратной связи мы будем при помощи пакета Formit в связке с пакетом AjaxForm, установите их если они у вас не установлены.

Создание формы обратной связи на MODX Revo с разрешением на обработку персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006.

Первым делом создаем чанк, в котором будет хранится сама форма, пусть это будет чанк «kontact-form» и помещаем в него код стандартной формы, я в основном делаю сайты с использованием bootstrap, так что возьму стандартную заготовку немного переделанную, ее статический код будет таким:

<form method="post">
<div>
	<i></i>
	<input type="text" name="name" required="" placeholder="Ваше имя*" value="">
</div>
<div>
	<i></i>
	<input type="text" name="email" required="" placeholder="Ваш email*" value="">
</div>
<div>
	<i></i>
	<input type="text" name="pfone" required="" placeholder="Ваш телефон*" value="">
</div>
<div>
	<textarea rows="3" name="message" required="" data-maxlength="200" data-info="textarea-words-info" placeholder="Сообщение*"></textarea>
	<i><!-- icon --></i>
</div>	
<div>
    <label>
      <input type="checkbox" required=""> Согласен на обработку персональных данных
      <span></span>
    </label>
</div>
<p>Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="#" rel="nofollow" target="_blank">Пользовательского соглашения</a></p>					
<button type="submit">Отправить</button>
</form>

А выглядит она так.

форма обратной связи на MODX Revo с разрешением на обработку персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006.

Ваш внешний вид будет отличаться, так как моя форма стилизована под проект, css стили выкладывать не вижу смысла.

Вот здесь вы можете посмотреть другие формы getbootstrap.com/css/#forms

А теперь переделаем код в динамический с учетом синтаксиса Formit и AjaxForm, получим следующее.

<form method="post">
<div>
	<i></i>
	<input type="text" name="name" required="" placeholder="Ваше имя*" value="[[+fi.name]]">
	<span>[[+fi.error.name]]</span>
</div>
<div>
	<i></i>
	<input type="text" name="email" required="" placeholder="Ваш email*" value="[[+fi.email]]">
	<span>[[+fi.error.email]]</span>
</div>
<div>
	<i></i>
	<input type="text" name="pfone" required="" placeholder="Ваш телефон*" value="[[+fi.pfone]]">
	<span>[[+fi.error.pfone]]</span>
</div>
<div>
	<textarea rows="4" name="message" required="" data-maxlength="200" data-info="textarea-words-info" placeholder="Сообщение*"></textarea>
	<i><!-- icon --></i>
	<span>[[+fi.error.message]]</span>
</div>
<div>
    <label>
      <input type="checkbox" required=""> Согласен на обработку персональных данных<br/>
      <span>[[+fi.error.opd]]</span>
    </label>
</div>
<p>Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="[[~21]]" rel="nofollow" target="_blank">Пользовательского соглашения</a></p>
<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>

Не забудьте поменять ссылку на страницу с пользовательским соглашением (href=»[[~21]]»)

Теперь создаем еще один чанк, который будет формировать письмо, назовем его tpl-kontact-form со следующим содержимым:

<p>Имя: [[+name]]</p>
<p>Email: [[+email]]</p>
<p>Телефон: [[+pfone]]</p>
<p>Сообщение: [[+message]]</p>

Ну и сталось сделать вывод в нужном месте:

[[!AjaxForm?
    &snippet=`FormIt`
    &form=`kontact-form`
    &emailTpl=`tpl-kontact-form`
    &hooks=`spam,email`
    &emailSubject=`Сообщение с сайта [[++site_url]]`
    &emailTo=`[email protected]`
    &validate=`name:required,email:required`
    &validationErrorMessage=`В форме содержатся ошибки!`
    &successMessage=`Сообщение успешно отправлено!`
]]

Не забудьте поменять значение emailTo на свою почту.

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

  1. FormIt — docs.modx.com/extras/revo/formit
  2. AjaxForm — docs.modx.pro/components/ajaxform

Вот в принципе и все!

MODX — Форма обратной связи (FormIt)

Урок, на котором рассмотрим создание формы обратной связи в CMF MODX Revolution, используя компоненты AjaxForm и FormIt.

Назначение компонентов FormIt и AjaxForm

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

Но для того чтобы работать с

FormIt через AJAX необходимо использовать дополнительный компонент AjaxForm.

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

Перед тем как перейти к разработке формы обратной связи в MODX Revolution, рассмотрим основной алгоритм её работы.

MODX — Схема работы формы обратной связиMODX - Схема работы формы обратной связи

После открытия некоторой страницы с формой (она берётся из чанка, указанного в параметре &form вызова сниппета AjaxForm при формировании страницы на сервере), пользователь переходит к её заполнению. Завершив заполнение, пользователь нажимает на кнопку «Отправить» и компонент AjaxForm (код JavaScript) отправляет её на сервер посредством AJAX. На сервере данный компонент запускает сниппет FormIt и передаёт ему данные формы. Обработав эти данные, сниппет

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

Создание формы обратной связи

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

  1. Установить компоненты FormIt (из репозитория modx.com) и AjaxForm (из репозитория modstore.pro).
  2. Создать HTML форму в чанке (пример формы можно взять из чанка tpl.AjaxForm.example).
  3. Создать ресурс, в котором будет выводиться форма и шаблон. Подключить данный шаблон к ресурсу.
    MODX — Шаблон для ресурса Форма обратной связиMODX - Шаблон для ресурса Форма обратной связи
    MODX — Ресурс Форма обратной связиMODX - Ресурс Форма обратной связи
  4. Добавить в созданный шаблон вызов сниппета AjaxForm и параметры, необходимые для его работы.

Рассмотрим шаги 2 и 4 более подробно.

Создание HTML формы в чанке

Создание HTML формы обратной связи можно осуществить посредством копирования заготовки tpl.AjaxForm.example. Например, присвоим скопированному чанку имя tpl.AjaxForm. Этот чанк, уже содержит готовую HTML-форму, состоящую из 3 полей: Имя, E-mail и Сообщение. Основные действия, которые надо производить с формой в основном будут сводиться к добавлению новых категорий или к удалению существующих. Под категорией будем понимать группу связанных между собой элементов: метка (

label), элемент формы (input, select, textarea) и элемент span (используется для отображения ошибки валидации).

MODX — Чанк, содержащий HTML код формы обратной связиMODX - Чанк, содержащий HTML код формы обратной связи

Основные моменты:

  • Текст метки (элемента label). Обычно берётся либо из словаря (для многоязычных сайтов) или указывается непосредственно с помощью текста.
  • Элемент span, должен иметь атрибут class со значением error_name, в котором фразу name необходимо изменить на значение атрибута name элемента формы, вслед за которым он расположен.

Внимание: использование плейсхолдера

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

Например, добавим в HTML форму поле для ввода телефонного номера:


<div>
  <label for="af_phone">Телефон:</label>
  <div>
    <input type="text" name="phone" value="" placeholder="">
    <span></span>
  </div>
</div>

В итоге данный чанк будет содержать следующий HTML-код:


<form action="" method="post">
  <div>
    <label for="af_name">Имя*</label>
    <div>
      <input type="text" name="name" value="" placeholder="Введите имя">
      <span></span>
    </div>
  </div>
  <div>
    <label for="af_email">E-mail*</label>
    <div>
      <input type="email" name="email" value="" placeholder="Введите email">
      <span></span>
    </div>
  </div>
  <div>
    <label for="af_phone">Телефон</label>
    <div>
       <input type="text" name="phone" value="" placeholder="Введите номер телефона">
      <span></span>
    </div>
  </div>
  <div>
    <label for="af_message">Сообщение*</label>
    <div>
      <textarea name="message" rows="5"></textarea>
      <span></span>
    </div>
  </div>
  <div>
    <div>
      <button type="reset">Очистить</button>
      <button type="submit">Отправить</button>
    </div>
  </div>
</form>

Создание кода, содержащего вызов сниппета AjaxForm

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


[[!AjaxForm? 
  &form=`tpl.AjaxForm` 
  &snippet=`FormIt` 
  &hooks=`FormItSaveForm,email`
  &emailSubject=`Тестовое сообщение`
  &emailTo=`[email protected]`
  &emailFrom=`[email protected]`
  &emailTpl=`tpl.email`
  &validate=`name:minLength=^2^,email:email:required,message:minLength=^10^`
  &validationErrorMessage=`В форме содержатся ошибки!`
  &successMessage=`Сообщение успешно отправлено`
]]

Разберём основные параметры:

  • &form – отвечает за чанк, содержащий форму (tpl.AjaxForm).
  • &snippet — сниппет, обрабатывающий форму (FormIt).
  • &hooks – хуки, которые будет выполнять сниппет FormIt после успешной проверки формы (1 — FormItSaveForm, 2 — email). Хуки — это скрипты, которые запускаются после того когда форма прошла валидацию (проверку). Они указываются через запятую и запускаются последовательно один за другим. Если в одном из них произошла ошибка, то остальные не запускаются. В этом уроке будем использовать 2 хука. Хук FormItSaveForm предназначен для сохранения формы в базе данных. Хук email предназначен для отправки данных формы на почту.
  • &emailSubject, &emailTo, &emailFrom, &emailTpl – параметры, значения которых использует хук email. Они предназначены для указания темы письма (&emailSubject), адреса отправки (&emailTo), заголовка From (&emailFrom), шаблона письма (&emailTpl).
  • &validate – параметр, на основании значения которого осуществляется валидация формы. Значения параметра представляет собой список элементов, разделённых между собой запятыми. Каждый элемент состоит из имени элемента формы (который нужно проверить) и правила (требования к нему), разделённые между собой с помощью знака двоеточия. Например, валидатор name:minLength=^2^ проверяет, чтобы поле name содержало не меньше 2 символов. Валидатор email:email:required проверяет, чтобы поле mail содержало адрес электронной почты. С основными правилами создания валидаторов можно познакомиться на странице «FormIt Validators».
  • &validationErrorMessage — содержит сообщение, которое будет выводиться, если в форме содержатся ошибки.
  • &successMessage — сообщение, которое увидит пользователь, если сообщение будет успешно отправлено.

Осталось только создать чанк tpl.email, который будет содержать шаблон письма.


<h4>Сообщение</h4>
<p>От кого: [[+name]]</p>
<p>E-mail: [[+email]]</p>
<p>Телефон: [[+phone]]</p>
<p>Сообщение: [[+message]]</p>
MODX — Чанк tpl.emailMODX - Чанк tpl.email

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

Демонстрация работы формы обратной связи

Основные моменты при работе с формой обратной связи на странице продемонстрируем с помощью следующих изображений.

MODX — Незаполненная форма обратной связиMODX - Незаполненная форма обратной связи
MODX — Форма обратной связи, не прошедшая валидациюФорма обратной связи, не прошедшая валидацию
Сообщение, об успешной отправке формыСообщение, об успешной отправке формы
Просмотр заполненной формы в панели управления MODXПросмотр заполненной формы в панели управления MODX
Письмо, пришедшее на почтовый ящикПисьмо, пришедшее на почтовый ящик

Урок 9. Создание контакт-формы с помощью FormIt MODX

Итак сегодня мы начинаем наш 9 урок MODX Revolution для новичков. Сегодня мы рассмотрим как создать простую контакт форму на нашем вебсайте используя сниппет FormIt. В предыдущем уроке мы ознакомились с работой Wayfinder. Научились делать вывод динамического меню с этим сниппетом. Сегодня опираясь на некоторые ваши знания о сниппетах попытаемся разобраться со сниппетом FormIt, урок будет довольно-таки длинным, поэтому сразу настраиваемся на интересную и плодотворную работу.

Что такое FormIt?

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

Почему использовать именно FormIt?

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

Загрузка и установка FormIt

Знакомый нам по предыдущим урокам процесс, здесь я не буду останавливатся. Думаю у вас прекрасно пройдет установка и без объяснений.

Подготовка шаблона

Я надеюсь, что сейчас вы уже прошли предыдущие уроки и портировали шаблоны внутренних страниц в вашем MODX сайте. Если вы используете тот же шаблон что и я, то вы увидите, что страница контактов является php страницой с PHP скриптами. Если вы использовали этот шаблон для построения статического сайта, то это будет как раз кстати, так как вы будете использовать для построения вашей формы существующий PHP код. В то же время, так как мы портируем наш шаблон в MODX, то нам не нужен этот код PHP, так как сам MODX разберется с построением всех наших форм. Всё, что нам нужно, – это HTML код формы и затем мы используем FormIt, который сделает всю остальную работу.

Посмотрите на статическую страницу контактов, которая идет вместе с нашим шаблоном:

Форма контакта

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

Первое, что необходимо сделать – это убрать HTML/CSS код и портировать его в MODX, если вы это уже не сделали. Так как моя контакт страница – это на самом деле PHP скрипт, то я просто открыл эту страницу в браузере и посмотрел исходный код. Это позволило мне увидеть простой выводимый HTML без кода PHP. Далее я скопировал данный код и вставил его в MODX для формирования шаблона моей страницы контактов. Дальше я по обычной схеме использовал несколько чанков для упрощения работы, то как мы уже делали на предыдущих уроках. И вот что у меня получилось:

Я сохранил этот шаблон под названием 7in1-contact и назначил его шаблоном страницы контактов.

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

Важной особенностью здесь является та, что я заменил текст Contact в h3 тегах чанком [[*pagetitle]], который всплывет в вашей памяти, если вы внимательно прошли мои уроки.

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

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

Приступим к нашей форме. Для начала я заменил HTML код для формы, который содержался между div тегами “contact-wrapper” и заменил его тегом [[*content]]. Это значит, что всё в основном поле контента появится в моей странице контактов на этом месте. Поэтому сейчас страница контактов будет иметь такой вид:

Форма контакта

Видно, что там где должна быть форма, сейчас находится текст, который я вставил в область контента страницы контактов при её создании. Как видно на странице этот текст заключён в светлобежевый контейнер.

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

Итак, чтобы FormIt заработал, вам необходимо разместить вызов сниппета и HTML код формы в месте контакт формы. Если вы используете eForm сниппет MODX Evolution, то вам необходимо создать tpl шаблон для вашей формы, а затем вызвать его в сниппете, но при использовании FormIt вам не нужно вызывать форму в сниппете, вместо этого вы размещаете форму после вызова сниппета.

Давайте взглянем на вызов сниппета. Документация FormIt официального сайта MODX содержит отличный пример формы контакта и мы модифицируем его и используем в нашем случае. Будет полезно почитать документацию по этой ссылке http://rtfm.modx.com/display/ADDON/FormIt

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

Первый необходимый хук, который посылает электронную почту – это email и он имеет несколько параметров задокументированных здесь (http://rtfm.modx.com/display/ADDON/FormIt.Hooks.email). Выберите нужные для создания формы контактов параметры. Давайте сформируем наш вызов сниппета:

Как видно мы использовали вызов сниппета с одним хуком – email, и определили для него три параметра &emailTpl, &emailSubjectи &emailTo. Убедитесь что параметру &emailTo вы присвоили ваш email адрес вместо показаного в примере [email protected].

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

Нам нужно немного изменить эту форму, чтобы FormIt мог ее обработать. Первое, что мы сделаем – это поменяем поменяем действие, чтобы оно указывало на текущую страницу, так как именно здесь находиться вызов сниппета FormIt. Мы делаем ссылку на текущую страницу используя синтаксис MODX Revo: [[~[[*id]]]]. Если вы посмотрите внимательно на этот вызов, то увидите то, что внутренний блок – это просто тег для ID поля: [[*id]] и внешняя часть – это тег для привязки url, например: [[~123]]

Во-вторых, поменяем форму вложив в соответвтвующие FormIt заполнители в значения атрибутов каждого элемента поля для замены статических битов.

Результат выглядит приблизительно так:

Быстрый способ это сделать можно сравнив вашу контактную форму с формой представленной в документации FormIt. Также вы можете начать с формы в документации и в ней просто поменять классы для соответсвия вашей форме.

Далее разместите вызов сделанного нами сниппета в области контента вашей страницы Contact, а далее вставьте ваш код формы после вызова сниппета. Область контента должна содержать:

После сохранения превью формы выглядит вот так:

Форма контакта

Отлично, форма выглядит в точности как оригинал. Но нам нужно протестировать её и посмотреть как MODX делает всю работу. Перед тестированием давайте создадим сообщениее, которое будет отправлено получателю с вебсайта. Этот чанк emailTpl мы обозначили в нашем FormIt вызове.

Мы используем заполнители для отправки необходимой информации из формы и мы ссылаемся на них, используя имена соответствующих полей. В моем случае я хочу знать все детали и контактную инфомацию введённую в форму. Поэтому я создал чанк sentEmailTpl и добавил к нему следующее:

Из того, что мы уже изучили вы можете догадаться что произойдет. Сниппет FormIt и парсер MODX возмёт значения из контакной формы и вставит их в заполнители в почте, которую я получу.

Теперь давайте протестируем нашу контактную форму. .

Тестирование FormIt формы

Проверим почту и увидим, что получено сообщение:

Отправленное через FormIt сообщение

Вы видите, что введенный текст в поле параметра тема сниппета FormIt оказалась строчкой нашей строчкой темы.

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

Содержание FormIt сообщения

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

Добавление проверки

Следующей вещью, которую вы заметите – это то, что форма имеет поля, которые нужно обозначить как «обязательные для заполения», такие как: имя, имейл и комментарий. Дополнительно имена должны быть длинной более чем две буквы. Мы добавляем проверку к нашей форме, используя свойство &validate (смотрите ссылку в конце записи). Существует несколько встроенных валидаторов и мы будем использовать их в нашем вызове. Отмечу, что валидаторы могут быть связанными, поэтому если вам нужно проверить несколько вещей в одном поле, например, имя обязательно к заполнению И оно должно быть больше двух букв, то вы связываете эти два валидатора вместе. Поэтому для поля имя, первым шагом будет проверка наличия имени:

Теперь добавим второй валидатор:

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

Замечание!
Маленькая поправочка Шон МакКормик (разработчик FormIt сниппета и один из разработчиков ядра MODX) только что научил меня кое-чему новому в разделе комментариев. Вместо использования двух обратных кавычек, вы можете использовать тильды ^ :

…то бишь с соединёнными валидаторами, которые передают параметры, вы можете сделать так:

Отлично, давайте продолжим и добавим проверку в наш вызов FormIt.

Теперь же, если какой-нибудь Вася Петров пытается послать сообщение и вместо своих имени и фамилии ставит инициалы, то форма выдаст ошибку:

Проверка формы

Для вывода ошибок вам необходимо воспользоваться чанком вывода ошибки работы спиппета FormIt:

[[!+fi.error.attibute_name]], где attribute_name – имя атрибута вашей контакт формы.

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

Возле каждого атрибута, который мы проверяем – подвергаем валидации.

Если вас интересует откуда появились данные сообщения, то они закрепленны в Lexicon за formit. Зайдите в System->LexiconManagement, и далее поменяйте в выпадающем списке “core” на “formit” и далее вы увидите эти сообщения. Там вы можете поменять их либо же добавить свои собственные.

Добавление своих сообщений в Лексикон

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

Борьба со спамом

Теперь мы знаем как работает наша форма и мы получаем сообщения и проверка поля работает. Осталось выяснить как же бороться с попытками ботов высылать спам через нашу форму. Сниппет FormIt имеет два встроенных способа решения данной проблемы. Одна – это spam хук и вторая – это reCaptcha хук.

Спам хук просто проверяет поля, которые вы настроили согластно спам фильтра через http://www.stopforumspam.com/. Если они совпадают, то тогда высвечиваетсчя ошибка напротив поля(ей) и сообщение просто не посылается. Больше вы сможете почитать об этом здесь: http://rtfm.modx.com/display/ADDON/FormIt.Hooks.spam. Мы будем использовать значения по умолчанию для спам хука, который будет проверять поле имейл адреса.

Таким образом в нашем параметре хуков в FormIt добавим спам хук:

Хук reCaptcha работает на базе the reCaptcha service для обеспечения поддержки вашей формы. Для использования reCaptcha вам вначале необходимо иметь бесплатный аккаунт на http://www.google.com/recaptcha. После создания аккаунта добавте домен вашего сайта и вам выдадут два ключа: частный ключ и публичный ключ. Вы можете использовать эти ключи на ваших доменнах либо субдоменнах. Если вы создаете глобальный ключ, то вы можете использовать его на множестве доменов.

Получение ключа каптчи

Теперь необходимо ввести эти два ключа в системных настройках для сниппета formit. Зайдите в System->System Settings, и в выпадающем списке вместо core выберите formit.

Ввод ключей Captcha для FormIt

Перед вами появятся три поля, одно для частного ключа, одно для публичного и одно задаст запрос о том, хотите ли вы использовать SSL. Введите ключи от reCaptcha в эти два поля:

Ввод ключей Captcha для FormIt

Отлично, теперь можно добавить рекапча хук к нашему вызову FormIt:

Замечание!
Порядок в котором размещены эти хуки очень важен. Как я уже говорил ранее, хуки выполняются последовательно и если один выдаёт ошибку, то остальные не выполняются. Поэтому крайне важно, чтобы спам хуки шли перед имейл хуками.

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

Теперь моя форма выглядит вот так:

Форма FormIt c Captcha хуком

Перенаправление на страницу успешного выполнения

Сейчас форма сделана так, что как только сообщение успешно послано, то пользователь переходит на пустую форму контакта. Мы можем это поменять так, что пользователь отсылается на страницу, которая показывает, что сообщение успешно отослано. Чтобы это сделать мы используем хук редиректа. Нам нужно определить на какую страницу должен быть перенаправлен пользователь и делаем это используя параметр redirectTo и добавляем что-то типа &redirectTo=`123`, где 123 это идентификатор ID страницы куда будет перенаправлятся пользователь. Я просто добавлю хук в конце списка хуков и добавлю параметр redirectTo:

После успешного выполнения формы, посетитель сайта будет отослан на страницу с ID of 10, которая является thank you странице (я создал ее и скрыл от меню).

Успешная отправка сообщения с помощью FormIt

Создание автоответчика

Последний хук о котором мы поговорим в даной записи – это хук автоответчика FormItAutoResponder hook, аон просто отсылает автоответ отсылателю комментария. Этот хук имеет несколько свойств (http://rtfm.modx.com/display/ADDON/FormIt.Hooks.FormItAutoResponder) но мы используем лишь некоторые из них в нашей форме. Вначале мы созданим шаблон содержащий имейл для обратной отсылки на имейл. Это единственное необходимое для заполнения поле. Я создал чанк с названием autoResponseTpl и добавил следующие строки:

Как вы видите я снова использовал заполнители так же, как и до этого в случае с sentEmailTpl. Теперь нужно добавть хук FormItAutoResponder и его свойства к вызову сниппета FormIt как показано ниже:

Как вы видите выше я добавил не только необходимые свойства, но и несколько доступных для заполнения. Важно отметить реквизит &fiarToField который я определил как contact_email. Это важно, потому что если вы не установите его по умолчанию в “email” но ваше поле почты может иметь другое имя, как в моём случае.

Я протестирую эту форму отсылая сообщение, используя один из моих имейл адресов. Когда я проверю этот адрес, я увижу, что получил автоответ от формы с темой, как я определил в реквизите &fiarSubject и отослал от имени указаном в реквизите&fiarFromName:

FormIt сообщение

Как вы видите по полученному письму – оно соответстует тому, что мы задали в нашем чанке автоответчика

Заключение

В этом уроке мы научились как использовать сниппет FormIt для обработки контакт формы в сайте MODX Revolution. Мы исследовали различные хуки и основы их использования. Теперь мы имеем функционирующую форму полностью под управлением MODX, но по внешнему виду совпадающей с нашим шаблоном. Еще много чего можно сделать с FormIt и мы будем более детально исследовать данный сниппет в следующих уроках.

Как домашнее задание – можете исследовать сниппет FormIt Retriever и узнайте, сможете ли вы интегрировать его в вашу контакт форму.

Дополнительные источники :

Все о компьютерах — Документация сниппета FormIt для MODx Revolution

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.  

MODX Revo — Продвинутая форма с вложениями при помощи Formit + AjaxForm

Автор Алексей На чтение 7 мин. Опубликовано

Я уже писал про создание контактных форм на MODX при помощи Formit + AjaxForm, как что особо в теорию вникать не буду, а по сути приведу готовое решение, которое вы с легкость сможете переделать под себя.

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

  1. FormIt — docs.modx.com/extras/revo/formit
  2. AjaxForm — docs.modx.pro/components/ajaxform

Устанавливаем эти 2 компонета, документация выше.

В рамках данного урока будем создавать вот такую форму.

Продвинутая форма с вложениями при помощи Formit + AjaxForm

По сути она достаточно простая. но ее особая особенность. это вложения.

И так. данная форма имеет, вот такой html код

<form method="post" action="" enctype="multipart/form-data">
 <fieldset>
  <div> 
   <div>  
    <div>
	<i></i>
	<input type="text" name="name" required="" placeholder="Ваше имя*" value="">
    </div>
   </div>
   <div> 
    <div>
	<i></i>
	<input type="text" name="email" required="" placeholder="Ваш email*" value="">
    </div>
   </div>
   <div> 
    <div>
	<i></i>
	<input type="text" name="pfone" required="" placeholder="Ваш телефон*" value="">
    </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></span>
  </div>
  <div>
  <div><span><i></i></span><input placeholder="Ваше задание, методичка и т.д.*" type="file" name="attachment" data-btn-text="Выберите файл" tabindex="-1"><input type="text"><span tabindex="-1"><button type="button">Выберите файл</button></span></div>
  </div>
</fieldset>
<button type="submit">Отправить</button>
</form>

По сути обычная немного модифицированная bootstrap 3 разметка.

Обязательный атрибут для использования вложений в MODX: enctype=»multipart/form-data»

Ну а теперь ближе к делу:

Создаем чанк, ну к к примеру form-uslugi и помещаем в него весть вышеприведенный код, далее модифицируем его под 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>

Далее создаем 2й чанк tpl-form-uslugi, со следующим содержимым

<p>Имя: [[+name]]</p>
<p>Email: [[+email]]</p>
<p>Телефон: [[+pfone]]</p>
<p>Тип работы: [[+department]]</p>
<p>Сообщение: [[+message]]</p>
<p>Файл: [[+attachment]]</p>

Ну и остается лишь только вызвать эту форму в нужном месте.

[[!AjaxForm?
&snippet=`FormIt`
&form=`form-uslugi`
&emailTpl=`tpl-form-uslugi`
&hooks=`spam,email`
&emailSubject=`Сообщение с сайта [[++site_url]]`
&emailTo=`[email protected]`
&validate=`name:required,email:required`
&validationErrorMessage=`В форме содержатся ошибки!`
&successMessage=`Сообщение успешно отправлено!`
]]

Ну и проверяем работоспособность

проверяем работоспособность форм

Все отлично работает)

 

Проcтая форма обратной связи на MODx Revolution + FormIt

Cоздать форму обратной связи на сайте с использованием системы управления MODx Revolution и дополнения FormIt следует:

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



<h3>Форма обратной связи</h3>

[[!FormIt?
   &hooks=`spam,email,redirect`
   &emailTpl=`email_tpl`
   &emailTo=`[email protected]`
   &emailSubject=`Письмо с сайта [[++site_url]]`
   &redirectTo=`25`
   &validate=`name:required,email:email:required,text:required:stripTags,phone:required`
]]
 
[[!+fi.error_message:notempty=`<p>[[!+fi.error_message]]</p>`]]
 
<form action="[[~[[*id]]]]" method="post">

    <input type="hidden" name="nospam:blank" value="" />
 
    <label for="name">Ваше имя <span>*</span>:</label>
    <span>[[!+fi.error.name]]</span>
    <input type="text" name="name" value="[[!+fi.name]]" />

    <label for="email">Телефон <span>*</span>:</label>
    <span>[[!+fi.error.phone]]</span>
    <input type="text" name="phone" value="[[!+fi.phone]]" />
 
    <label for="email">Email <span>*</span>:</label>
    <span>[[!+fi.error.email]]</span>
    <input type="text" name="email" value="[[!+fi.email]]" />
  
    <label for="text">Сообщение <span>*</span>:</label>
    <span>[[!+fi.error.text]]</span>
    <textarea name="text" cols="55" rows="7" value="[[!+fi.text]]">[[!+fi.text]]</textarea>
          
    <input type="submit" value="Отправить" />
    
</form>

Создать ещё один ресурс, куда будет происходить редирект после успешной отправки формы. Не забываем изменить значение параметра &redirectTo=`25` в месте вызова сниппета FormIt (код выше), куда следует передать корректный ID ресурса. В содержимое ресурса можно написать всё что угодно, например: 



<p>Благодарим за обращение!</p>

Осталось создать шаблон, который будет будет выводить информацию в письмо, тоесть нужно создать чанк с названием email_tpl, который передаёться в качестве параметра &emailTpl=`email_tpl` во время вызова сниппета FormIt: 



<p>От кого: [[+name]]</p>
<p>Телефон: [[+phone]]</p>
<p>E-mail: [[+email]]</p>
<p>Сообщение: [[+text]]</p>

Можно добавить несколько правил CSS чтобы наша форма приобрела более привлекательный вид. 



input, label, textarea{
    display: block;
}
input, textarea{
    margin: 0 0 10px 0;
    border: 1px solid #ccc;
    padding: 5px;
}
input.submit_button{
    background-color: #43A52B;
    border: 1px solid #358222;
    padding: 5px 10px;
    border-radius: 3px;
    font: 13px Arial, Verdana, Tahoma, sans-serif;
    color: #fff;
    cursor: pointer;
}
input.submit_button:hover{
    background-color: #358222;
}
span.required,
span.error{
   color: #ff0000;
}
span.required{
    font-size: 18px;
}
span.error{
    font-size: 11px;
}
Голосов: 801 | Просмотров: 7407

FormIt MODX Revolution для создания форм

FormIt— что это такое?

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

 

История

FormIt написал Шоном Маккормиком (Shaun McCormick) как форму обработки Extra, первый официальный релиз состоялся 19 октября 2009 года.

 

MODX Formit рекомендации по использованию

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

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

Formit доступные свойства

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

 

Имя

Описание

Значение по умолчанию

1

hooks

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

 

 

2

preHooks

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

 

3

submitVar

Если задано, обработка формы не начнется, если POST-переменная не пройдена. Обратите внимание: требуется, если Вы используете &store property (+ задано submit var in input=»submit»!).

 

4

validate

Разделенный запятыми список полей для проверки, где каждое имя поля имеет вид name:validator  (например, username:required,email:required). Валидаторы также могут быть сцеплены, как email:email:required. Это свойство может присваиваться нескольким строкам.

 

5

validationErrorMessage

Общее сообщение об ошибке, устанавливается в плейсхолдер, если валидация не пройдена. Может содержать , если Вы хотите отобразить список всех ошибок в верхней части.

<p>A form validation error occurred. Please check the values you have entered.</p>

6

validationErrorBulkTpl

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

<li></li>

7

errTpl

HTML враппер ( wrapper) для сообщений об ошибках. Примечание: не чанк, а только HTML.

 

<span></span>

8

customValidators

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

 

9

clearFieldsOnSuccess

Если true, очищает поля по успешному подтверджению форм без редиректа.

1

10

store

Если true, будет хранить данные в кэше для выборочного использования сниппетом FormItRetriever.

0

11

storeTime

Если для ‘store’ установлено true, определяет количество секунд для сохранения данных из подачи формы. По умолчанию пять минут.

300

12

placeholderPrefix

Префикс, используемый для всех плейсхолдеров, установленных FormIt для полей.

fi.

13

successMessage

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

 

14

successMessagePlaceholder

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

fi.successMessage

15

redirectTo

ID страницы «Thank You», куда посетитель может быть отправлен после успешного подтверждения подачи формы, но этот параметр показывается, только если Вы включите «redirect» в list of &hooks.

 

 

Проверка

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

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

Хуки

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

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

Хуки Form

Валидация Formit

FormItRetriever

Учебные пособия и примеры

FormItCountryOptions

FormItStateOptions

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *