MODX Revolution. Создание формы обратного звонка с разрешением на обработку персональных данных

Форма обратного звонка сегодня довольно популярна. Ни одни лендинг не обходится без неё, и всё чаще корпоративные сайты, бизнес-сайты, интернет магазины стали устанавливать такую форму. Реализовывать форму обратного звонка мы будем с помощью дополнений Formit и AjaxForm, используя Bootstrap, и в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006.

1. Устанавливаем пакеты Formit и AjaxForm.

2. Создадим саму форму обратного звонка. Вкладка Элементы → категория Чанки → AjaxForm щёлкните правой кнопкой мыши и в контекстном меню выберите Создать новый чанк здесь.

В открывшемся окне заполните поля:

Имя*: tpl.AjaxForm.callback-form;

Если используете bootstrap, то код формы может выглядеть так:

<form method="post">
 <div class="input_block">
  <input type="text" name="name" required="" class="form-control" placeholder="Имя*" value="[[+fi.name]]">
  <span class="error error_name">[[+fi.error.name]]</span>
 </div>
 <div class="input_block">
   <input type="text" class="form-control" id="phone" name="phone" required="" placeholder="Телефон*" value="[[+fi.phone]]">
   <span class="error error_name">[[+fi.error.phone]]</span>						    
 </div>
<div class="checkbox">
    <label>
      <input type="checkbox" required=""> Согласен на обработку персональных данных
      <span class="error error_name"></span>
    </label>
</div>
<p class="text-small">Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="[[~20]]" rel="nofollow" target="_blank">Пользовательского соглашения</a></p>
 <div class="input_btn">
  <input type="submit" value="Заказать обратный звонок">
 [[+fi.success:is=`1`:then=`<div class="alert alert-success">[[+fi.successMessage]]</div>`]]
 [[+fi.validation_error:is=`1`:then=`<div class="alert alert-error">[[+fi.validation_error_message]]</div>`]]
 </div>
</form>

3. Создаём чанк, который формирует письмо на отправку. Вкладка Элементы → раздел Чанки → категория Tpl → щёлкните правой кнопкой мыши и в контекстном меню выберите Создать новый чанк здесь

MODX Revolution. Создание формы обратного звонка с разрешением на обработку персональных данных

В открывшейся форме Новый чанк заполните поля:

Имя: callbackTpl;
Описание: Форма письма с сайта;

Код чанка (html):

Заявка на обратный звонок!
<br/>
<br/>
Имя: [[+name]]
<br/>
Телефон: [[+phone]]

4. В нужном месте шаблона выводим кнопку:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Заказать обратный звонок</button>

5. В конце страницы, ближе к закрытию тега </body> вставляем код:

<!--noindex-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div class="modal-dialog" role="document">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    <h4 class="text-center modal-title" id="modalboxLabel">Оставьте Ваши контакты:</h4>
   </div>
   <div class="modal-body">
    <div class="form form_container">
	[[!AjaxForm?
           &snippet=`FormIt`
           &form=`tpl.AjaxForm.callback-form`
           &emailTpl=`callbackTpl`
           &hooks=`spam,email`
           &emailSubject=`Заказ обратного звонка с сайта [[++site_url]]`
           &emailTo=`ваша@почта.ru`
           &validate=`name:required,phone:required`
           &validationErrorMessage=`В форме содержатся ошибки!`
           &successMessage=`Сообщение успешно отправлено!`
        ]]
   </div>
  </div>
 </div>
 </div>
</div>
<!--/noindex-->

Этот код также можно вставить в чанк. Вкладка Элементы → категория Чанки → Template щёлкните правой кнопкой мыши и в контекстном меню выберите Создать новый чанк здесь.

MODX Revolution. Создание формы обратного звонка с разрешением на обработку персональных данных