Форма обратной связи для лендинга: Создание формы обратной связи для лендинг пейдж

Форма обратной связи на лендинге и ее особенности — LDM & Co

Попробуйте представить, что кто-то из пользователей Яндекс, Google или Вконтакте оказался на лендинг пейдж. Задача владельца бизнеса теперь попытаться

превратить этого посетителя лендинга в совершенно полноценный лид — в контакты потенциального «горячего» клиента (или даже в уже заплатившего деньги клиента).

Каким образом это можно сделать?

Любой нормальный лендинг пейдж обладает специальным инструментом — целевым действием. В пределах технологии лидогенерации мы выделяем для лендинга 3 вида целевого действия:

• телефонный номер, посредством которого лендинг-посетитель сможет связаться с менеджерами по продажам
• онлайн-консультант, которому посетитель в онлайн-чате сможет задать свои вопросы
• форма обратной связи на лендинге, где посетитель сможет сделать в любое время суток полноценную заявку (хоть в 2 часа ночи!) не общаясь с менеджером

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

К примеру, ниша по монтажу натяжных потолков получает 90% лидов со звонков. Ниша с морскими перевозками 50% лидов в виде заявок посредством формы, другие 50% — из чата с онлайн-консультантом, а звонков почти нет. Ниша с детективными услугами 60% заявок — чат с онлайн-консультантом, звонков очень мало.

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

Форма обратной связи на лендинге — 4 характерные ошибки:

1. «Оставьте свое сообщение»

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

2. «Оставьте ваше имя и номер своего телефона»

Хозяин бизнеса или его лид-менеджер спрашивают у посетителя его имя, телефонный номер и… больше ничего. Странно? В итоге менеджеру по продажам необходимо звонить в неизвестность, не имея понятия, что там за «фрукт» сделал на лендинге заявку. Может это обычный зевака? Как-то работать с подобным лидом несколько трудновато.

3. Форма-невидимка 

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

4.  Безымянная форма 

Другая грубейшая из ошибок предпринимателей — это отсутствие у формы обратной связи внятного заголовка. Посетитель лендинга в итоге точно не знает, на что он отправляет свою заявку. Лишь на расчеты цены продукта? Или же на бесплатный вызов замерщиков? А, может, для заказа продукта целиком? Ему это неясно.

Какой должна быть форма обратной связи на лендинге:

Мы выделяем два основополагающих аспекта «работающей» формы обратной связи. Условно их можно назвать «Правилом двух «К»

— Контекстность, при которой форма обратной связи обязательно должна находиться в контексте предлагаемого на лендинге продукта. Ничего абстрактного, типа «Оставьте нам сообщение»;

— Контрастность, где ваша форма обратной связи мгновенно должна броситься в глаза посетителям лендинга. То есть, она должна весьма ярким пятном и буквально светиться на общем фоне лендинга.

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

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

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

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

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

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

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

QForm — конструктор форм обратной связи

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

Кроме того, подобные ответы полнее могут раскрыть сервис, ведь кто еще знает лучше все преимущества продукта, как не команда разработчиков.

---

В QForm проработано всё: от дизайна до законодательной базы

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

Со временем наработки и идеи на эту тему вылились в большой проект. Мы подумали — зачем каждый раз проходить полный путь от создания формы до её интеграции, ведь можно сделать единый инструмент по работе с лидами, который будет делать это за нас. Таким инструментом стал QForm.

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

Прямо бесплатно?

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

Своя CRM-система

Некоторые сервисы предлагают на выбор многочисленные интеграции или простую отправку заявок на почту. Мы, кроме этого, разработали лёгкую в освоении CRM внутри QForm, которая позволяет быстро обрабатывать заявки: определяется их источник (сайт и тип трафика). У обращений есть статусы, комментарии, сортировка по UTM меткам и другим нужным фильтрам. Сами сайты, группы сайтов и непосредственно формы можно назначать пользователям и группам пользователей с разным уровнем доступа. Ограничений нет.

Легко использовать

Любой функционал конструктора или CRM не требует от пользователя специальных навыков или долгого вхождения в тему. А значит QForm подойдёт для работы и вебмастерам и любому другому человеку, работающему с сайтом.
Подстраивается под любой дизайн

