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

Как видно из названия, форма обратной связи — это блок с полями, в которые пользователь может ввести свои контакты, вопросы или пожелания, чтобы связаться с компанией.

Некоторые предприниматели сомневаются, нужен ли такой виджет на их сайте — «Ведь можно позвонить или написать в мессенджер!». На самом деле, не всем потенциальным клиентам комфортно придумывать длинное первое сообщение со списком вопросов или подробным описанием проблемы. Телефонные звонки тоже не всегда удобны: можно услышать короткие гудки или длинный монолог автоответчика: «Вы позвонили в компанию X… Если ваш вопрос связан с темой N, нажмите 1…». Кроме того, товары и услуги для себя часто ищут поздно вечером: очевидно, что с живым менеджером не поговорить.

Поэтому форма обратной связи, интегрированная с CRM-системой, решает сразу несколько бизнес-задач.

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

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

• Анализ аудитории. Короткие опросы и квизы помогают понять, что на самом деле волнует аудиторию. Например, производитель экокосметики может спросить на сайте «Какой аромат вам по душе?», предложить варианты и собрать готовые данные для планирования ассортимента.

Ни одна форма не способна решить все задачи сразу. Рассмотрим основные виды.

• Простая форма заявки. Только телефон и кнопка обратной связи вида «Перезвоните мне». Такая форма подходит для захвата «горячих» лидов

Место размещения должно соответствовать пользовательскому сценарию. Представьте воронку продаж — от случайного посетителя, который пока не доверяет компании, до «горячего» потенциального клиента.

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

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

• Рядом с товаром или услугой. Формы с кнопками «Узнать о поступлении», «Заказать расчёт» можно разместить прямо в карточке товара.

• Всплывающее окно на любой странице. Здесь часто размещают акционные предложения. Главное — не надоесть, не отпугнуть пользователя назойливыми баннерами, мешающими смотреть контент. Такое окно может появляться, когда пользователь уже потянулся к «крестику», чтобы закрыть окно.

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

Важно понять, что актуально для пользователя в данный момент. Например, SaaS-сервис может разместить кнопку «Начать бесплатный пробный период» сразу после описания тарифа, а в разделе с инструкциями — форму вида «Остались вопросы? Наши эксперты помогут!». Фитнес-центру подойдёт сочетание форм с лид-магнитом в футере и записи на бесплатное пробное занятие на странице с расписанием.

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

На большинстве сайтов для этого под формой размещается фраза вида «Даю ООО „АБВ“ согласие на обработку персональных данных». Рядом — чекбокс, в котором нужно поставить галочку.

При этом нужно учесть следующее.

• Обычно галочка не проставляется — пользователь кликает по ней сам.

• Ссылка на правила обработки персональных данных должна вести на соответствующий документ компании. Можно посмотреть примеры на крупных сайтах, адаптировать текст под себя и разместить.

• Документ должен быть отдельным, а не частью другого — например, пользовательского соглашения.

Вот что поможет сделать форму привлекательной и удобной для пользователя.

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

• Ясный текст. Пользователю должно быть понятно, что хорошего он получит, заполнив форму обратной связи, какую задачу решит. В заголовке и тексте на кнопке должен читаться понятный призыв к действию — например, не «Подписаться на рассылку», а «Получайте новости индустрии на почту раз в неделю», не «Отправить», а «Получить бесплатную консультацию». После отправки формы должно появляться подтверждение, например «Спасибо! Позвоним в указанное время».

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

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

Например, многие CMS, такие как Tilda или Wordpress, предлагают готовые красивые шаблоны — нужно только заменить тексты в заготовке на собственные.

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

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

Пользователи не любят сложности и задержки, раздражаются, когда приходится делать одно и то же несколько раз.

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

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

Можно использовать следующие альтернативы.

• Honeypot-поле. Это скрытое поле, которое видят только роботы. Если оно заполнено, заявка блокируется.

• Google reCAPTCHA. Работает незаметно для пользователя, оценивая «человечность» его поведения. Можно настроить строгость проверки и дальнейшие действия — например, «Если вероятность, что это робот, выше 50%, предложить разгадать капчу».

• Вопросы на логику. Ответить на вопрос вида «Сколько будет 3+3?» можно одним нажатием кнопки. Пользователя это не утомит, а бота остановит.

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

Хорошо, когда элементы откликаются на взаимодействие — кнопка меняет оттенок при наведении курсора, активное поле ввода получает цветную рамку.

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

В квизах из нескольких страниц с вопросами полезно показывать прогресс — заполняющуюся «полоску» или пометку вида «Шаг 3 из 4».

Укажите срок обработки заявки («Перезвоним в течение 15 минут»), добавьте социальные доказательства («Уже помогли 234 клиентам»).

Многие используют психологические триггеры: таймеры с обратным отсчётом, ограниченность предложения («Осталось 3 штуки!). Это может подтолкнуть некоторых пользователей, но разочаровать других, как очевидная и привычная манипуляция.

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