Форма обратной связи

Форма на странице контактов — та самая, о которой идёт речь. Дальше разберём её по частям: из чего собрано поле, кто проверяет введённое и что нужно дописать, чтобы письмо действительно уходило.

Зачем форма, если есть почта

Адрес, написанный на странице, за неделю собирают роботы, и дальше на него идёт спам. Форма адрес не показывает: он лежит в настройках сайта, а посетитель просто пишет сообщение.

Второе: форма задаёт вопросы. Свободное письмо часто приходит без имени и без обратного адреса, а поля заставляют указать и то, и другое.

Поле — это не только input

Минимальный набор для одного поля — четыре части: подпись, само поле, при необходимости подсказка и место под сообщение об ошибке. Подпись обязана быть отдельным тегом <label>, связанным с полем: тогда щелчок по подписи ставит курсор в поле, а программа чтения экрана называет поле по имени.

<div class="field">
  <label class="field__label" for="email">Почта</label>

  <input class="field__input" id="email" name="email" type="email"
         required autocomplete="email"
         aria-describedby="email-hint"
         data-msg-required="Без адреса я не смогу ответить"
         data-msg-type="Похоже, в адресе опечатка: нужен знак @">

  <p class="field__hint" id="email-hint">На него придёт ответ</p>
  <p class="field__error" hidden></p>
</div>

Тексты ошибок лежат прямо в атрибутах поля — data-msg-required и остальные. Так они правятся вместе с полем, а не в скрипте: добавили поле — написали рядом, что сказать, если его не заполнят.

Кто проверяет: браузер, скрипт и сервер

Проверок всегда три, и заменять одну другой нельзя.

Отсюда важная мелочь: атрибут novalidate, который отключает проверку браузера, ставит скрипт, а не разметка. Пока скрипт не отработал, форму проверяет браузер — и без JavaScript она остаётся рабочей.

Когда показывать ошибку

Не раньше первой попытки отправить. Красная рамка на поле, в котором человек ещё набирает адрес, — это придирка к незаконченному действию. После неудачной отправки правила меняются: теперь поле перепроверяется на каждое изменение, чтобы подсказка исчезла сразу, как только ошибка исправлена.

Ещё две вещи делает скрипт при неудачной отправке: связывает сообщение с полем через aria-describedby, ставит aria-invalid и переводит фокус на первое неверное поле. Без последнего человек с программой чтения экрана останется у кнопки и просто не узнает, что где-то выше есть ошибка.

Что попросить у нейросети

Отправка письма в Evolution CMS

Вся разметка выше писем не отправляет: HTML умеет только собрать данные и передать их туда, где работает программа на сервере. В Evolution такая программа — сниппет. В поставке 3.5.8 его нет, и отсюда развилка: поставить готовый или написать свой.

Готовый: поставить из каталога

В админке есть модуль Extras — каталог расширений на 171 пакет: нашли, нажали «Установить», настроили параметрами и чанками. С формами там вот что: eForm (22 тысячи установок), FormLister и easyForm помечены «устаревшие» — их писали под прошлые ветки движка. Из свежего есть sMailer, но это не форма, а служба отправки писем: принять поля и проверить их всё равно придётся самому. Так что выбор не «готовое против своего», а «устаревшее готовое против ста своих строк».

Свой: сто строк и метод ядра

Этот сайт пошёл вторым путём: всё сложное уже есть в ядре. Метод getMail() отдаёт готовый почтовый объект, настроенный по разделу «Почта» в конфигурации сайта, — сам соединяется с сервером и кодирует русские буквы в теме. Остаётся проверить поля и попросить его отправить.

  

  
  

    Это поле оставьте пустым
    
  

  

    Как вас зовут
    
    
  

  

    Адрес почты
    
    

      Нужен только для ответа. Никаких рассылок.
    
    
  

  

    Сообщение
    
    
  

  

    
    
      Соглашаюсь, что имя и адрес почты нужны только для ответа
      на это сообщение.
    
    
  

  

    
      
      Отправить
    
  

  
  

Чанк chunk-contact-form — та же вёрстка формы, что в прототипе, плюс места для введённых значений, сообщений у полей и строки результата. Адрес получателя берётся из настройки сайта emailsender: в разметку страницы он не попадает, и роботы его не увидят.

Что обязан делать обработчик

Код сниппета открыт, и это не делает сайт уязвимым: защита обязана держаться на самом коде, а не на том, что его не видно. Прятать нужно только данные — пароль от почты и адрес получателя. Вот что в нём есть и зачем.

Частые ошибки