Адаптивный дизайн форм — ещё одна интересная фича, которая есть только у нас. Любым элементам созданной формы можно назначить классы оформления, которые уже есть на сайте и новая форма будет отрисовываться на сайте уже в общем дизайне.
Достаточно посмотреть названия CSS-классов на сайте и прописать их нужным полям — формы автоматически будет отрисовываться в заданном на сайте дизайне.

Законодательство

Мы не только учли все технические требования к формам, но и позаботились о юридической безопасности. QForm полностью соответствует законам РФ — принятие соглашения об обработке персональных данных настроено по умолчанию и включается одним кликом.

Все обращения хранятся на российских частных серверах, передаются только по HTTPS и не раскрываются третьим лицам.

Интеграция

QForm интегрируется с известными CRM и АТС, мессенджерами. Легко настраивается отправка достижений целей в Google Analytics и Метрику, есть возможность добавить свой Java-код.

Уже сейчас QForm хорошо конкурирует с другими конструкторами. Но на этом мы не остановимся. В планах развить сервис до масштабного маркетингового инструмента. В следующих обновлениях появятся квизы, мини-сайты на нашем сервере для сбора обращений без сайта (например, из инстаграма) и многое другое. И весь этот основной функционал по-прежнему останется бесплатным.

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

---

Как видите, сервис действительно интересный и заслуживает внимания. Вот так выглядит визуальный редактор на момент написания статьи:

Достаточно легко и интуитивно понятно все настраивается. А для добавления на сайт, как обычно, просто добавляем скрипт, который генерируется на последнем шаге создания формы. А как вам сервис?

Правильная структура лендинга 2020: список блоков

Первый экран лендинга

Лендинги могут быть очень длинными. Вот пример посадочной страницы о франшизе Додо Пиццы:

Пример лендинга франшизы

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

Небольшой лендинг по продаже курсов английского языка

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

Заголовок, подзаголовок и надзаголовок

Хороший первый экран отражает не только суть оффера – предложение, но и раскрывает решение проблемы. Послание не должно быть сложным. Понять его нужно с первого взгляда. Для этого на первый экран помещается заголовок.

Пример размещения заголовков

Нет заголовка – нет продажи. Не делайте заголовок интригующим. Так вы не превратите посетителей в клиентов, а только выкинете добрую их половину. Сделайте заголовок максимально простым и понятным, отражающим суть проблемы целевой аудитории.

Подзаголовок – это ответ на вопрос пользователя «Что я получу», либо пояснение заголовка.

Элементы

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

Пример оформления первого экрана лендинга

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

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

Логотип

Логотип на лендинге не нужен, только если он никак не сказывается на продажах. Известным же брендам стоит его использовать. Например, Додо Пицце:

Логотип на лендинге

Сразу понятно, какая компания предлагает купить франшизу. Также трудно представить лендинг компании Apple, где нет их фирменного логотипа. Что же касается малоизвестных компаний, то помещать или не помещать логотип на лендинг – дело десятое.

Кнопки соцсетей

Вопрос с кнопками соцсетей спорный, и часто на лендинге от них отказываются. Социальные сети – это внешние ссылки.

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

Небольшой процент подобных сценариев – это уже потерянные заказы и недостаточная прибыль. Не хотите этого? Делайте как здесь:

Пример размещения контактов и формы обратной связи

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

Форма заказа

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

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

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

Оформление первого экрана лендинга по продаже популярного товара

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

Реклама

Лендинг должен быть на 100% релевантен рекламе, с которой пришел посетитель. Допустим, вы продаете посудомоечные машины и выделяете две группы ЦА: домохозяйки и холостые мужчины. У вас два креатива под каждую группу. Для домохозяек преимущества – удобство пользования, много режимов и скорость работы. Для холостяков – невысокая цена, экономия времени и надежность машины.

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

Дизайн

Не делайте лендинг слишком сложным, это понизит конверсию. Дизайн должен быть простым и лаконичным. Фон – простой, не затмевающий лид-форму и заголовок. Товар или услуга изображены детально, чтобы у пользователей не возникло вопросов.

Пример дизайна Landing page

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

Изображение товара

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

Пример удачно подобранного изображения для лендинга по продаже и монтажу окон

Оффер

Торговое предложение – это то, ради чего создается лендинг. Он показывает преимущества товара и причины его приобрести. Сделайте оффер простым и понятным. Клиент не должен вчитываться. Всего за пару секунд он должен осознать суть предложения. Вот пример оффера:

Пример оффера

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

