Формы обратной связи: правила оформления полей

Сколько форм ставить и где — один вопрос, как устроено каждое поле — другой. Разбираем оформление на уровне полей и ошибок.

Коротко

Подписи полей остаются видимыми при вводе.
Ошибка объясняет, что исправить.
Маски помогают и мешают одновременно.
Многошаговая форма — не всегда лучше.

Подписи полей

Решение	Проблема
Подсказка внутри поля вместо подписи	Исчезает при вводе
Подпись слева от поля	Уезжает на мобильных
Подпись над полем	Обычно лучший вариант
Подпись мелким серым	Плохо читается
Только иконка	Непонятно, что вводить

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

Подписи полей — Подсказка внутри исчезает при вводе.

Обязательные и необязательные поля

Правило	Почему
Обязательных должно быть минимум	Каждое снижает число дошедших
Отмечать нужно то, чего меньше	Меньше пометок — чище форма
Пометка видна до отправки	Не после ошибки
Необязательное так и подписано	Человек может пропустить

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

Сообщения об ошибках

Плохо	Хорошо
«Ошибка»	«Укажите телефон с кодом города»
«Неверный формат»	«Похоже, в номере не хватает цифр»
Ошибка вверху формы	Ошибка рядом с полем
Ошибка после отправки	Проверка при переходе к следующему полю
Форма очистилась	Введённое сохранено

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

Сообщения об ошибках — Введённое не должно стираться.

Маски и автоподстановка

Помогает

Правильный тип клавиатуры
Автоподстановка города по индексу
Подсказки адреса
Автозаполнение из браузера

Мешает

Жёсткая маска телефона
Запрет вставки из буфера
Автоисправление в поле имени
Форма, мешающая автозаполнению

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

Маски и автоподстановка — Жёсткая маска блокирует ввод.

Одна форма или несколько шагов

Вариант	Когда подходит
Одна короткая форма	Два-три поля
Несколько шагов	Много полей, но каждый шаг простой
Пошаговый подбор	Нужно уточнить параметры
Форма с раскрытием	Необязательные детали

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

Что проверить перед запуском

Заполнить с телефона

Полностью, до отправки.

Ошибиться нарочно

Понятно ли, что исправить.

Проверить автозаполнение

Работает ли.

Отправить и посмотреть подтверждение

Видно ли, что получилось.

Проверить, дошла ли заявка

И не в спаме ли.

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