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

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

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

Ниже разберём принципы, которые мы применяем в проектах, и типичные ошибки, которые встречаются на сайтах разных компаний.

Какие бывают формы и зачем они нужны

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

• Заявка на обратный звонок. Минимум полей, быстрое действие, подходит для срочных услуг.
• Запрос расчёта. Несколько уточняющих вопросов, чтобы менеджер мог сразу назвать цену.
• Запись на приём или консультацию. Дата, время, услуга, специалист.
• Общая форма «Задать вопрос». Имя, способ связи, сообщение.
• Подписка на рассылку. Одно поле и согласие; подробнее о связке с каналом — в статье email-маркетинг и сайт.
• Регистрация и вход. Особые требования к паролям и восстановлению доступа.
• Оформление заказа. Многошаговая структура; детали — в материале корзина и оформление заказа без потерь.
• Квиз. Последовательность вопросов с подбором решения; см. статью квизы на сайте.

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

Сколько полей оставить

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

Как решить, что оставить

1. Выпишите все поля, которые сейчас есть или которые хочет отдел продаж.
2. Для каждого ответьте: что произойдёт, если мы этого не узнаем сразу?
3. Оставьте обязательными только те, без которых невозможно ответить клиенту: обычно имя и способ связи.
4. Остальное сделайте необязательным или перенесите на второй шаг, когда контакт уже установлен.
5. Проверьте результат на реальных заявках: сколько информации менеджеры действительно используют.

Ориентиры по типам форм

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

Расположение и подача

Где размещать

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

Как подводить к форме

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

Визуальное оформление

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

Подписи, подсказки и тексты внутри формы

Слова в форме работают так же важно, как и сами поля.

Подписи к полям

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

Подсказки и примеры

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

Тон

Формулировки должны соответствовать тону бренда: вежливо, по-человечески, без канцелярита. Вместо «Введите данные для обработки запроса» — «Расскажите, что вам нужно». Подробнее — в статье тон коммуникации бренда на сайте.

Валидация и сообщения об ошибках

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

Правила хорошей проверки

• Проверяйте вовремя. Показывайте ошибку, когда человек закончил ввод в поле, а не на каждом нажатии клавиши и не только после отправки всей формы.
• Говорите, что исправить. Вместо «Неверный формат» напишите «В номере должно быть одиннадцать цифр».
• Показывайте ошибку рядом с полем, а не общим списком вверху страницы.
• Не стирайте введённое. Если произошла ошибка, данные в остальных полях должны остаться.
• Допускайте разные форматы. Телефон с пробелами, дефисами, скобками, с восьмёркой или плюсом — пусть система приводит это к единому виду.
• Не полагайтесь только на проверку в браузере. Серверная проверка обязательна из соображений безопасности.
• Ставьте фокус на первое проблемное поле.

Цвет и значки

Ошибку нельзя обозначать только красным цветом: люди с нарушениями цветовосприятия её просто не заметят. Добавьте значок и текст. Подробнее о требованиях — в статье доступность сайта.

Подтверждение отправки

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

Формы на смартфонах

Значительная часть заявок поступает с телефонов, и там формы страдают сильнее всего. Мелкие поля, неподходящая клавиатура, перекрытые кнопки, автоувеличение при фокусе — всё это типичные причины провалов.

• Правильные типы полей. Для телефона вызывайте цифровую клавиатуру, для почты — клавиатуру с символом собаки, для даты — выбор даты.
• Автозаполнение. Корректные атрибуты позволяют браузеру подставить имя, почту и адрес в один тап.
• Крупные элементы. Минимальный размер зоны касания — около сорока пикселей.
• Полноэкранная форма вместо маленького окна, где клавиатура закрывает половину контента.
• Кнопка отправки видна над клавиатурой или закреплена внизу.
• Минимум прокрутки внутри формы.
• Альтернатива вводу: кнопки «Позвонить» и «Написать в мессенджер» для тех, кому удобнее так.

Общие принципы работы с небольшими экранами изложены в статьях mobile first и адаптивная вёрстка.

Защита от спама и безопасность

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

Способы защиты

