UX-аудит2 июня 20267 мин чтения

Форма обратной связи на сайте: как проверить поля, ошибки и кнопку перед запуском

Практический чеклист для PM, дизайнера и маркетолога: как проверить форму заявки или обратной связи на сайте, чтобы не терять обращения из-за лишних полей, непонятных ошибок и слабого CTA.

Лендинг почти готов.

Завтра запускают рекламу. Дизайнер поправил первый экран, маркетолог проверил UTM, разработчик сказал: “форма работает”.

На странице правда есть форма:

  • имя;
  • телефон;
  • email;
  • сайт;
  • бюджет;
  • комментарий;
  • чекбокс согласия;
  • кнопка “Отправить”.

В теории всё нормально.

На практике человек открывает страницу с телефона, не понимает, зачем нужен бюджет, вводит телефон “не в том формате”, видит ошибку “некорректно” и закрывает вкладку.

Команда потом смотрит аналитику и говорит: “почему заявок мало?”

Потому что форма обратной связи на сайте — это не технический хвост страницы. Это место, где интерес превращается в заявку.

Или не превращается.

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

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

Коротко: как проверить форму обратной связи на сайте

Быстрая проверка формы сайта начинается не с вопроса “отправляется ли она?”

Сначала проверьте, может ли человек спокойно пройти путь до заявки:

  • понимает ли, зачем оставлять данные;
  • видит ли форму на мобильном;
  • понимает ли каждое поле;
  • знает ли, какие поля обязательные;
  • может ли исправить ошибку без раздражения;
  • понимает ли, что произойдёт после нажатия на кнопку;
  • получает ли подтверждение, что заявка ушла.

Если хотя бы один пункт ломается, это уже не “мелочь в интерфейсе”. Это риск потерять обращение до того, как продажа вообще началась.

Что на самом деле проверяем

Форма заявки на сайте часто проходит только техническую проверку:

“Нажали кнопку — письмо пришло”.

Это важно, но этого мало.

Пользователь проверяет форму иначе. Он не знает вашу CRM, бизнес-процесс и внутренние причины, почему вы просите именно эти данные. Он видит экран и решает:

  • понятно ли, что от меня хотят;
  • не слишком ли много просят;
  • безопасно ли оставлять телефон;
  • что будет после отправки;
  • смогу ли я исправить ошибку;
  • не потеряю ли введённые данные.

Форма должна отвечать на эти вопросы до того, как человек начнёт сомневаться.

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

Поля: каждое поле должно заслужить место

Самая частая ошибка — команда собирает данные “на всякий случай”.

Нам нужен телефон.

И email.

И сайт.

И бюджет.

И комментарий.

И ещё город, потому что менеджеру удобно.

Но для пользователя каждое поле — это цена действия. Чем выше цена, тем сильнее он спрашивает себя: “мне точно надо это отправлять?”

Простой способ проверить поля:

1. Выпишите каждое поле. 2. Напротив напишите, зачем оно нужно именно на первом шаге. 3. Всё, что нужно “потом”, уберите или сделайте необязательным.

Плохо:

“Укажите телефон, email, сайт, бюджет и описание задачи”.

Лучше:

“Оставьте телефон или email — мы уточним детали и подскажем следующий шаг”.

Если менеджеру нужен бюджет, спросите мягче:

“Есть ли ориентир по бюджету? Можно оставить пустым”.

Форма не должна выглядеть как договор на входе.

Она должна помогать сделать первый шаг.

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

Подписи и подсказки: пользователь не знает контекст команды

Подпись поля — это не место для внутреннего жаргона.

Плохо:

“Контакт”

Лучше:

“Телефон или email для ответа”

Плохо:

“Компания”

Лучше:

“Название компании, если заявка от команды”

Placeholder тоже не заменяет подпись. Когда человек начинает вводить текст, placeholder исчезает, и поле снова становится загадкой.

Особенно на мобильном.

Хорошая подпись отвечает на три вопроса:

  • что ввести;
  • в каком формате;
  • зачем это нужно.

Не в каждом поле нужны все три. Но если поле рискованное — телефон, бюджет, сайт, согласие — объяснение должно быть рядом.

Валидация формы: ошибка должна помогать, а не ругать

Ошибка валидации формы — это момент, где пользователь уже сделал усилие.

