Форма обратной связи: как создать форму обратной связи и добавить на сайт

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

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

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

Форма обратной связи: подписка на новости

Целей несколько – это закрытие потребностей клиента, обеспечение стабильной обратной связи, сбор контактных данных и заявок. На лендингах формы являются ключевым элементом получения лидов, другие каналы коммуникации (номера телефонов, ссылки на социальные сети или онлайн-чат) здесь в принципе отсутствуют. На многостраничниках рассматриваемые элементы тоже важны, особенно если речь идет о товарах или услугах без стабильной цены. Например, сайт девелопера, осуществляющего строительство загородных коттеджей из разных материалов: он может указать примерные цены, но расчет всегда выполняется в индивидуальном порядке. В этом случае через форму клиент подает заявку, а менеджер готовит смету и оказывает консультативную поддержку.

Если элементов для обратной связи нет или они оформлены некорректно – потенциальный заказчик просто уйдет. Размещение прямых контактных данных не решает проблему: потребители уже привыкли к тому, что могут кликнуть на «Перезвоните мне» или «Купить сейчас», ввести телефон и получить помощь в течение ближайших 2-5 минут. Это удобно, быстро и демонстрирует клиентоориентированность со стороны бизнеса.

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

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

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

Форма – Сбор отзывов

Формы – универсальный инструмент для e-commerce, они работают более продуктивно, чем страницы с контактными данными. Например, пользователю неудобно разговаривать – он оставляет вопрос онлайн и получает ответ на электронный адрес. Некоторые формы позволяют потребителям выбрать удобное время для звонка, другие объединены с квизами (тесты, опросы, викторины) – это геймифицированный вариант, привлекаемый для лидогенерации.

Размещение форм обратной связи на сайте

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

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

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

Какие виды форм обратной связи существуют

Универсальные

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

Универсальное оформление

Для сбора заявок

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

Форма для сбора заявок

Предоставление дополнительной информации

Используются там, где нет возможности установить фиксированную цену или же характеристики товара/услуги могут меняться по желанию клиента. Сюда входят клининг, бьюти-индустрия, строительство, веб-разработка, пошив/производство на заказ и аналогичные направления. Нередко формы объединены с опросниками: клиент указывает, что хочет изменить, после чего оставляет контактные данные и ждет письма/звонка.

Форма внесения изменений

С лид-магнитом

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

Лид-магнит — гарантированный бонус за отправку данных

Регистрационные

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

Форма регистрации в партнерской программе

Под конкретные предложения

Создаются под определенные продукты/предложения компании. Популярны в финансово-банковском и страховом секторах, образовании. Оформить страховку, заказать банковскую карту онлайн, узнать об ипотеке или назначить время для личной встречи – все это максимально легко для обычного пользователя.

Форма отправка заявки на получение кредита

Отзывы и вопросы, комментарии

Направлены на получение социальных доказательств, комментариев под статьями или новостями, а также вопросов от клиентов. В зависимости от назначения, позволяют прикрепить фото и видео, добавить текст, поставить рейтинг (чаще всего в виде звезд).

Форма для вопросов

С опросами и калькуляторами

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

Форма с калькулятором + обратная связь для заявок

Подписка на новости и рассылки

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

Форма подписки на новости

10 правил создания эффективных форм обратной связи

1. Количество полей

Не стоит делать слишком много полей, иначе пользователь банально поленится заполнять форму. Для подписки на рассылку или получения лид-магнита оптимальны 1-2 поля, для регистрации – 2-3 (имя, телефон и адрес электронной почты). Если нужна дополнительная информация, стоит добавить опрос/тест.

Компактная форма на 3 поля

2. Обязательные поля

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

Обязательные поля помечены звездочкой

3. Дизайн

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

4. Наличие подсказок

В каждом поле должны присутствовать подсказки, они помогут понять, что и куда нужно вводить. Наполняются текстом светло-серого цвета, когда пользователь начинает указывать свои данные – подсказка исчезает. Наличие таких мини-инструкций повысит процент заполненных и отправленных форм.

5. Несложная капча

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

Пример простой капчи

6. Подсвечивание ошибок

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

Выделение ошибок

7. Сброс данных

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

8. Нет подтверждения

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

9. Настройка отправки данных

