Формы, которые заполняют: поля, ошибки и доверие

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

Сначала цель, потом поля

Одна форма не обязана обслуживать все случаи. «Заказать звонок», «получить расчёт» и «отправить техническое задание» — разные обещания и разная цена ошибки. Чем яснее следующий шаг, тем проще решить, что спросить сейчас, а что менеджер уточнит позже.

Для первого контакта часто достаточно имени и одного способа связи. Поле «Компания» имеет смысл в B2B, если влияет на маршрутизацию. Поля «Город» и «Бюджет» нужны только тогда, когда без них нельзя продолжить. Любопытство отдела продаж — не основание нагружать посетителя.

Подпись не должна исчезать

Placeholder удобен как пример, но плох как единственная подпись: после ввода он пропадает. Человек должен видеть, что именно находится в поле, особенно если возвращается к форме после сообщения об ошибке. Используем постоянный label и при необходимости короткую подсказку.

Ошибки рядом с причиной

Сообщение «Форма заполнена неверно» заставляет искать проблему по всему экрану. Ошибка должна стоять рядом с полем и объяснять, как её исправить: «Укажите телефон с кодом страны» или «Нужен адрес в формате name@example.ru».

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

Мобильная клавиатура — часть интерфейса

Правильный тип поля вызывает нужную клавиатуру: телефонную для номера, email-клавиатуру для почты. Автозаполнение сокращает работу, поэтому задаём корректные autocomplete-атрибуты. Размер касания должен позволять нажать на кнопку большим пальцем, а форма не должна прятаться под открывшейся клавиатурой.

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

Согласие без юридического лабиринта

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

Что происходит после нажатия

1. Кнопка сразу показывает состояние отправки и защищена от двойного нажатия.
2. Введённое не исчезает до подтверждения сервера.
3. Успешный экран объясняет следующий шаг и срок ответа.
4. Событие отправки уходит в аналитику только после реального успеха.
5. Заявка попадает в рабочую систему вместе с источником и страницей.

Спам без издевательства над человеком

Видимая капча — крайняя мера. Сначала используем ограничение частоты, скрытое поле-ловушку, проверку времени заполнения и серверную валидацию. Если риск высокий, выбираем проверку, которая появляется только для подозрительного поведения.

Как измерять форму

Одного события «отправлено» мало. Полезно знать показ формы, начало ввода, ошибки по полям, успешную отправку и технический отказ. Не записываем в аналитику персональные данные. Сегментируем по устройству, источнику и типу страницы.

Записи сессий помогают увидеть заминку, но гипотезу проверяем на достаточном объёме и вместе с обратной связью менеджеров. Иногда короткая форма даёт больше мусорных обращений — тогда выигрывает не максимальная конверсия, а доля пригодных заявок.

Проверка перед выпуском

• Форма работает с клавиатуры и экранного диктора.
• Подписи не исчезают после ввода.
• Автозаполнение и вставка не ломают маску.
• Ошибки понятны и не стирают данные.
• На слабой сети видны загрузка и повторная отправка.
• Успех подтверждает сервер, а не один клик по кнопке.
• Заявка доходит до ответственного с источником.