Как «поймать лида»: всё о форме обратной связи

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

• Экономия времени посетителей. Благодаря этому блоку, пользователю не нужно искать контакты владельца сайта и открывать собственный почтовый клиент, чтобы написать письмо. Достаточно заполнить несколько полей, чтобы получить желаемую информацию.
• Защита от спама. Она скрывает адрес владельца сайта, а значит — избавит вас от спам-атак.
• Сортировка почты. Можно добавить поле с заданными тематиками сообщений, предложив пользователю сделать выбор до отправки. Это сократит время на обработку входящих.
• Возможность настройки получения сообщений. Запросы от пользователей могут приходить как в CMS сайта, так и на электронную почту администратора. Вы точно не упустите клиента!

Формы связи на сайте: типы и задачи

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

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

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

Заявка на обратный звонок или консультацию

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

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

С помощью такого блока можно проводить анкетирование клиентов для улучшения сервиса. Предложите посетителям оставить отзыв или рассказать, как вы можете улучшить работу, а также указать свое имя, телефон и E-mail. Чтобы защититься от спама и роботов — добавьте поле reCAPTCHA.

Связь с владельцами сайта

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

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

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

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

Как установить форму связи на сайте? Пошаговая инструкция

В зависимости от CMS, используемой на сайте, создать форму связи можно с помощью написания кода или с использованием специальных сервисов. Рассмотрим разные варианты.

Создание формы на HTML

• Шаг 1. Создание отдельного элемента для сбора данных. Для этого в HTML используется тег <form>. Всё, что будет находиться между открывающим и закрывающим тегом — относится к атрибутам управления формой. Среди них есть 2 обязательных: action — ссылка на скрипт в PHP, который будет обрабатывать введенные данные, и method — способ отправки полученных от пользователей сообщений на сервер.
• Шаг 2. Создание поля для ввода текста. Чтобы пользователь смог отправить сообщение, нужно отдельное поле. Оно создается при помощи тега <textarea>. Чтобы поле было шире, добавьте атрибут placeholder тега <textarea>, а затем – увеличьте ширину до нужного размера при помощи CSS.
• Шаг 3. Создание полей для ввода имени и электронной почты. Данные поля создаются при помощи элемент <input>. Чтобы указать, какие именно данные должен ввести пользователь, используется атрибут type="text".
• Шаг 4. Стилизация. Чтобы использовать разные шрифты и цвета отдельных полей, нужно подключить CSS-стили. HTML — это только своеобразный каркас, который создает отдельные поля и блоки и позволяет описать элементы. Чтобы браузер «понял», как выглядит форма, необходимо создать в папке проекта файл style.css с прописанными в нем свойствами — цветом, размером и даже наличием анимации. В HTML нужно прописать путь к этому файлу.
• Шаг 5. Создание кнопки отправки. Она создается при помощи тега <button> с типом submit. Полная кодировка кнопки будет выглядеть так: <button type="submit">Отправить</button>.
• Шаг 6. Запуск. Чтобы кнопка работала, требуется PHP-обработчик. Он собирает данные полей и отправляет на почту администраторам ресурса либо в CSM сайта. Коды для скриптов PHP можно найти в интернете или написать самостоятельно. Готовый скрипт необходимо загрузить на сервер и открыть ему доступ для чтения полученных файлов, а затем — добавить в верстке страницы ссылку на него и указать метод для обработки полученных данных.

Отдельные CSS помогут настроить размер и дизайн блока для обратной связи, а теги — сделать определенные поля обязательными для заполнения, добавить возможность загрузки файлов или проверку данных, введенных пользователем (например, корректность почты). Готовые скрипты для использования в кодировке сайта можно без труда отыскать в Интернете.

Создание формы с помощью специальных сервисов

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

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

Процесс создания формы подробно описан в Базе знаний Taptop.

Форма, которую хочется заполнять

Маркетологи подтвердят, что просто установить рабочий виджет или блок для сбора контактов — половина дела. Важно знать, как сделать форму обратной связи полезной для посетителей портала. Более того: всплывающие окна часто раздражают пользователей, а 80% полей остаются незаполненными только потому, что их создатели не продумали юзабилити. Поэтому при создании такого блока необходимо:

• Предложить интересную для клиента выгоду. Это может быть промокод или цифровой продукт, связанный с вашей темой, который посетитель сайта получит в обмен на свои данные. Согласно маркетинговым исследованиям, простая просьба оставить адрес для рассылки выдает конверсию в пределах 1,5 – 2%, тогда как обещание скидок увеличивает данный показатель до 6%.
• Сделать форму понятной для клиента. Чем проще, тем лучше — золотое правило, которое работает и для сбора обратной связи. Не перегружайте этот блок большим количеством полей и постарайтесь объяснить посетителям, зачем им нужно что-то заполнять. Идеальной формулы не существует, но самые конвертирующие формы обычно состоят из трех частей: заголовка, в котором объясняется цель сбора данных, основной части — небольшого текста, в котором будет отражена выгода клиента, и призыва к действию.
• Избегать навязчивости. Если вы используете поп-ап, то форма должна легко закрываться нажатием на крестик, расположенный в правом верхнем углу. Если речь идет о заказе обратного звонка или консультации, показывайте ее только тем посетителям, которые провели на сайте какое-то время. Возможно, они просто не могут найти нужную информацию, и ждут вашей помощи прямо сейчас!
• Персонализируйте формы под разные категории посетителей. Так, на главной странице логично предложить консультацию, а тем, кто уже оформил заказ, — дать возможность оставить отзыв.
• Старайтесь не использовать агрессивную коммуникацию. Большое количество всплывающих окон, обилие форм и частота их показов скорее вынудят посетителя закрыть ваш сайт, нежели воспользоваться услугой или купить товар.
• Регулярно проверяйте работоспособность форм и актуальность своих данных. Помните: от этого зависит количество клиентов, а значит — и ваша выручка.

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