Как создать форму подписки, которая превратит посетителей в лиды?

При создании материала использована статья https://designmodo.com/design-email-signup-forms/

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

Email-маркетинг – это как свидание: если первое письмо скучное, второго шанса не будет. Но чтобы получить этот шанс, нужно сначала уговорить посетителя оставить контакт. В статье – простые правила, которые превратят вашу форму из «стоп-крана» в магнит для подписчиков.

Мобильная версия – не прихоть, а необходимость

Согласно исследованию сервиса Similarweb, на трафик с мобильных устройств приходится 68,6% от глобального количества. Если форма рассылки не адаптирована, и заполнять ее со смартфона неудобно – вы потеряете 2/3 своей аудитории. Точно не нужно использовать всплывающие окна: их одинаково ненавидят и пользователи, и поисковые системы (последние – даже больше, чем плагиат текстов). Кроме того, поля ввода email и других данных не должны быть микроскопическими: посетители просто не смогут заполнить их в мобильной версии.

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

Где разместить форму? Спросите у взгляда

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

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

Выбор правильного места – наиболее простой способ завладеть вниманием аудитории.

Один экран – одно действие

27% посетителей сайтов бросают заполнение формы, если видят рядом один или несколько CTA–элементов, призывающий к действию. А вдруг предложение по соседству более выгодное и срочное?

Представьте, что вы в ресторане, и к вам одновременно подходят 5 официантов с разным меню. Выберете блюдо или уйдете из заведения? Скорее всего, последнее. Поэтому до того, как создать форму подписки, стоит убрать из зоны ее видимости все call-to-action – кнопки: «зарегистрироваться», «купить», «оформить».

Цвет: будьте заметным, но не кричащим

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

• Использовать для формы акцентные оттенки из бренд–бука;
• Располагать края форм рассылок на одном уровне с контентом: плавающие границы и блоки раздражают пользователей.

Шрифты: создавайте иерархию, а не винегрет

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

• Крупный и жирный заголовок с конкретным предложением: например, «Получайте секретные фишки каждую неделю»;
• Описание среднего размера: «Только польза и никакого спама»;
• Мелкий и неприметный шрифт для обозначения политики конфиденциальности.

Поля: меньше – значит больше

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

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

Неотразимая кнопка отправки

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

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

«Плюшки» для параноиков: создаем форму подписки, которую нестрашно заполнять

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

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

Taptop: формы, которые не раздражают

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

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