Веб-форма на сайте: отправка, примеры

Здравствуйте!

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

Что такое форма захвата

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

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

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

Виды форм для сайта

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

1. Закрытая форма

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

Закрытая форма

Новое окно

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

2. Открытая форма

Открытая форма сразу показана в развёрнутом виде и чаще всего размещается на первом экране главной страницы или лендинга.

Открытая форма

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

3. Двойная форма

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

Двойная форма

Примеры форм для сайта

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

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

Email-маркетинг продолжает работать эффективно. Один из популярных видов формы — «Подписка на рассылку».

Цель формы — получить email-адрес для дальнейшей коммуникации через рассылки (например, через UniSender или Notisend).

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

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

Подписка на рассылку через соцсети

Подарок в обмен на контакты

2. Заказ обратного звонка

Один из самых распространённых видов формы. Телефонная связь остаётся быстрым и удобным способом коммуникации. Размещайте кнопку «Заказать звонок» рядом с номером телефона в шапке сайта. Форма может открываться как по клику на кнопку, так и по клику на текст-ссылку.

Обратный звонок

Форма захвата — обратный звонок

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

3. Консультация

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

Консультация

Бесплатная консультация

4. Расчёт / калькулятор стоимости

При сложных услугах фиксированная цена на сайте не всегда уместна. В этом случае отлично работает отдельная форма расчёта стоимости.

Расчет стоимости

Можно реализовать расчёт через квиз (конструктор квизов позволяет геймифицировать процесс). Либо просто разместить кнопку «Рассчитать стоимость».

5. Онлайн-консультант

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

Онлайн-консультант

6. Форма входа и регистрации

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

Форма регистрации

Формы вход и регистрация

7. Поп-ап с формой обратной связи

Popup — окно, которое появляется при попытке закрыть вкладку или через определённое время. Главное условие — действительно ценное предложение.

Спец.предложение

Чтобы поп-ап не раздражал, настройте грамотную логику показа.

Фишечки и нюансы

У формы захвата много мелких, но важных деталей, влияющих на конверсию. Разберём их подробнее.

1. Окно благодарности после отправки формы

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

2. Каптча

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

Каптча

Каптча в игровой форме

3. Политика конфиденциальности

Согласно Федеральному закону № 152-ФЗ «О персональных данных», необходимо получать согласие пользователя на обработку данных. Добавьте чекбокс с ссылкой на политику конфиденциальности (по умолчанию галочка не должна стоять).

Политика конфиденциальности

4. Бонус

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

5. Призыв

Используйте нестандартные формулировки призыва к действию. Например, «Хочу также» или «Ещё больше плюсов» вместо банального «Заказать звонок».

Призыв к действию

Необычный призыв к действию

Как должна выглядеть форма захвата

Визуальная составляющая формы сильно влияет на восприятие. Цвет, форма, размер, текст и расположение — всё имеет значение.

1. Цвет формы

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

Цвет формы

2. Цвет кнопки

Кнопка должна быть контрастной относительно фона. Остальные гипотезы по цвету стоит проверять только через A/B-тестирование.

3. Цвет полей

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

Цвет полей

4. Размер формы и её частей

Размер зависит от целевой аудитории. Для взрослой аудитории лучше использовать более крупные элементы.

Размер формы и её частей

5. Поля для ввода

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

Поля для ввода

6. Заголовок и подводка к форме

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

7. Анимация

Лёгкая анимация кнопки при наведении допустима. Слишком активная анимация (постоянные дёргания) будет раздражать.

8. Иконки

Иконки делают кнопку и поля более понятными и приятными для восприятия.

Иконки

Коротко о главном

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

Вся идея качественной формы захвата укладывается в два главных принципа:

1. Забота о пользователе — вот что должен чувствовать посетитель;
2. Мысли пользователя должны совпадать с вашей формой связи.

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