Доброго времени суток, дорогой читатель! В этой статье я хотел бы поделиться с Вами опытом в создании формы обратной связи на сайте, используя модальное окно Twitter Bootstrap и HTML5. Для обработки формы я буду использовать сниппет MODx Revolution — FormIt.

Подготовка

Устанавливаем дополнение FomIt и Bootstrap для MODx Revolution. Теперь создадим чанк с текстом письма, которое будет отправляться как уведомление на почту. Назовем его emailChunk , сохраним его в категории FormIt, чтобы потом было легко его найти, и вставим простой HTML код:

<strong>[[+name]] заказал обратный звонок на сайте:</strong><br />
<p>Пользователь оставил свой номер телефона [[+phone]] для связи с ним.</p>

Последним шагом подготовки будет создание страницы (Вы можете перенаправить пользователя на любую существующую страницу, к примеру на главную), на которую будет перенаправляться пользователь в случае правильного заполнения полей. В содержимое ресурса внесите текст с оповещением пользователя (например, Мы скоро перезвоним Вам!). В конце статьи и покажу пример вызова сниппета без перенаправления.

Создание модального окна и кнопки Twitter Bootstrap

В тело страницы вставляем HTML код кнопки, при нажатии на которую будет выходить модальное окно Twitter Bootstrap:

<button type="button" class="btn shk-but" data-toggle="modal" data-target="#phoneModal" data-whatever="">Заказать звонок</button>

и HTML код модального окна, которое включено в форму:

 <form action="[[~[[*id]]]]" method="post" enctype="multipart/form-data" role="form">
<div class="modal fade" id="phoneModal" tabindex="-1" role="dialog" aria-labelledby="phoneModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Закрыть</span></button>
<h4 class="modal-title" id="phoneModalLabel">Заказать звонок</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="hint"><label for="name">Имя [[!+fi.error.name]]</label></div>
<input type="text" class="form-control" name="name" id="name" value="[[!+fi.name]]" />
</div>
<div class="form-group">
<div class="hint"><label for="phone">Телефон [[!+fi.error.phone]]</label></div>
<input type="tel" name="phone" id="phone" class="form-control bfh-phone" data-format="+7 (ddd) ddd-dddd" value="[[!+fi.phone]]" pattern="(\+[\d\ \(\)\-]{16})" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn shk-but" data-dismiss="modal">Закрыть</button>
<input type="submit" class="btn shk-but" name="submit_button" id="submit_button" value="Заказать звонок">
</div>
</div>
</div>
</div>
</form>

В этом примере я использовал валидацию номера телефона с помощью Bootstrap Formhelpers Phone (подробнее):

  • type="tel" —  указывает хелперу с каким полем работать;
  • data-format="+7 (ddd) ddd-dddd" — здесь указываем формат и правило заполнения номера;
  • pattern="(\+[\d\ \(\)\-]{16})"—  здесь происходит проверка правила.

В каждом текстовом поле можно указать свойство required. Браузер, использующий HTML5, оповестит пользователя о необходимости заполнить это поле.

<input type="text" class="form-control" name="name" id="name" value="" required />

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

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

Итак, после всех приготовлений, мы дошли до сути статьи. Берем код вызова сниппета и вставляем (Обязательно!) его выше формы:

[[!FormIt? &hooks=`email,redirect` &submitVar=`submit_button` &emailSubject=`Заказ обратного звонка на сайте` &emailTpl=`emailChunk` &emailTo=`your_mail@domain.ru` &redirectTo=`1` &validate=`name:required,phone:required`]]

 А теперь все по порядку:

  • &hooks=`email,redirect` — здесь подключаются хуки сниппета. В нашем случае хук "email" отправляет письмо, хук "redirect" перенаправляет на другую страницу. Они начинают свою работу только после успешной обработки формы, т.е. не вывелась ни одна ошибка.
  • &submitVar=`submit_button` — в нашем случае это свойство не обязательно. Но обязательно, когда вы будете использовать несколько форм на одной странице.
  • &emailSubject=`Заказ обратного звонка на сайте — заголовок письма.
  • &emailTpl=`emailChunk` — текст письма. Чанк, который мы создали ранее.
  • &emailTo=`your_mail@domain.ru` — электронный почтовый ящик, куда будет отправлять хук "email" все письма с этой формы.
  • &redirectTo=`1` — ID документа (страницы), куда будет перенаправлять хук "redirect".
  • &validate=`name:required,phone:required` — валидация (проверка) заполнения полей name и phone.

Проверочный код (captcha)

Если вам понадобится ввод проверочного кода, то здесь поможет recaptcha от Google. Заходим, регистрируемся, вводим доменное имя и получаем публичный и секретный ключи.

Заходим в настройки системы, в фильтре выбираем "formit" и в поле formit.recaptcha_private_key вставляем секретный ключ, а в поле formit.recaptcha_public_key — публичный ключ.

После идем к вызову сниппета и добавляем через запятую хук "recaptcha" в лист &hooks=`email,redirect,recaptcha`.

Теперь подправим HTML код формы с модальным окном, в него нужно будет добавить вызов параметров сниппета:

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

Первый поместит область с проверочным кодом в тело окна, второй - выведет ошибки, если они будут.

Обработка формы без перенаправления

Если Вы хотите, чтобы пользователь оставался на этой же странице, удалите из списка хуков хук "redirect" и удалите свойство &redirectTo. В замен установите свойство &successMessage, в котором должен содержаться текст. В тело документа (страницы) поместите параметр [[!+fi.successMessage]]

На этом моя статья заканчивает, надеюсь она помогла Вам. До новых встреч!

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