• Скрытое поле-ловушка. Человек его не видит, а робот заполняет и выдаёт себя.
• Проверка времени заполнения. Слишком быстрая отправка означает автоматику.
• Невидимые проверки от специализированных сервисов, которые оценивают поведение, не заставляя человека доказывать, что он не робот.
• Ограничение частоты отправок с одного адреса.
• Серверная проверка данных и очистка от вредоносных вставок.
• Фильтрация по содержимому: ссылки, стоп-слова.

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

Защищённая передача

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

Персональные данные и согласие

Любая форма, которая собирает имя, телефон или почту, обрабатывает персональные данные. Это накладывает обязанности.

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

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

Что происходит после отправки

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

Цепочка обработки

1. Доставка. Заявка попадает в почту и в систему учёта клиентов, а при необходимости — в мессенджер менеджера.
2. Дублирование. Хотя бы два канала на случай сбоя почты.
3. Назначение ответственного. Каждая заявка закреплена за человеком.
4. Время реакции. Определите срок и контролируйте его. Быстрый ответ значительно повышает вероятность сделки.
5. Автоответ клиенту. Письмо с подтверждением и описанием следующих шагов.
6. Передача в продажи. Сведения об источнике, странице и параметрах заявки сохраняются; см. статью как сайт помогает отделу продаж.

Доставляемость писем

Одна из самых болезненных проблем: письма с заявками попадают в спам. Причины обычно в неправильных настройках отправки с домена. Надо настроить подтверждающие записи в DNS, использовать почту на собственном домене, а не бесплатных адресах, и регулярно проверять папку спама. После запуска обязательно отправьте тестовую заявку каждой формы. Это входит в чек-лист из статьи чек-лист запуска нового сайта.

Аналитика форм

Улучшать форму можно только по данным. Настройте события и смотрите:

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

Более общий взгляд на метрики — в статье веб-аналитика: какие метрики действительно важны. Когда данные накоплены, можно сравнивать варианты по методике из материала A/B-тестирование: практическое руководство: например, форму с тремя и пятью полями, разные заголовки и тексты кнопок.

Типичные ошибки

• Слишком много обязательных полей. Особенно раздражают ненужные: адрес, должность, дата рождения.
• Невидимая или непонятная кнопка. Серая кнопка на сером фоне с текстом «Отправить» теряется.
• Отсутствие реакции на отправку. Человек не понимает, получилось ли, и нажимает повторно, создавая дубли.
• Ошибки, стирающие введённые данные.
• Формат телефона, который нельзя угадать.
• Капча на каждом шаге.
• Нет альтернативы. Кому-то удобнее позвонить или написать письмо; запасные способы связи повышают общее число обращений.
• Невыполненные обещания. Написано «перезвоним за пять минут», а менеджер выходит на связь через день.
• Не проверены уведомления. Форма работает, но почта настроена с ошибкой, и заявки никто не видит.
• Нет теста на реальных устройствах. В эмуляторе всё хорошо, на телефоне клавиатура закрывает кнопку.

Особенности для разных типов сайтов

Услуги и B2B

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

Интернет-магазины

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

Медицина и услуги с записью

Важны выбор специалиста, времени и услуги, подтверждение записи и напоминания. Дополнительные требования к защите данных. Пример подхода — проект для клиники «Аура», с которым можно познакомиться в кейсе клиники «Аура».

Лендинги

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

Чек-лист удобной формы

• Цель формы понятна, обещание о следующем шаге указано.
• Обязательны только действительно нужные поля.
• Подписи видны всегда, есть примеры формата, работает маска телефона.
• Ошибки объясняют, что исправить, и не стирают введённое.
• Форма удобна на смартфоне: правильные клавиатуры, крупные поля, видимая кнопка.
• Защита от спама не мешает людям.
• Согласие на обработку данных и ссылка на политику размещены.
• После отправки показывается подтверждение, а на почту уходит письмо.
• Заявки доходят нескольким адресатам и сохраняются в системе.
• Настроены цели и события для аналитики.
• Время реакции менеджеров известно и контролируется.

Итог

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

Если хотите проверить формы на вашем сайте или спроектировать новые с учётом специфики бизнеса, свяжитесь с нами через страницу контактов. Специалисты Mevero проведут аудит и предложат улучшения, которые можно проверить на реальных цифрах. Узнать больше о пользовательском подходе можно и на странице UX-аудита.