• Качество. Крепкий итальянский стол из красного дерева.
• Скорость. Доставка мебели в течение суток.
• Стоимость. Скидка 30% на второй товар.

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

Продающий слайдер

На многих лендингах слайдер используется, чтобы показать сразу несколько товаров. Это неправильно. Так нарушается важнейшее правило построения посадочной страницы – «1 продукт – 1 лендинг».

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

Пример слайдера

Использовать слайдер для перечисления преимуществ не стоит. На большинстве лендингов это работает плохо.

Список выгод

Если на первом экране остается место, то можно поместить небольшой список выгод. Ключевое слово – небольшой. Тут лучше сработают числа:

Пример оформления списка выгод

Не повторяйте выгоды, которые обозначили ранее в оффере. Либо раскройте их чуть подробнее, совместив с другими преимуществами.

Стикеры

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

Стикеры на лендинге

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

Типовые ошибки первого экрана лендинга

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

Нет формы заявки

Есть стикер, уведомляющий о немецком качестве, но нет открытой формы заявки.

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

Награмождение офферов

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

Пример неудачного дизайна лендинга

Это создает впечатление недоработанности, которое влечет догадки о низком качестве рекламируемого продукта.

Тело лендинга

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

О проекте

Функция этого элемента – понятно и развернуто рассказать пользователю о том, что же вы предлагаете.

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

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

Логично расположить этот блок сразу после главного экрана. Так пользователь убедится, что попал на нужную страницу и ему тут помогут.

Преимущества

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

Преимущества товара

Не ставьте иконки ради иконок. Они должны быть особенными. Каждый элемент на сайте нужно тщательно продумать, всему нужна своя роль.

Сценарии использования / Ход работ

Сценарии демонстрируют примеры использования продукта или сообщают о том, кому пригодится товар или услуга. Отличайте сценарий от списка выгод. Выгоды – это то, что получит клиент по итогам покупки, а сценарий или ход работ – это то, как заполучить покупку.

Пример сценария

Форма подачи должна быть такая же, как и в списке выгод. Поставьте заголовок, описание и картинку.

ЦА

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

Пример описания целевой аудитории для некоторых типов продуктов или услуг

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

Тарифы и цены

Цену можно указать на главном экране. Но если там нет места, либо прайс-лист нужно раскрыть чуть подробнее, то поместите на лендинге отдельный блок с ценами. Оформите его максимально просто:

Блок с ценами

Выделите один популярный тариф. Так человеку не придется сравнивать и выбирать подходящий вариант.

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

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

Пример призыва к действию на странице лендинга

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

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

Форма регистрации повторяется на лендинге 3-4 раза. Первый раз – на главном экране, затем в середине и в конце. Оформите форму в зависимости от того, какую цель преследуете. Если на лендинге продается вебинар, то соберите подписки. Если сайт продает конкретный товар, то ваша цель – получить контакты.

Пример формы регистрации

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

Отзывы

Впечатления разных людей помогают принять решение. Если другие пользуются и им нравится, то лендингу можно доверять.

Отзывы на лендинге

Самый простой вариант – просто поместите имена и фото клиентов вместе с отзывами. Можно поэкспериментировать и добавить ссылки на посты с отзывом в инстаграм, видеорецензии и пр. Как вы смотивируете клиентов оставить такие отзывы – зависит только от уровня фантазии.

Партнеры

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

Блок с партнерами

Видео

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

Видео пригодится, если услугу или товар тяжело описать или представить в виде фотографий. Например, вы продаете щенков. Снимите про них видео, покажите животных с разных сторон.

FAQ

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

Оформление FAQ на лендинге

Заранее соберите все страхи и сомнения клиента, переформулируйте их в вопросы и предоставьте развернутые ответы.

Контакты

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

Помимо телефона, группа контактов включает карту, адрес и данные о ИП или юридическом лице.

Команда

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

Сделайте фото команды в одном стиле и разместите их на лендинге

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

Факты в цифрах

Цифры работают хорошо. Воспринимаются они легко и привлекают внимание. Вот пример их использования на сайте:

Использование фактов в цифрах

Вот только использовать цифры нужно с умом. Например, есть предложение «Поставили 150 тыс. тонн щебенки для 3 тыс. км дорожного полотна за 10 лет». Вызывает ли оно у пользователя какие-то эмоции? Вряд ли, потому что ничего не понятно. Представленные цифры слишком большие, осознать их в реальности трудно. Ситуацию можно исправить так: «Поставим до 10 тыс тонн щебенки всего за 24 часа». У пользователя уже есть представление о необходимом количестве, он сравнивает условия и делает заявку. Вывод – цифры не для красоты, а для клиента.

Сертификаты

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

Портфолио

Если у вас есть примеры успешных кейсов или качественно выполненных работ, поместите их на лендинг в формате карусели. Достаточно будет 3-4 фотографий с текстом.

Если вы адвокат, то оформить портфолио можно нестандартным способом. Например вот так:

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

Счетчик

Еще один прекрасный элемент, который поможет ускорить оформление заявки. Выглядит он так:

Счетчик на лендинге

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

Всплывающие окна

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

Пример всплывающего окна на лендинге

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

Виджет обратной связи

Виджет обратной связи всегда рядом. Находится он в нижнем правом углу. Если пользователь захочет задать вопрос – он просто вбивает его в это окошко.

Виджет обратной связи

Как оформить этот виджет, решать только вам.

Футер лендинга

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

Пример оформления футера лендинга

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

• Информация об авторских правах.
• Контакты.
• Условия обслуживания.
• Отзывы и обратная связь.
• Карта.
• Вторичная навигация.

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

SmartLid — бесплатный скрипт обратного звонка

Всем привет. Давно уже не писал в блог. Совсем не было времени. Работа, переезд, снова работа. В общем совсем «зашивался» и к вечеру уже не оставалось никаких сил. Когда появлялась минутка, тратил ее на обучение, разбор почты, ответы на сообщения в ВК и т.д., а также на обучение js.

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

• Обратный звонок
• Контактная форма

И другие элементы, которые могут использоваться на landing page и влиять на конверсию. Вот не полный список возможностей для контактных форм, которых планирую реализовать:

• Подключение до 3 кнопок.
• Выбор, между использованием иконического шрифта FontAwesome или svg, png, jpg иконками.
• Редактирование placeholder у полей.
• Редактирование заголовков форм.
• Редактирование иконок форм и кнопок, вызывающих форму.
• 3 положения основной кнопки.
• Настройка внешнего вида (несколько тем оформления).
• Возможность сделать поля обязательными для заполнения.
• Возможность подключения reCaptcha.
• Передача utm меток.
• Передача в сообщении города пользователя.
• Возможность вызова формы своей кнопкой расположенной в любом месте на сайте.
• Настройка цели для Метрики.
• Передача файла.
• Отправка письма на несколько адресов.
• Автоматическая отправка письма пользователю.
• Автоматическое всплывание формы, через время.
• Возможность подключения своих форм.
• Связь с CRM Битрикс 24.

Буду рад услышать ваши пожелания, замечания и критику. Я в курсе, что скрипт не идеален с точки зрения кода. Начал я с того, что все делал на чистом js, так как хотел обойтись без фреймворков. Потом, часть переделал с использованием jQuery. Все будет дорабатываться и улучшаться по мере изучения, но буду рад услышать ваши советы о том, как уменьшить потребления памяти и улучшить стиль кода.

Почему я решил сделать SmartLid?

Мне показалось, что подобные скрипты довольно популярны, так как нашел несколько готовых и успешно используемых инструментов. Например, callme.js. Кроме того, недавно писал статью о корзине для Landing page, которую сделал один парень и выложил в сеть. Так вот, оказалось, что файлы отвечающие за отправку письма лежат у него на сервере. И сам был свидетелем того, что сайт у него упал больше чем на сутки, и все пользователи не могли принять заказы. Для кого-то эта ситуация могла стоить неплохих денег. Я, в сою очередь, планирую сделать скрипт, в который будет полностью находится на вашем сервере и подобных ситуаций возникать не будет.

К версии 1.0 надеюсь сделать полноценный инструмент для повышения конверсии на landing page, поэтому и назвал скрипт — SmartLid.

Всегда актуальная версия скрипта будет находится по адресу:

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

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

Форма обратной связи для лендинга

Обратная связь с клиентом

