S-p.su

Антикризисные новости
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Форма для лендинга

17 примеров лендинг пейдж с не/оптимизированными лид-формами

Можно долго рассуждать на тему, насколько важна лид-форма для любой лендинг пейдж, но вместо этого приведем один красноречивый пример: доходы Expedia увеличились на $ 12 000 000 после того, как команда маркетологов убрали одно избыточное поле из формы. Всего одно поле! Вот он — эффект бабочки.

Конечно Expedia это империя с огромным входящим трафиком, которая занимает 511 место по популярности в мире, где даже незначительное изменение коэффициента конверсии влияет на многомиллионный cash flow.

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

В этом посте мы сперва поговорим об основах оптимизации лид-форм , а потом рассмотрим 17 конкретных примеров.

Что такое конверсия формы?

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

Основные правила оптимизации лид-формы :

1. Минимизируйте усилия посетителей. Чем меньше у формы полей, тем больше шансов, что ее заполнят. Оптимальное количество — от 3 до 5. Обязательных для заполнения — и того меньше. Если вы не готовы жертвовать точностью данных во имя конверсии, тогда разбейте процесс на несколько шагов (multistep).

2. Гарантируйте безопасность данных. Люди, как правило, с неохотой делятся контактными данными. Чтобы минимизировать их опасения, добавьте к форме какой-нибудь «антиспамовский» значок. Либо напишите что-нибудь вроде: мы не передаем данные клиентов третьим лицам.

3. Создайте манящую кнопку. Забудьте про слово «отправить». Лучшие надписи для кнопки — это призывы к действию. Например: «Скачай приложение», «Загрузи сейчас», «Зарегистрируйся», «Начни прямо сейчас»

4. Не используйте CAPTCHA совсем.

Напомним, CAPTCHA -это защита от роботов. Если она присутствует на вашей лендинг пейдж по умолчанию, то рекомендуем ее убрать — она раздражает. Некоторые применяют smart CAPTCHA, которая появляется лишь тогда, когда пользователь проявляет подозрительную активность: например, отправляет множество запросов с одного IP.

5. Размещайте форму «над или выше линии сгиба». Тепловые карты показали, что самое «лакомое» место на странице — правый верхний угол, поскольку первый взгляд посетителей устремляется именно туда. Разумеется, есть примеры, когда «переезд» лид-формы с «первого экрана» только увеличивал конверсию. Но все-таки традиционно ее до сих пор размещают «над сгибом». Есть сомнения? А/ Б-тестирование в помощь, друзья.

6. Позаботьтесь об окружении. Ваша форма должна «дышать». Не стесняйте ее другими элементами, кроме направляющих к ней (стрелки, направление взгляда и т. д. ). Рекомендуем вам провести блинк-тест (от англ. blink — мерцание): включить монитор перед человеком, который впервые видит ваш лендинг, на 6 секунд, а потом спросить, что он заметил. Если в списке замеченных элементов не оказалось лид-формы и CTA, значит, нужны доработки.

Читать еще:  Верстка сайта фриланс

А теперь перейдем к разбору примеров.

Опрятная форма в классическом оформлении. Располагается «над сгибом», справа от промо видео. Мудро использованы обязательные поля — только email. Однако оформить форму можно было бы более модно. 🙂

Приятные цвета, бодрый призыв к действию, изящный указатель (стрелка). 5 баллов!

Эта форма призывает убить сразу двух зайцев: создать аккаунт (create an account) и запросить коммерческое предложение (request a proposal). Явный перебор, равно как и излишнее количество полей.

Две тесно соседствующие формы на одной целевой странице явно вводят в когнитивный диссонанс. Запомните: один лендинг — одно целевое действие.

Это пример мудрого использования бокового пространства. Гарантийная печать и альтернативные способы связи внушают доверие. Также стоит отметить информативный заголовок и ссылку на политику конфиденциальности. К недостатками можно отнести набившее оскомину слово «отправить» (submit) и разбивку полей на две колонки — лучше использовать одну.

Это форма пугает! 10 обязательных полей, включая телефонный номер. И даже не уточняют, в какое время можно позвонить. Ужасный пример.

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

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

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

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

Стройная форма без лишнего жира. Возможно, даже слишком стройная. Смущает одно — необязательное поле с email-адресом . Есть риск потерять контактные данные.

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

Два главных правила всплывающих форм: четко обозначенная кнопка выхода («крестик») и веская причина оставить контактные данные. Passive Club прекрасно выполнил оба условия.

Можно ли разместить форму подписки на изображении? Да, посмотрите под слоган «Stay Smart». Хороший вариант ненавязчивой формы, которая выполняет свою работу и не уродует эстетический облик страницы.

На этом примере кнопка с надписью «Submit» (отправить) вводит в заблуждение. Гораздо понятнее будет «Подписаться».

Web Traffic ROI

В этом примере к форме подключен счетчик загрузок. Удачное дополнение.

Big Idea Mastermind

Эту форму проще заполнить, чем игнорировать. Сочный дизайн, мощный призыв, стрелка-указатель — все это вместе создает взрывоопасную смесь, мотивирующую к конверсионному действию.