Введенная информация должна куда-то передаваться – это мессенджеры, электронная почта, CRM-система или другой канал. Здесь сложности связаны с ошибками, допущенными в момент создания сайта: данные зашифрованы или не приходят совсем, прочие проблемы. В этих случаях поможет только проверка и доработка, иначе результаты будут нулевыми.

10. Согласие на обработку персональных данных

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

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

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

Создание форм обратной связи и добавление на сайт выполняется с привлечением следующих методов:

• плагины для CMS. Если проект создан на базе системы управления контентом, то сделать форму легко с помощью плагинов и модулей. Позволяют настроить дизайн, отправку данных и другие параметры, знание программирования не требуется;
• конструкторы. Внешние сервисы для самостоятельной сборки с нуля, популярностью пользуются Google Forms, Yandex Forms, QForm, stepFORM. Встраивание готовой формы выполняется посредством предоставленного кода или готовой интеграции;
• написание кода. Для новичка – задача со звездочкой, потребуется знание и применение HTML, CSS и JavaScript. Можно использовать готовый код, но без навыков лучше выбрать плагины/модули или конструкторы.

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

При сборке сайта на конструкторе добавление формы выполняется в несколько кликов, а настройка осуществляется в интуитивно понятном графическом редакторе. Рассмотрим на примере платформы Craftum, как это сделать:

• авторизуемся в личном кабинете на конструкторе;
• выбираем шаблон, подходящий для проекта, альтернатива – сборка из готовых блоков. Мы будем работать с шаблоном, например, для сайта студии йоги;
• в шаблоне уже есть форма, допустим, она нам не нравится, действуем так: наводим курсор, кликаем на «Удалить блок», потом – на знак «+», чтобы перейти в каталог;

Удаляем блок и добавляем новый

• в каталоге выбираем раздел «Формы», здесь много вариантов – кликаем на тот, который соответствует проекту.

Как добавить форму в шаблон на конструкторе Крафтум

Теперь приступаем к редактированию, нажав на «Настроить» в верхнем левом углу блока. Здесь есть:

• «Контент». Добавляем или удаляем поля, потом создаем для них подписи. При нажатии на название поля (колесико-шестеренка) можно установить обязательное/необязательное заполнение, а также выбрать тип данных (почта, телефон, радио-кнопки, иное);

Настраиваем количество полей и подписи для них

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

Управление дизайном формы и блока

• «Форма». Здесь указываем действие после отправки: перенаправление на страницу/другой сайт или же всплывающее окно (как его добавить расскажем позже). Выбираем, куда будут передаваться введенные данные – это электронная почта, Телеграм, Google Таблицы или CRM (требуется предварительное подключение этих каналов или добавление интеграции). На финише получаем рекомендации по подключению Яндекс и Google Аналитики, инструкция доступна по прямой ссылке.

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

• кликаем на «Настроить» → «Форма» → «Действия после отправки»;
• в разделе «Что сделать?» выбираем «Показать всплывающее окно»;
• нажимаем на «Страница» и в графе «Блок» указываем ранее добавленное всплывающее окно. Изменения сохраняются автоматически.

Встраивание всплывающего окна

Если пользователь хочет воспользоваться сторонними инструментами для работы с формой, то нужно перейти в личный кабинет, открыть «Сайты» и кликнуть на колесико-шестеренку (справа от названия проекта).

Как открыть раздел с настройками сайта

В открывшемся окне видим список, нажимаем на «Интеграции». Нас интересует фильтр «Формы», здесь доступны несколько вариантов на выбор. При клике на название сервиса осуществляется перенаправление в базу знаний Крафтум, где представлены инструкции по работе с интеграцией. 

Как добавить интеграцию

В заключение

Формы обратной связи – важный инструменты для выстраивания коммуникации в цепочке e-commerce-бизнес и потребитель. Они помогают повысить конверсию, обеспечить стабильный прием заявок, отзывов и вопросов, продемонстрировать клиентоориентированность и внести элементы игрового формата (за счет квизов). При создании форм нужно соблюдать требования к количеству полей, выбрать нейтральный дизайн, не отвлекающий от целевого действия, и позаботиться о том, чтобы пользователям было удобно. Сложные капчи, сброс данных, отсутствие исправления ошибок, отказ от благодарственных всплывающих окон – все это снижает результативность, что негативно сказывается на коммерческих показателях.