Нужно понимать, что за такую ювелирную работу нужно будет заплатить, но плата того стоит. Нужно обсудить все вопросы по созданию, это повлияет на стоимость работы и на лендинг в целом. Создавая целевую страницу нужно учитывать все возможные мелочи, которые могут привлекать внимание людей: от красоты, до удобства пользования. К тому же, нельзя забывать о психологии и подсознании. Многие решения принимаются подсознательно. И покупка товара – не исключение. Если построить правильную логическую цепочку, которая будет содержать в себе решение проблемы человека, описание этого решения, убеждение, что это решение верное и поможет ему, концентрация на этой цели, подталкивание к действию и само действие, то получится превратить большую часть посетителей в клиентов. Причем, не важно какое будет целевое действие страницы – продажа, подписка на рассылку, приобретение контактных данных посетителя и так далее.

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

Поскольку личное общение и удовлетворение потребностей клиента очень важно для развития хорошей репутации. Созданию такой формы всегда уделялось отдельное внимание. Использование шаблона, на котором установлена обратная связь сильно ограничивает функционал страницы, потому данная форма всегда вписывалась в основной код вручную с соблюдением всех требований SEO. К дизайну такой формы тоже подход особый: она должна быть расположена на видном месте, она должна быть интуитивно понятной и простой в использовании, она не должна спрашивать у клиента много лишней информации, достаточно электронной почты и имени. Расположение влияет на ту категорию людей, которые привыкли быстро искать необходимую информацию и использовать ее. Некоторым достаточно пары секунд пребывания на странице, чтобы оценить будут ли они пользоваться ее услугами или нет. Потому, расположение должно быть таким, чтобы даже такие пользователи успели заинтересоваться предложением и оставить контакты.

Очень важно, чтобы страница была проста в понимании, потому как не все пользователи сети интернет опытны в этом деле. Для охвата аудитории опытной и не очень, нужно чтобы было интуитивное понимание последовательности действий для совершения операции. И не менее важно – количество информации. Это влияет на подсознательный уровень доверия. Если страница спрашивает много контактов: и номер телефона, и электронную почту, номер карты, адрес и так далее. То может возникнуть ощущение, что это страница сделана мошенниками. А это сильный удар «под дых» репутации сайта в целом. Потому – информации нужно спрашивать ровно столько, сколько будет достаточно для связи с клиентом и уточнения его пожеланий и выполнения условий сделки. Лендинг в целом – простой сайт, созданный сложным образом. Он простой для пользователей, но сложный для создания разработчикам. Однако, такая работа стоит затраченных усилий!

Обратная связь для лендинга

Среди основных элементов Landing Page можно выделить блоки с контактными данными и с запросом обратной связи. Эти блоки отличаются повышенной важностью. В первую очередь, следует понимать, что потенциальному потребителю часто недостаточно информации, представленной на лендинге – некоторые лучше всего воспринимают информацию со слов живого человека, чем с чтения текстового содержимого. Поэтому посетителю необходимо дать качественную обратную связь. Как это сделать?

Блок с контактами в обязательном порядке должен быть на каждом лендинге. Некоторые прячут номера и адреса в самый дальний угол, но это в корне неправильный подход. Всё дело в том, что посетитель должен видеть телефоны и адреса на всех страницах, а не где-то на одной. Страница без телефонного номера выглядит обезличенной – возникает чувство, что администрация магазина намеренно избегает всяческих контактов. Вот типичный пример неправильной организации контактов, когда указана только почта:

И это неправильно, так как у посетителя всегда должна иметься возможность оперативной связи с магазином. Для этого необходимо расположить контакты в самой видимой части лендинга – в его шапке, неподалёку от логотипа. Есть возможность арендовать номер формата 8-800? В этом случае можно рассчитывать на более лояльное отношение аудитории, так как у многих потребителей наличие такого номера у магазина вызывает дополнительное доверие.

Как не нужно ставить формы обратной связи на лендинги

Хорошим тоном стало использование на лендингах форм обратной связи, призывающих оставить номер для обратного звонка. Подход хороший, но не нужно делать так, чтобы формы были излишне навязчивыми. Некоторые лендинги грешат этим со страшной силой, демонстрируя формы на том этапе, пока посетители пытаются понять, куда они вообще попали. Лучше всего, если форма будет появляться где-нибудь сбоку/снизу, не занимая экран и не отвлекая посетителей навязчивыми вопросами. Если свободных операторов в магазине нет, то посетителей нужно избавлять от подобных запросов, так как они будут ждать чуть-ли не мгновенного ответа (всем нужна помощь прямо здесь и сейчас). В формах обратной связи можно просить не только номера телефонов, но и другие контактные данные.

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

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