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

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

Что такое форма обратной связи и зачем она сайту

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

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

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

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

Сколько полей нужно форме обратной связи?

Столько, сколько нужно для первого ответа, — обычно два-три поля. Nielsen Norman Group сформулировала правило прямо: каждое убранное из формы поле повышает её конверсию. Свою собственную форму в NN/g сократили с шести полей до двух.

Чтобы решить судьбу поля, задайте про него три вопроса из той же рекомендации NN/g. Можно ли получить эти данные иначе? Можно ли собрать их позже, когда человек уже на связи? Можно ли обойтись без них совсем? Если хоть на один вопрос ответ «да», поле из формы убирают.

Город часто определяется по странице или по номеру телефона. Название компании менеджер спросит в первом разговоре. Поле «Как вы о нас узнали?» заменяют метки в ссылках и данные счётчика.

У этого правила есть и юридическая сторона. Закон о персональных данных требует, чтобы данные не были избыточными по отношению к заявленным целям обработки. Поле «Дата рождения» в форме заказа звонка трудно объяснить и посетителю, и проверяющему.

Факт. NN/g ссылается на исследование: формы, сделанные по правилам юзабилити, с первой попытки отправляли без ошибок в 78 % случаев, формы с нарушениями — только в 42 %.

Какие поля оставить под разные задачи?

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

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

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

Как оформить поля: подписи, порядок и обязательность

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

• Подпись над полем — у каждого поля постоянная подпись снаружи. Подсказка внутри поля пропадает при вводе, и NN/g отмечает, что такая замена подписи создаёт множество проблем с удобством.
• Одна колонка — поля идут друг под другом. Две колонки сбивают взгляд, и человек пропускает поле справа.
• Звёздочка у обязательных — NN/g называет пометку обязательных полей звёздочкой простым способом улучшить форму. Пометка только необязательных полей заставляет гадать.
• Тип поля под данные — телефону цифровую клавиатуру, почте клавиатуру с символом «@», выбору из двух-трёх вариантов переключатели вместо выпадающего списка.
• Формат объяснён заранее — если номер нужно вводить в определённом виде, напишите это под полем, а не в сообщении об ошибке.
• Без кнопки «Очистить» — по оценке NN/g, риск случайно стереть заполненное выше пользы от возможности начать заново.

Порядок полей — привычный: сначала имя, потом контакт, потом комментарий. Кнопку отправки ставят сразу под последним полем и подписывают действием: «Заказать звонок», «Получить расчёт». Надпись «Отправить» ничего не обещает.

Как подсказать ошибку ввода и не потерять заявку

Ошибку показывают сразу, рядом с полем и понятными словами. NN/g рекомендует проверять поле, как только человек закончил его заполнять, а не после нажатия кнопки, когда ошибок может оказаться несколько.

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

Текст ошибки говорит, что исправить. «Неверный формат» — плохо. «Номер должен начинаться с +7 или 8» — хорошо. Цвет — не единственный сигнал: красную рамку дополняют текстом и значком, иначе человек с нарушением цветовосприятия ошибку не заметит.

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

Хорошая ошибка в форме стоит рядом с полем, объясняет, что исправить, и не стирает уже введённое.

Согласие на обработку персональных данных по 152-ФЗ

Имя, телефон и почта в заявке — персональные данные, поэтому форма собирает согласие на их обработку. Статья 9 закона № 152-ФЗ требует, чтобы согласие было конкретным, предметным, информированным, сознательным и однозначным.

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

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

Сайт, который собирает данные через формы, публикует политику обработки персональных данных: этого требует статья 18.1 того же закона. Ссылка на политику обычно стоит рядом с галочкой согласия и в подвале. Что ещё обязан сделать владелец сайта, разобрано в статье о защите персональных данных на сайте по 152-ФЗ.

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

Как защитить форму на сайте от спама?

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

Первый слой работает на сервере и посетителю не виден. Скрытое поле-ловушка не отображается человеку, но его заполняют боты: заявку с заполненной ловушкой сервер отбрасывает. Туда же относятся проверка, что форму не отправили мгновенно после загрузки страницы, и ограничение числа отправок с одного адреса.

Второй слой — капча. Яндекс SmartCaptcha, по документации сервиса, проверяет запросы своими алгоритмами и показывает задание только тем пользователям, запросы которых сочтёт подозрительными. Есть и невидимый режим: кнопки «Я не робот» на странице нет вовсе, а проверка запускается по нажатию кнопки отправки.

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

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

Что должно происходить после отправки формы?

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

На месте формы или в отдельном окне появляется сообщение: заявка принята, кто и как ответит, куда смотреть. «Спасибо! Перезвоним в рабочее время» лучше безликого «Отправлено». Если отправка не удалась, человек видит причину и может повторить попытку, не заполняя поля заново.

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

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

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

Форму проверяют руками, на настоящих устройствах и с настоящей отправкой, — до того, как на страницу пойдёт реклама.

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

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

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

Источники

• Website Forms Usability: Top 10 Recommendations — Nielsen Norman Group
• Marking Required Fields in Forms — Nielsen Norman Group
• 10 Design Guidelines for Reporting Errors in Forms — Nielsen Norman Group
• 10 Usability Heuristics for User Interface Design — Nielsen Norman Group
• Федеральный закон № 152-ФЗ «О персональных данных», статья 9 — Гарант
• Федеральный закон № 152-ФЗ «О персональных данных», статья 5 — Гарант
• Федеральный закон № 152-ФЗ «О персональных данных», статья 18.1 — Гарант
• Документация Yandex SmartCaptcha: валидация пользователя — Яндекс Облако