А теперь самое время присмотреться к своим формам. Какие советы возьмете на заметку? Отпишитесь в комментариях ниже.

[Чек-лист] 11 простых рекомендаций, повышающих конверсию заявки на Landing Page

Можно бесконечно тестировать оффер, менять изображение на первом экране или «подгонять» выгоды под клиента, но какой в этом толк, если взаимодействия с формой не происходит?
Статистика показывает, что в 20% случаев причина недостаточной конверсии посадочной страницы кроется не столько в плохом УТП или отсутствии целевого трафика, сколько в небрежном и непродуманном оформлении формы заявки.
Посетитель не желает оставлять свои контактные данные, «бросает» форму и уходит. Вы теряете потенциальных клиентов, а значит и доход.
Почему так происходит и как повысить конверсию формы заявок?

Читать еще:  Etxt ru биржа копирайтинга

2 причины плохой «заполняемости» форм:

  • неграмотное оформление формы заявки
  • ее непродуманный функционал

В статье приведен простой чек-лист, с помощью которого вы сможете легко проанализировать формы на landing page. Для работы я рекомендую использовать 4 инструмента Яндекс.Метрики: карту кликов, карту скроллинга, аналитику форм и Вебвизор.

Форма заявки должна быть видна на первом экране без «прокрутки»

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

Рис.1 Пример неудачного расположения формы заявки

Проверяйте все браузеры

Нужно проверить, как работает форма заявки во всех браузерах, и это стоит протестировать отдельно! Если функционал неисправен, не будет результата, данных для анализа и выработки рекомендаций.

Количество полей должны соответствовать поставленной задаче

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

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

Рис.2 Пример дополнительного поля, решающего проблему клиента

Правило простое – уделите внимание удобству заполнения этих форм:

  • используйте подсказки (например, «маску» для телефонных номеров);
  • сделайте отправку формы возможной без заполнения всех имеющихся полей;
  • ставьте адекватные цели – например, не запрашивайте на подписной странице контактный телефон, если собираете e-mail базу для рассылки. Посетители не станут заполнять 5 полей, чтобы просто получить демо-версию или каталог.

Используйте разные способы получения контактных данных

Отталкивайтесь от особенностей продукта или ниши. Дайте возможность связаться с вами по телефону, e-mail или чату для консультации. Учитывайте поведение клиентов – кому-то легче сразу позвонить и обговорить условия, в некоторых случаях (получение КП) не обойтись без взаимодействия с формой.

Закрытая или открытая форма?

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

Правила оформления полей в поп-апе будут те же:

  • Будьте последовательны. Форма должна быть максимально простой для заполнения.
  • Придерживайтесь порядка. Первыми располагайте поля, которые заполнить проще всего (например, «имя»).
  • Сформулируйте четкую выгоду. Объясните, зачем посетителю нужно заполнить форму и что он получит.

Рис.3 Пример хорошей «подводки» к закрытой форме заявки

Читать еще:  Графический редактор профессия

Не используйте шаблонные фразы!

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

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

Рис.4 Пример удачной формы взаимодействия

Призывайте к конкретному действию

Уходите от формулировки «отправить заявку». Гораздо лучше сделать кнопку с описанием конкретного результата (например, «получить КП» или «рассчитать стоимость»). В идеале текст кнопки должен частично дублировать «подводку».

Рис.5 Формы заявки с конкретным призывом к действию и четким результатом

Привлеките дополнительное внимание

Используйте графические направляющие. Самый простой вариант — «освободить» пространство вокруг формы и направить взгляд посетителя при помощи указателя или стрелки. Так форма станет более заметной и сильнее будет притягивать к себе внимание.

Рис.6 Прямое указание на кнопку

Заставьте изображение (фотобаннер первого экрана) работать на СТА

В случае, когда форму невозможно подчеркнуть графическими элементами или сделать кнопку крупнее и контрастнее, «обратите» на нее внимание пользователя посредством изображения. Грамотно подберите фото и направьте взгляд посетителя в нужном вам направлении.

Рис.7 Взгляд девушки обращает ваше внимание на форму

Изучайте взаимодействие пользователей с формами

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

Поблагодарите клиента – это важно

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

Рис.8 Грамотно проработанная страница благодарности

Выводы

  1. Взаимодействие с формой — это пик коммуникации лендинг пейдж с клиентом. Прежде чем тестировать конверсионные элементы вашей посадочной страницы, проанализируйте ваши формы СТА, сверяясь с нашим чек-листом.
  2. Проверяйте отправку данных с разных устройстви разных браузеров. Локальные баги отдельных версий случаются гораздо чаще, чем можно было бы предположить.
  3. В обязательном порядке проводите аналитику форм на предмет выявления полей, с которых уходят клиенты, чтобы понимать, почему они уходят и как можно это исправить.
  4. Перед внесением изменений и тестированием форм считайте количество уже полученных заявок, чтобы получить реальную картину достигнутых после внесения доработок результатов.

Будьте во всеоружии и опережайте своих конкурентов. Конверсионных лендингов вам!

Ссылка на основную публикацию
ВсеИнструменты 220 Вольт
Adblock
detector