Форма на сайт. Почти ультимативный гайд

Александр Машков

Руководитель трафик-направления, EMAILMATRIX

«Как генерировать лиды?» — ответ на этот популярный вопрос прост: нужно разместить форму лидогенерации на посадочной странице. Тут-то у многих и возникают проблемы, потому что отличная форма на сайт требует внимательного подхода.

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

Для начала поговорим про…

Местоположение

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

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

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

Кстати, несмотря на то, что мы живём в высокотехнологичном мире, имеем широчайший диапазон устройств для веб-сёрфинга, пользователи всегда обрабатывают информацию выше линии сгиба лучше, чем ниже неё. Разница составляет 84%, если верить исследованию Nielsen Group.

Безусловно, бывают случаи, когда конверсия ниже линии сгиба лучше, чем выше. Но обратите внимание, что популярные компании выставляют формы и CTA именно в первом экране. Например, KISSmetrics:

Окружение

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

Если расположить множество графических элементов и текстов вокруг формы, между ними возникнет трение, которое снизит её конверсию.

Есть отличный способ снизить трение и получить больше лидов.

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

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

Кстати, по поводу читабельности. Исследование Университета штата Вичита доказывает, что белое пространство помогает пользователям читать и понимать прочитанное, хотя и снижает скорость чтения.

Про поля

С точки зрения полей в форме, есть 3 ключевых момента:

• минимально необходимое количество полей;
• проверка корректности введённых данных;
• фокус на активном поле.

Разберём подробнее каждый из них.

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

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

Даже незначительное уменьшение количества полей позволяет очень сильно повысить конверсию. Например, ImageScape уменьшили контактную форму с 11 до 4 полей и увеличили коэффициент конверсии на 120%.

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

Проверка полей

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

Не стоит забывать, что если уж вы делаете проверку, следует показывать пользователю рекомендации по устранению ошибок.

Фокус

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

Поле, в которое пользователь вводит данные, следует подсвечивать.

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

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

Заголовок

Брайан Кларк, основатель Copyblogger, как-то сказал, что 8 из 10 человек непременно прочитают ваш заголовок, а плохой заголовок сделает контент бесполезным. Пользователи ждут, что заголовок будет отражать суть последующего контента. Таким образом, заголовок очень важен для конверсии.

Если в заголовке нет уверенности, следует взять несколько вариантов и протестировать (впрочем, как и всё в интернет-маркетинге).

Кнопка и CTA

Если CTA есть, он должен быть сильным и запоминающимся. Сильный CTA побуждает людей нажимать на него. Он остаётся в памяти пользователя, даже когда тот покидает целевую страницу.

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

Хороший пример CTA формы на сайте — CrazyEgg:

Пример ещё лучше — сайт Grammarly. Пускай здесь и нет формы, но сама кнопка и CTA очень мощные и функциональные:

Одним CTA Grammarly преследуют сразу несколько целей:

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

Использование такой информативной кнопки вместе с формой значительно повысит конверсию последней.

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

Вот ещё несколько примеров, которые могут быть полезны:

• Получить бесплатное [Предложение];
• Подписаться на [Предложение];
• Зарегистрироваться на [Вебинар/Событие] сейчас;
• Да, я хочу [Предложение];
• Загрузить [Предложение];
• Сохранить своё место на [Вебинар/Событие].

В целом, можно придерживаться лишь 2-х простых правил:

• CTA — всегда глагол в неопределённой форме;
• CTA должен отражать то действие, которое произойдёт после нажатия на кнопку.

Кстати, у формы должна быть одна кнопка. Всегда. Если вы предлагаете пользователю совершить какое-то дополнительное действие (загрузить файл, узнать подробнее об услуге), эти кликабельные элементы должны быть менее выразительными:

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

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