Для создания формы обратной связи используем расширения FormIt, ReCaptchaV2, AjaxForm. Также подразумевается, что используется Bootstrap 5 и JQuery 3. Данные формы будут отправляться при помощи AJAX.
Сперва устанавливаем указанные расширения через Установщик Пакетов. Вторым шагом идет регистрация сайта и получение ключей для reCaptcha v.2. Для этого переходим в консоль reCaptcha и регистрируем сайт для версии v.2, там же получаем ключ сайта (публичный) и секретный ключ (приватный). Ключи прописываются в системных настройках:
recaptchav2.secret_key
recaptchav2.site_key
На сайте возможно размещение формы обратной связи на нескольких страницах, поэтому сам вызов формы оформляем в виде чанка.
Для примера, пусть данный чанк будет называться FeebackChunk, а содержимое заполним следующим:
[ [AjaxForm?
&form=`FeedbackForm`
&formSelector=`feedback-form`
&emailTpl=`EmailFeedbackChunk`
&emailTo=`to@mymail.com`
&emailFrom=`from@mymail.com`
&emailSubject=`Сообщение с сайта https://mysite.com`
&hooks=`recaptchav2,email,FormItSaveForm`
&successMessage=`Сообщение отправлено успешно`
&validationErrorMessage=`В форме содержатся ошибки!`
&submitVar=`feedback-form`
&validate=`nospam:blank,
name:minLength=^2^,
email:email:required,
message:required:minLength=^10^,
g-recaptcha-response:required`
]]
Далее, создаем чанк FeedbackForm следующего содержания:
<style>
.form-label {
margin-bottom: 0rem;
color: #0072BC;
}
.invalid-feedback {
position: inherit;
font-size: 0.7rem;
margin-bottom: 4px;
}
span.error {
width: auto;
color: #f93154;
font-size: 0.7rem;
margin-bottom: 4px;
}
</style>
<form action="#" method="post" class="feedback-form">
<input type="hidden" name="nospam" id="nospam">
<input type="hidden" name="page" id="page" value="[ [*pagetitle]]">
<div class="mb-1">
<label for="name" class="form-label">ФИО</label>
<input type="text" class="form-control" name="name" id="name">
<div class="invalid-feedback"></div>
</div>
<div class="mb-1">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" name="email" id="email">
<div class="invalid-feedback"></div>
</div>
<div class="mb-1">
<label for="phone" class="form-label">Телефон</label>
<input type="text" class="form-control" name="phone" id="phone">
<div class="invalid-feedback"></div>
</div>
<div class="mb-3">
<label for="message" class="form-label">Сообщение</label>
<textarea class="form-control" name="message" id="message" rows="3"></textarea>
<div class="invalid-feedback"></div>
</div>
<div class="mb-3">
[ [!recaptchav2_render]]
[ [!+fi.error.recaptchav2_error]]
<span class="error_g-recaptcha-response"></span>
</div>
<div class="mb-3">
<input type="submit" class="btn btn-primary" name="feedback-form" value="Отправить">
</div>
</form>
В самом низу страницы, после подключения скрипта JQuery следует разместить код:
$(document).on('af_complete', function(event, response) {
const elForm = $(response.form);
elForm.find('.is-invalid').each(function(index, el) {
$(el).removeClass('is-invalid');
});
for (let key in response.data) {
const elInput = elForm.find(`[name=${key}]`);
elInput.addClass('is-invalid');
elInput.next('.invalid-feedback').text($(response.data[key]).text());
}
});
Следующий шаг - создание формы письма. Для этого создаем чанк EmailFeedbackChunk следующего содержания:
<style>
* {
font-family: Tahoma, Arial, sans serif;
}
span {
color: red;
}
p {
font-size: 14px;
}
td {
padding: 3px;
font-size: 14px;
}
</style>
<h1>Сообщение с сайта <span>https://mysite.com</span></h1>
<hr>
<table border="0">
<tr><td width="1%" align="right"><b>Отправитель</b> : </td><td>[ [+name]]</td></tr>
<tr><td width="1%" align="right"><b>E-Mail</b> : </td><td>[ [+email]]</td></tr>
<tr><td width="1%" align="right"><b>Телефон</b> : </td><td>[ [+phone]]</td></tr>
<tr> <td width="1%" align="right"><b>Со страницы</b> : </td><td>[ [+page]]</td></tr>
</table>
<hr>
<p>[ [+message]]</p>
И самый последний шаг - внесение правок в код в файле /core/components/formit/src/FormIt/Request.php, строка 82:
// if ($this->formit->hasHook('recaptcha')) { // <--- это заменяем строкой ниже
if ($this->formit->hasHook('recaptcha') && !($this->formit->hasHook('recaptchav2'))) {
Полезные ссылки: