Как создать конверсионную форму заявки на сайте

Спикер: Анна Назарова, ведущий специалист отдела разработки агентства Convert Monster. Сегодня мы поговорим с вами о целевых действиях на сайте, о CTA. Теперь немного о том, что это такое и как расшифровывается. CTA (Call to action) — это призыв к действию, его используют в формах заявки, в которых пользователь должен совершить какое-то целевое действие в обмен на какую-то ценность. То есть он оставляет свои контактные данные в обмен на какую-то выгоду для него. На предложенном к рассмотрению скриншоте первого экрана, вы видите заголовок, в котором содержится:

• эмоция «Обретите обворожительную улыбку!»;
• выгода от сотрудничества с компанией/взаимодействия с продуктом «Бережная имплантация от 15 000 рублей»;
• подтверждается ещё один вид выгоды «гарантия до 5 лет».

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

Для чего на посадочных страницах существуют формы обратной связи?

Дело в том, что типичная ошибка предпринимателя, что посетитель сразу должен покупать. Вот он зашел на сайт, ознакомился с предложением и сразу приобретает ваш продукт или заказывает услугу. В первую очередь, это желание исходит из того, что предприниматель желает получать деньги с первого экрана, используя кнопку «Купить» или «Заказать». Но, проблема в том, что чаще всего посетитель не готов сразу сделать такой тяжелый шаг и его нужно «подогреть» до покупки. Именно поэтому мы советуем использовать в качестве инструментов бесплатные консультации, получение подарка, каталога и тому подобное. Многие начинающие разработчики посадочных страниц или просто клиенты, тратят большие деньги на крутой дизайн, на убийственные тексты, готовят профессиональные фото- и видеоматериалы для своего лендинга. Но при этом они забывают о «волшебных» кнопках, благодаря которым посетитель становится лидом. Поэтому нельзя недооценивать важность следующего шага — целевого действия пользователя на сайте. Под разные тематики подходят разные следующие шаги, но есть три обязательных правила грамотного CTA:

• он должен быть естественным и логичным;
• он должен нести в себе ценность для пользователя;
• он должен быть легким.

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

Пошаговая разработка формы заявки для первого экрана

Переходим к делу: с помощью программы Balsamiq Mockups начинаем работу.

1. Для удобства мы предлагаем пронумеровать формы (пример №1) и переходим в раздел «Текст», выбираем элемент «Text Area» и определяемся с размером. Примерно так будет изначально выглядеть форма заявки:

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

1. Далее мы берем элемент «Text input» создаем поля ввода данных: например, призыв «Введите имя», а в соседнем — пользователь указывает телефон. Максимальное количество полей ввода данных на первом экране должно быть не более двух.
2. Теперь создаем кнопку: переходим в раздел «Buttons» и выбираем сам элемент. Кнопка должна быть отличной по цвету от других элементов, например, красной. Выбираем направление текста на кнопке. Текст на кнопке должен быть релевантен тексту в заголовке, чтобы это было логично для пользователя. То есть если он хочет получить бесплатный эскиз проекта, то кнопка должна быть не «Отправить», не «Заказать», а «Получить» или «Получить эскиз». Кнопку мы создали.

Так же мы можем внести некоторые уточнения: например, что менеджер свяжется с вами в течение 2-х минут. Ещё лучше, если не менеджер свяжется с клиентом, а непосредственно человек, чья должность напрямую связана с разработкой эскиза проекта квартиры. Например, архитектор или ведущий специалист по дизайну — варианты могут быть разными, но в любом случае важна сама конкретика. Тем самым клиент понимает, что ему перезвонит не просто оператор call-центра, а тот, с кем он впоследствии будет взаимодействовать. При разработке призыва к действию очень важно понимать потребности пользователя и на их основе давать конкретные предложения. Это может быть представлено в виде цен, фактов о свойствах, идентификации. Конкретика всегда вызывает доверие и закрывает основные возражения потенциального клиента. На нашем примере мы видим, что выгодой для клиента является бесплатный эскиз проекта, потому что в основном на рынке эскиз проекта — это услуга, которая стоит денег. В данном случае мы предлагаем ее бесплатно. Вот что у нас получилось:

Пошаговая разработка формы заявки для других экранов

Попробуем разработать другой пример формы заявки, она будет под №2: здесь уже будет форма заявки не для первого экрана, где-нибудь в середине в страницы. Тематику можем оставить той же: разработка дизайна интерьеров. Следующим шагом для пользователя, который уже познакомился с предложением, может быть получения чек-листа и помощь в подборе мебели или материалов в доме. Сформулируем призыв к действию, руководствуясь правилом — идти от боли клиента. Например: «Не знаете как будет выглядеть интерьер вашей квартиры? Получите чек-лист из 18 советов…». Варианты могут быть разными. В данном случае получилось так: не знаете как будет выглядеть интерьера вашей квартиры? Получите чек-лист из 18 советов или 18 пунктов, которые раскроют в себе информацию как правильно подобрать цветовую гамму в интерьере. Чек-лист подразумевает, что пользователь не будет связываться с кем-то по телефону, пойдет цепочка прогревающих писем. Первое письмо — это будет чек-лист на почту, после чего пойдёт прогревающая цепочка с актуальной и полезной для пользователя информацией. Поэтому в данном случае вместо номера телефона мы просим ввести в поле e-mail пользователя. Соответственно кнопка будет «Получить чек-лист». Поле «Введите имя» можно не использовать, но в данном случае оно используется для персонализации письма в рассылке. Вот что получилось в результате с формой заявки №2: Также для формы заявки можно использовать акцию. Попробуем создать простую форму акции. Например, «До 30 сентября получите скидку 30% на ХХХ» — так мы предлагаем воспользоваться ограниченной скидкой на какую-то вашу услугу или продукт. Мы можем в подзаголовке расшифровать: «Оставьте заявку на получение скидки и архитектор свяжется с вами в течение 15 минут». Сам подзаголовок можно доработать, но главное, что пользователь понимает: он оставляет заявку на получение скидки и он понимает, кто и когда с ним свяжется. Мы вместили сразу три выгоды и дали ценность этой формы для пользователя сразу в одном предложении. В этой заявке он вводит свое имя и телефон. Также акция может звучать так: узнайте стоимость разработки эскизного проекта вашей квартиры и до 30 сентября получите скидку на разработку проекта в 30%. В итоге у нас получилось следующее: Сегодня мы научились составлять формы заявки: у нас их три, две для главного экрана и одна для размещения где-нибудь в середине страницы для пользователей, которые еще сомневаются. Заказать landing page! Подпишись и следи за выходом новых статей в нашем монстрограмме Остались вопросы? Не нашли ответ на интересующий Вас вопрос? Или не нашли интересующую Вас статью?  Задавайте вопросы и темы статей которые Вас интересуют в комментариях.