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

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

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

2. Создаём шаблон контактов. Вкладка Элементы → категория Шаблоны → щёлкните правой кнопкой мыши и в контекстном меню выберите Новый шаблон.

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

Имя*: Contacts;
Описание: Контакты;

Код шаблона (html):

Здесь в шаблон страницы необходимо вставить код Ajax

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

ваша@почта.ru замените на свой почтовый ящик

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

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

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

Имя*: сontact-form;

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

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

Где [[~20]] страница с пользовательским соглашением

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

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

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

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

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

С сайта имя_вашего_сайта отправлено сообщение с помощью формы обратной связи:
<br/>
<br/>
Имя: [[+name]]
<br/>
Email: [[+email]]
<br/>
Телефон: [[+phone]]
<br/>
<br/>
[[+message]]

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