Форма — это точка, где пользователь либо становится клиентом, либо закрывает вкладку. Между «хочу купить» и «купил» стоит несколько полей, кнопка и ваш дизайн. И именно здесь бизнес теряет деньги — тихо, незаметно, каждый день.
По данным Baymard Institute, средний показатель брошенных форм оформления заказа — около 70%. Это не значит, что люди передумали покупать. Часто они просто столкнулись с формой, которая их раздражила.
Почему люди бросают форму на полпути
Причины обычно банальные. Слишком много полей. Непонятные подписи. Ошибка появляется после отправки, а не в момент ввода. Кнопка серая и не выглядит как кнопка. Форма не работает на телефоне.
Каждый такой момент — это маленькое трение. Одно трение пользователь переживёт. Два — с трудом. Три — он ушёл.
Главная ошибка при проектировании форм: разработчики думают о том, какие данные им нужны, а не о том, каково пользователю их вводить. Это разные задачи.
Сколько полей — достаточно
Правило простое: каждое поле должно зарабатывать своё место. Если вы не можете объяснить, зачем вам это поле прямо сейчас, — уберите его.
Expedia однажды убрала одно необязательное поле «Название компании» из формы бронирования. Результат — плюс 12 миллионов долларов в год. Одно поле.
Как решить, что оставить:
- Спросите: «Что изменится, если мы не соберём эти данные сейчас?» Часто ничего.
- Отложите необязательное на потом — после регистрации, в личном кабинете.
- Объединяйте поля там, где это логично. «Имя» и «Фамилия» — зачем два поля, если вы обращаетесь к человеку по имени?
Для простой формы заявки (имя, телефон, сообщение) три поля — норма. Для интернет-магазина при оформлении заказа можно и больше, но каждый шаг должен быть оправдан.
Подписи полей: label, а не placeholder
Одна из самых распространённых ошибок — использовать текст внутри поля вместо подписи над ним. Выглядит минималистично, но работает плохо.
Когда пользователь начинает вводить текст, подсказка исчезает. Он заполнил три поля, возвращается к первому — и не помнит, что там нужно было написать. Это реальная проблема, особенно для форм с несколькими полями.
Правильный подход: подпись (label) всегда видна — над полем или рядом с ним. Placeholder используйте только для дополнительной подсказки о формате: «+7 (999) 000-00-00» или «Например: Иван».
Текст подписи должен быть коротким и говорить о том, что ввести, а не как. «Телефон» лучше, чем «Введите ваш номер телефона». Лишние слова только загромождают.
Порядок полей имеет значение
Форма — это разговор. И как в любом разговоре, есть логичный порядок.
Начинайте с простого и нейтрального: имя, email. Заканчивайте более личным: телефон, адрес, платёжные данные. Это называется принцип нарастающей сложности. Пользователь уже вложил усилия, заполнив несколько полей, и с большей вероятностью дойдёт до конца.
Группируйте связанные поля визуально. Имя и фамилия — вместе. Адрес доставки — отдельный блок. Платёжная информация — ещё один блок. Это снижает когнитивную нагрузку: мозг воспринимает форму не как бесконечный список полей, а как несколько коротких шагов.
Мноgoshаговые формы работают лучше длинных. Если данных много — разбейте на 2–3 экрана с прогресс-баром. Пользователь видит, что «шаг 1 из 3» — и понимает, что конец близко.
Валидация в реальном времени
Самое раздражающее в формах — заполнить всё, нажать «Отправить», и получить список ошибок. Особенно когда ошибка в самом первом поле, а вы уже ввели десять.
Валидация должна работать по ходу заполнения. Пользователь ввёл email и перешёл к следующему полю — сразу покажите, правильный ли формат. Не ждите отправки.
Правила хорошей валидации:
- Показывайте ошибку после того, как пользователь покинул поле (blur), а не в момент ввода. Иначе красная рамка появляется раньше, чем человек успел что-то написать — это нервирует.
- Подсвечивайте успех тоже. Зелёная галочка или зелёная рамка говорят: «Всё ок, двигаемся дальше». Это приятно и снижает тревожность.
- Текст ошибки должен объяснять, что исправить. «Неверный формат» — плохо. «Укажите email в формате name@example.com» — хорошо.
Кнопка отправки
Кнопка — это финальный призыв к действию. Она должна выглядеть как кнопка и говорить, что произойдёт после нажатия.
«Отправить» — нейтрально и скучно. «Получить расчёт» или «Записаться на консультацию» — конкретно и мотивирующе. Пользователь понимает, что он получит.
Кнопка должна быть заметной: контрастный цвет, достаточный размер (минимум 44×44 пикселя — стандарт Apple для тач-интерфейсов), и пространство вокруг неё. Не прячьте кнопку среди других элементов.
После нажатия кнопка должна давать фидбек. Если запрос обрабатывается секунду-две, кнопка должна менять состояние: «Отправляю...» или спиннер. Без этого пользователь нажимает ещё раз, думая, что первый раз не сработало.
Состояния полей — про что часто забывают
Каждое поле формы существует в нескольких состояниях, и каждое нужно проработать визуально:
- Default — обычное поле, ещё не тронутое.
- Focus — пользователь кликнул и вводит данные. Выделите поле: синяя рамка, тень, изменение фона — что угодно, лишь бы было понятно, что поле активно.
- Filled — данные введены, поле покинуто. Можно добавить лёгкий индикатор успеха.
- Error — что-то не так. Красная рамка и сообщение об ошибке.
- Disabled — поле недоступно. Серый фон, пониженная непрозрачность.
Если дизайнер проработал только состояние Default, форма будет выглядеть мёртво при взаимодействии. Пользователь не понимает, что происходит.
Мобильные формы — отдельная история
Больше половины трафика сегодня — мобильный. При этом формы на телефоне заполнять неудобно по умолчанию: клавиатура занимает половину экрана, пальцы попадают мимо мелких полей, автозаполнение ломает вёрстку.
Что нужно сделать:
Правильный тип клавиатуры. Для телефона — type="tel" (цифровая клавиатура). Для email — type="email" (появляется @ и .com). Для числа — inputmode="numeric". Это мелочь, но она сильно влияет на скорость заполнения.
Достаточный размер полей. Минимальная высота поля на мобильном — 48 пикселей. Расстояние между полями — хотя бы 16 пикселей. Иначе пользователь промахивается.
Поддержка автозаполнения. Атрибуты autocomplete="name", autocomplete="email", autocomplete="tel" позволяют браузеру или менеджеру паролей подставить данные одним касанием. Не отключайте автозаполнение без серьёзной причины.
Лейблы сверху, не сбоку. На узком экране лейбл сбоку от поля сжимает само поле до неудобного размера. Подписи над полями работают лучше.
Доверие и безопасность
Форма, которая просит данные, должна внушать доверие. Особенно если вы просите телефон, email или платёжную информацию.
Несколько приёмов:
- Краткое объяснение рядом с чувствительным полем: «Номер нужен для подтверждения заказа — не передаём третьим лицам». Одно предложение снимает часть тревоги.
- Значок замка или пометка «Безопасная форма» рядом с платёжными данными.
- Ссылка на политику конфиденциальности рядом с чекбоксом согласия — она должна быть, но не должна быть страшной стеной текста.
- SSL-сертификат. Это базово, но форма на сайте без HTTPS — это красный флаг для пользователя.
Если форма — это заявка на услугу, добавьте рядом социальное доказательство: «Уже 200 компаний получили расчёт». Это не элемент самой формы, но влияет на то, решится ли человек её заполнить.
Страница благодарности
Форма отправлена — что дальше? Многие сайты показывают просто «Спасибо!» и останавливаются на этом. Упущенная возможность.
Хорошая страница после отправки:
- Подтверждает, что всё получено («Ваша заявка принята»).
- Говорит, что будет дальше и когда («Мы позвоним в течение рабочего дня»).
- Предлагает следующий шаг: почитать статью, посмотреть портфолио, подписаться на Telegram.
Это не обязательно отдельная страница — может быть inline-сообщение, которое появляется на месте формы. Главное — не оставлять пользователя в пустоте.
Типичные ошибки в одном списке
Чтобы не забыть при разработке:
- Текст внутри поля вместо подписи над ним
- Нет состояния focus — непонятно, какое поле активно
- Ошибки только после отправки, а не в реальном времени
- Текст ошибки не объясняет, что исправить
- Кнопка «Отправить» без индикации загрузки
- Слишком мелкие поля на мобильном
- Неправильный тип клавиатуры для телефона или email
- Обязательные поля не отмечены (или, наоборот, все помечены звёздочкой, хотя все обязательны)
- Форма сбрасывается при ошибке — пользователь вводит всё заново
- Нет сообщения после успешной отправки
Как это выглядит в работе
Когда в REEXY делают форму для клиента — будь то лендинг от 3 500 ₽ или корпоративный сайт — форма проходит отдельный этап: состояния, мобильная версия, текст ошибок. Это не «сделали и забыли», а часть интерфейса, которая напрямую влияет на конверсию.
Форма — не технический элемент, который «просто работает». Это диалог с пользователем. И как любой диалог, он может быть комфортным или раздражающим — зависит от того, сколько внимания вложено в детали.