Создание формы обратной связи :: Cетевой уголок Majestio

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


Для создания формы обратной связи используем расширения 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'))) {

Полезные ссылки:

Рейтинг: 5/5 - 1 голосов