Форма обратной связи — блок для заявок посетителей. Рабочий минимум — 2–4 поля, маска телефона, валидация на лету, чекбокс согласия по 152-ФЗ, защита от спама (honeypot или капча) и отправка заявки в CRM, на почту и в Telegram.
Каждое лишнее поле снижает долю отправленных форм.
Какие бывают формы и чем они отличаются
Заявка, обратный звонок, вопрос, расчет и форма в футере решают разные задачи: у каждой свой набор полей и свой текст кнопки. Одинаковая форма везде путает и посетителя, и менеджера.
Если форма — главная точка заявки, она стоит выше первого экрана и в карточке услуги. Если вспомогательная — хватит футера и страницы контактов.
Что сделать сейчас:
- •выписать все формы сайта;
- •дать каждой одну цель и свой текст кнопки;
- •добавить каждой скрытое поле с типом формы.
Скрытое поле с типом формы
В форму добавляют скрытые поля с типом формы, страницей и меткой кампании: <input type="hidden" name="form_type" value="callback">. Менеджер сразу видит, откуда заявка, а письма расходятся по разным адресам по типу запроса. Попап на мобильном не должен закрывать контент и спорить за экран с чатом.
Сколько полей нужно в форме заявки
Правило минимума: оставляем только то, без чего менеджер не сделает первый звонок, — имя и телефон. Для расчета добавляем один уточняющий вопрос, остальное спросят в разговоре.
Оптимум — 3–4 поля: сокращение формы с 11 до 4 полей дало рост конверсии на 120% (Imaginary Landscape). Некритичное поле делаем необязательным или убираем.
Типичные лишние поля:
- •отчество — для звонка хватает имени;
- •город — выясняется в разговоре;
- •«откуда узнали» — видно по метке кампании;
- •обязательный email рядом с телефоном — хватит одного канала.
Проверка простая: к каждому полю задаем вопрос «нужно ли это для звонка?» — все, без чего можно обойтись, убираем.
Минимальные наборы под сценарии
- •обратный звонок — имя, телефон: больше для звонка не нужно;
- •вопрос — имя, email, сообщение: ответ приходит письмом;
- •расчет — имя, телефон, выбор услуги или объем: без этого цену не назвать;
- •форма в футере — телефон или email: человек пишет мимоходом, лишнее его остановит.
Валидация формы на сайте и маски ввода
Маска телефона сразу задает формат +7 и не пускает буквы. Email проверяется на формат. Ошибка появляется у конкретного поля во время ввода, а не красным экраном после отправки. Текст объясняет причину: «Проверьте номер — не хватает цифр» вместо «Ошибка ввода».
Базовая разметка: <label for="phone">Телефон</label><input id="phone" name="phone" type="tel" pattern="\+7\d{10}" required>, для почты — type="email", required и minlength. Если поле критично для связи, пустым его не отправить; если опциональное — отправку не блокируем.
Что сделать сейчас: заполните форму с ошибками на телефоне и посмотрите, где и как появляется подсказка.
Проверка на сервере обязательна
Браузерную проверку бот обходит прямым запросом. На сервере повторяют: обязательные поля, лимиты длины, формат email, удаление HTML-тегов, экранирование.
$name = trim(strip_tags($_POST['name'] ?? ''));
$email = filter_var($_POST['email'] ?? '', FILTER_VALIDATE_EMAIL);
if (mb_strlen($name) < 2 || !$email) { exit('Проверьте данные'); }
Это базовый пример, а не готовое решение для продакшена.
Согласие на обработку персональных данных
Имя, телефон и email в полях формы — это персональные данные по 152-ФЗ, закон действует с 27.07.2006. Собрали хотя бы один такой идентификатор — нужен отдельный чекбокс согласия и ссылка на опубликованную политику обработки данных.
С 01.09.2022 требования к согласию ужесточились: оно должно быть конкретным, предметным, информированным и сознательным. На практике это значит, что цели сбора данных прописаны заранее, а не «на всякий случай», и посетитель понимает, на что именно соглашается.
Пример разметки:
<label><input type="checkbox" name="consent" required> Согласен на обработку персональных данных согласно <a href="/policy">политике конфиденциальности</a></label>
- •Чекбокс не отмечен заранее — отметку ставит только посетитель.
- •Ссылка на политику ведет на реальную опубликованную страницу, а не в никуда.
- •На согласие и на рассылку — два разных чекбокса, не один общий.
Проверить сейчас: открыть форму, кликнуть по ссылке на политику и убедиться, что страница загружается и текст согласия отражает реальную цель сбора данных.
Уведомление Роскомнадзора и защита данных
Перед началом сбора данных через форму оператор уведомляет Роскомнадзор, если нет исключений из ст. 22 152-ФЗ. Отдельно ст. 19 того же закона обязывает принимать меры защиты собранных данных.
На уровне сайта это выражается просто: HTTPS на всей странице с формой, а не только на морде сайта, и логи заявок без лишних персональных данных сверх тех, что реально нужны для обработки обращения.
Как защитить форму от спама
Защиту наращивают по мере нужды. Если спама мало — honeypot и тайм-чек. Если много — добавляют лимит отправок по IP. Если идет атака — капча, и лучше простая: сложная бьет по конверсии.
Не работают нечитаемая капча как единственная защита и фильтр, который режет настоящие заявки вместе со спамом. Логи отсева храните — по ним видно ложные срабатывания.
Что сделать сейчас: включить honeypot и тайм-чек, а когда накопятся данные, посмотреть лог отсева и проверить, нет ли там живых заявок.
Honeypot, тайм-чек и лимит отправок
Honeypot — поле, скрытое через CSS: человек его не видит, а бот заполняет, и сервер такую заявку отбрасывает.
<input name="website" type="text" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px">
Тайм-чек отсекает отправки, пришедшие слишком быстро после загрузки страницы: живой человек так не успевает. Порог подбирают сами — это ориентир, а не статистика. Лимит блокирует серию заявок с одного IP за короткое время.
Куда отправлять заявку с формы
Один канал — одна точка отказа. Заявка сразу уходит в CRM, на почту и в Telegram-бот, а дубль сохраняется в базе на сервере: оттуда ее поднимут, если внешние каналы упали.
Письма с формы попадают в спам, если у домена не настроены SPF, DKIM и DMARC или поле From пустое.
Если заявок много и их разбирают несколько менеджеров, основной канал — CRM, а почта и Telegram работают уведомлениями. Если заявки редкие, хватит почты и Telegram, но дубль в базе все равно нужен.
Что сделать сейчас: отправьте тестовую заявку и найдите ее в CRM, на почте, в Telegram и в базе.
Как проверять, что заявка дошла
Каждый день сверяйте число отправок в Метрике (цель на успешную отправку) с числом заявок в CRM. Расхождение — сигнал, что какой-то канал отвалился.
Настройте алерт на ошибку отправки в почту или бот. Тестируйте на боевом домене, а не локально: локальная среда скрывает проблемы с почтой. Отвечайте клиенту как можно быстрее, пока интерес не остыл.
Проверка формы перед запуском за 15 пунктов
- •У формы определены вид и одна цель
- •Поля соответствуют цели, лишних нет
- •У каждого поля есть label
- •Маска телефона работает
- •Ошибки видны на лету у поля
- •Есть серверная проверка
- •Чекбокс согласия не отмечен заранее, политика открывается
- •Страница формы работает по HTTPS
- •Honeypot включен
- •Тайм-чек отсекает слишком быстрые отправки
- •Есть лимит отправок с одного IP
- •Заявка доходит в CRM, на почту и в Telegram
- •Дубль сохраняется в базе на сервере
- •Цель в Метрике настроена
- •Сообщение об успехе показывается
Если хоть один пункт не пройден, то форма не выходит в релиз.
Тесты на разных устройствах
Ручной прогон: два браузера и телефон, заведомо неверные данные, кириллица и латиница в одном поле, выключенный JavaScript, обрыв соединения во время отправки. Каждый сценарий вскрывает то, что не видно при аккуратном заполнении.
Частые поломки: не тот action у формы, неверный method, письмо уходит в спам, сообщение об ошибке не выводится. С выключенным JavaScript сразу видно, держит ли форму серверная проверка.
Заявки уходят в никуда или тонут в спаме? Настроим формы и их прием в CRM в рамках разработки сайта — от 50 000 ₽, раздел «Сайты».
Источники
