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

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

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

• Телефон — только если вы перезваниваете. Иначе это поле, которое заполняют неохотно и с ошибками.
• Компания — в B2B, где заявку маршрутизируют по сегменту.
• Тема обращения — когда обращения правда разъезжаются по разным людям. Список из трёх-четырёх понятных вариантов, без «Другое» первым пунктом.
• Файл — в поддержке и в работе с документами. Требует обработчика с multipart/form-data: в вебхук через fetch файл не уйдёт.

Телефон здесь проверяется по количеству цифр, а не маской. Маска выглядит аккуратно ровно до первого человека с зарубежным номером или добавочным: он не может ввести свой телефон и уходит.

Браузер умеет проверять поля сам, но его подсказки — системный пузырь, который исчезает по клику, не переводится под ваш текст и плохо дружит со скринридером. Поэтому в сгенерированном коде у формы стоит novalidate, а проверку делает скрипт.

Порядок, который не раздражает:

1. Во время первого ввода — молчим. Красный текст под полем, которое человек ещё заполняет, — это претензия на пустом месте.
2. При уходе из поля — проверяем. Поле потеряло фокус, значит, человек считает его заполненным.
3. На отправке — проверяем всё, показываем все ошибки сразу и переводим фокус на первое неверное поле.
4. Дальше — на каждый ввод: ошибка исчезает в тот момент, когда её исправили, а не после второй попытки отправить.

Текст ошибки говорит, что сделать: «Проверьте адрес: он должен быть вида имя@домен.ru» вместо «Некорректное значение». Проверка почты — одно простое правило «есть что-то, собака, домен с точкой»: формально верный адрес всё равно ничего не доказывает, а сложные регулярные выражения регулярно отбрасывают живые адреса.

Имя, телефон, почта и текст обращения — персональные данные. Их обработка по закону № 152-ФЗ «О персональных данных» требует согласия, и оно должно быть конкретным и осознанным: человек понимает, кому и зачем даёт данные.

На практике это значит вот что:

• Отдельный чекбокс, не отмеченный заранее. Галочка по умолчанию — не действие человека, а действие разработчика. Роскомнадзор и суды исходят из того, что согласие выражается активно.
• Назван оператор. «ООО „Ромашка“», а не «мы». Название должно совпадать с тем, что написано в политике.
• Названы данные и цель. «Персональных данных, указанных в этой форме, для ответа на обращение» — цель узкая. Согласие на ответ по обращению не даёт права на рассылку; для неё нужна отдельная галочка со своей формулировкой.
• Ссылка на политику. Политика обработки персональных данных должна быть опубликована и доступна — это отдельное требование статьи 18.1, независимо от формы.
• Упомянут отзыв. Право отозвать согласие есть по закону; строчка об этом снимает половину вопросов.

Отправку по-хорошему стоит блокировать до отметки — что и делает сгенерированный скрипт, с отдельным сообщением об ошибке. Кнопку при этом не блокируют: недоступная кнопка без объяснения выглядит как сломанный сайт.

Текст в генераторе — рабочая заготовка для обычной формы обратной связи, а не юридическое заключение. Если вы передаёте данные в CRM стороннего вендора, собираете данные детей или используете обращения для маркетинга, формулировку нужно править вместе с юристом.

1. Настоящий <label for> у каждого поля. Плейсхолдер вместо подписи исчезает при вводе, и человек забывает, что он заполняет; скринридер плейсхолдер может и не прочитать.
2. Ошибка связана с полем через aria-describedby: при переходе в поле озвучивается и подпись, и текст ошибки.
3. aria-invalid="true" ставится и снимается. Атрибут, повешенный навсегда, делает форму бесконечно ошибочной для скринридера.
4. Фокус виден. :focus-visible с отступом; outline: none без замены — самый частый способ сломать клавиатуру.
5. Результат отправки объявляется. Абзац с role="status" и aria-live="polite": иначе зрячий видит «Спасибо», а незрячий — тишину.
6. Проставлен autocomplete: name, email, tel, organization. Это и удобство, и критерий WCAG 1.3.5.

Проверить всё это можно за минуту: пройдите форму Tab'ом от начала до конца, не трогая мышь, и отправьте её пустой. Если фокус виден на каждом шаге, ошибки читаются и после отправки фокус попал в нужное поле — форма в порядке.

Цвета ошибок и кнопки должны проходить контраст: рамку поля с ошибкой видно только при 3:1 к фону, текст ошибки — при 4,5:1. Подобрать их можно в палитре интерфейса, а проверить отдельную пару — в проверке контраста.

Три варианта закрывают почти все случаи:

• Обычный POST на обработчик. Форма отправляется браузером, страница перезагружается ответом. Проще всего, работает без JavaScript. Обработчику нужно проверить данные ещё раз: клиентская валидация защищает от опечаток, а не от подделанного запроса.
• fetch в вебхук. Данные уходят JSON-ом, страница не перезагружается, ответ показывается под кнопкой. Подходит для вебхуков CRM, Telegram-ботов и бессерверных функций. Учтите CORS: принимающая сторона должна разрешить запрос с вашего домена.
• Почтовый сервис. Formspree и аналоги принимают форму на свой адрес и пересылают письмо. Бэкенд не нужен, но данные проходят через третью сторону — это стоит отразить в политике.

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

1. Федеральный закон от 27.07.2006 № 152-ФЗ «О персональных данных» — статьи 9 (согласие), 18.1 (политика оператора).
2. W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — критерии 1.3.5 (назначение полей), 3.3.1 (определение ошибки), 3.3.2 (подписи), 2.4.7 (видимый фокус).
3. W3C. WAI-ARIA Authoring Practices — сообщения об ошибках, aria-describedby, живые области.
4. HTML Living Standard — атрибуты novalidate, autocomplete, inputmode.