Он ввёл данные.

Нажал кнопку.

И получил отказ.

Если в этот момент интерфейс пишет “некорректно”, подсвечивает всё красным или сбрасывает заполненные поля, человек не “ошибся”. Его бросили одного с проблемой.

Плохая ошибка:

“Поле заполнено неверно”.

Лучше:

“Проверьте email: похоже, не хватает @”.

Плохая ошибка:

“Заполните обязательные поля”.

Лучше:

“Укажите телефон или email, чтобы мы могли ответить”.

Что проверить:

  • ошибка стоит рядом с нужным полем;
  • текст говорит причину;
  • текст говорит, что сделать дальше;
  • введённые данные не сбрасываются;
  • форма не ругает человека слишком рано, пока он ещё печатает.

Валидация формы должна быть подсказкой.

Не наказанием.

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

Кнопка и доверие

Кнопка формы — это обещание.

“Отправить” почти ничего не обещает. Отправить куда? Что будет дальше? Мне позвонят? Пришлют расчёт? Покажут следующую страницу?

Лучше, когда кнопка называет результат:

  • “Получить расчёт”;
  • “Записаться на консультацию”;
  • “Отправить заявку”;
  • “Получить ответ”;
  • “Проверить форму”.

Рядом с кнопкой важно закрыть страх:

  • что будет после отправки;
  • когда ответят;
  • можно ли не указывать телефон;
  • где политика обработки данных;
  • почему данные вообще нужны.

Плохой финал формы:

пользователь нажал кнопку, форма исчезла, ничего не понятно.

Хороший финал:

“Заявка отправлена. Ответим сегодня до 18:00. Копия ушла на вашу почту”.

Подтверждение — часть формы.

Не декоративный экран после неё.

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

Чеклист на 15 минут

Перед запуском рекламы или релиза прогоните форму как пользователь.

Не как команда.

1. Откройте с телефона

Форма видна? Кнопка не уехала? Поля удобно нажимать? Согласие не занимает половину экрана?

2. Уберите одно поле

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

3. Сломайте ввод

Введите email без @, короткий телефон, пустое обязательное поле. Ошибка помогает исправить ввод или просто ругается?

4. Прочитайте кнопку вслух

По тексту кнопки понятно, что произойдёт после клика?

Если нет — перепишите.

5. Нажмите кнопку дважды

Форма не отправляет дубль? Кнопка показывает состояние отправки? Человек понимает, что заявка уже ушла?

6. Проверьте подтверждение

Есть ли сообщение после отправки? Там есть срок ответа или следующий шаг?

Если подтверждения нет, пользователь может отправить заявку ещё раз.

Или решить, что ничего не произошло.

Инфографика: 15-минутная проверка формы сайта перед запуском — мобильный вид, поля, ошибки, кнопка и подтверждение.

Если нужно быстро начать с preflight-проверки, можно прогнать форму через Проверку формы сайта. Это не заменяет техническое QA, аналитику и проверку CRM, но помогает быстрее увидеть очевидную фрикцию в полях, ошибках, кнопке и подтверждении.

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

Там часто прячется главный риск.

Инфографика: форма — один шаг сценария, поэтому важно проверить путь до формы, саму форму и шаг после отправки.

Когда нужны реальные пользователи и аналитика

Быстрая проверка формы хорошо ловит очевидные проблемы.

Но она не отвечает на все вопросы.

Идите к реальным пользователям или данным, если:

  • форма стоит на дорогом трафике;
  • это регистрация, оплата или доступ к личным данным;
  • команда спорит, какие поля обязательны;
  • есть подозрение, что люди бросают форму на конкретном шаге;
  • нужно понять не только “что плохо”, но и сколько пользователей теряется.

UX-аудит помогает подготовить форму к запуску.

Аналитика и реальные пользователи показывают, что происходит в бою.

Вывод

Хорошая форма обратной связи на сайте не собирает максимум данных.

Она помогает человеку спокойно оставить заявку.

Поля объясняют себя.

Ошибки помогают исправиться.

Кнопка обещает понятный следующий шаг.

Подтверждение снимает тревогу: “заявка ушла”.

Не “форма работает”.

А “человеку понятно, зачем он оставляет данные и что будет дальше”.