Разные способы взаимодействия с понятной формой заявки на сайте
UX и дизайн

Доступная форма заявки: как помочь человеку отправить обращение

Форма должна объяснять, что заполнять, как исправить ошибку и дошло ли обращение. Проверьте её с клавиатуры, на телефоне и по цепочке доставки до ответственного.

Оставьте поля, без которых нельзя ответить

Каждое обязательное поле должно иметь понятную причину. Для первого обращения часто достаточно способа связи и описания задачи; подробности можно уточнить позже. Если поле необходимо, покажите его назначение и формат до отправки. Не используйте пример внутри поля как единственную подпись: он исчезает при вводе и может быть недоступен части пользователей.

Свяжите видимую подпись с полем программно. W3C WAI описывает, как это помогает экранным дикторам и увеличивает понятную область нажатия. Группируйте связанные варианты выбора и не полагайтесь только на цвет, чтобы обозначить обязательность или ошибку.

СостояниеЧто должен понять человекЧто проверить
До вводаНазначение и формат поляПодпись видна и связана с контролом
ОшибкаЧто исправить и гдеСообщение связано с полем
После отправкиДошла ли заявкаПодтверждение и фактическая доставка

Сделайте ошибки конкретными и исправимыми

Фраза «неверные данные» оставляет человека без следующего шага. Укажите поле и причину: например, адрес почты без обязательной части или слишком короткое описание. Сохраняйте уже введённое при ошибке и переводите внимание к проблемному месту. Сообщение должно быть доступно не только визуально, но и для вспомогательных технологий.

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

Пройдите форму без мыши и на телефоне

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

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

Проверьте доставку заявки целиком

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

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

Вопросы и ответы

Достаточно ли подписи внутри поля?

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

Как проверить форму без специальных инструментов?

Пройдите её с клавиатуры, на телефоне, вызовите ошибки и отправьте тестовую заявку до рабочей почты или CRM.

Почему подтверждение на сайте не равно заявке?

Сообщение может появиться при сбое дальнейшей доставки. Проверяйте всю цепочку до ответственного.

Получите понятный план следующего шага

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

Написать на почтуhello@iskro.techTelegram
Получить разбор проекта