Но рыбка срывается. Причина - форма захвата на сайте. Возникают вопросы: что с ней не так, как оценить, где смоделировать успешный опыт?! Об этом, и даже больше, узнаете в статье.
О гвозде программы
Форма захвата контактов, как воздух. О ней не задумываешься, когда делаешь сайт и считаешь, что важно всё, но только не она.
Правда, я скажу иначе - жить без нее нельзя. Возможно резкое сравнение, но для акцента важности темы, в самый раз. Потому что вопрос о Вашем кошельке.
Форма обратной связи - это окно с полями для ввода данных, текстом и кнопкой для обратной связи с посетителем Вашего сайта.
Такая форма является одной из ступеней , собирает контакты посетителей сайта или Landing Page.
Другими словами, дружит покупателя с продавцом. Еще ее называют лид - форма или форма обратной связи. Но глобально не важно как Вы её будете называть, если мы понимаем о чём идёт речь.
И так как сама по себе тема не является сложной, не будем долго признаваться друг другу в любви, а сразу перейдём к подробностям. И начнём мы с того, какие 3 вида форм для захвата бывают.
1. Закрытая форма
Форма называется закрытой, когда выполнена в виде кнопки или ссылки на сайте, при нажатии на которую появляется развернутая форма с полями. Классика жанра:
Закрытая форма
Новое окно
Необходима в случае соблюдения дизайна и использования пространства страницы для информации.
А также, когда она содержит больше 4-х полей и перекрывает часть контента на сайте. В основном в интернет - магазинах. Единственный минус - требует дополнительного клика мыши пользователем.
2. Открытая форма
Открытая форма захвата выполнена в развернутом виде и располагается, в большинстве случаев, на первом экране главной страницы сайта или лендинга.
Открытая форма
Служит для заботы о самых горячих клиентах, которые уже хотят отправить свои контакты, оплатить товар и получить выгоду.
Такие пользователи не хотят осуществлять лишние клики мышкой. Если позволяет место на странице, дизайн, количество полей, и у Вас много горячих клиентов, спокойно используйте открытую форму захвата лидов.
3. Двойная форма
Основное отличие двойной формы от обычной - наличие мотивирующего, продающего, информационного текста, который правильнее располагать слева от полей для ввода данных.
Двойная форма
В такой форме может находиться специальное предложение или акция, которая не озвучена на сайте.
Ваш лид - магнит или особое условие для клиента, отправившего заявку с этой формы. Главное, чтобы это было ценным для пользователя.
Типы форм захвата
Окей. Теперь, когда Вы глобально увидели какие бывают примеры форм захвата, можем переходить к их типу.
И тут список будет довольно продолжительный, но Вам не нужно всё. Главный принцип Вашего выбора: форма должна соответствовать желанию клиента в момент его нахождения в конкретном месте сайта. А я начинаю.
1. Подписка на рассылку
E- mail маркетинг успешно работает, что бы о нем не говорили. Поэтому одним из видов формы является “Подписка на рассылку”.
Цель её - взять e-mail адрес пользователя для дальнейшей продажи Ваших продуктов с помощью рассылки.
Подписка на рассылку
Хотя с учётом того, что сейчас активно развиваются и в соц. сетях, это может легко заменить в этой форме.
Подписка на рассылку через соц.сети
Расположите форму сбоку от основного контента или внизу главной страницы, после того, как пользователь ознакомится с важной информацией.
Достаточно всего одного поля с указанием адреса почты. Ну максимум ещё имени.
Конечно, лучший эффект Вы получите, только когда человек чётко поймёт на сайте что он получит взамен за свой контакт.
Подарок в обмен на контакты
2. Обратный звонок
Пожалуй, самый распространенный вид формы обратной связи. Особенно если Вы работаете по своему городу.
Телефонная связь является быстрым и что главное удобным способом общения. И да, использовать данную форму нужно на всех сайтах, так как это уже не просто фишка, а необходимость.
Обратный звонок“Заказать звонок” лучше размещать рядом с номером телефона в “шапке” сайта. И не обязательно это должна быть кнопка.
Форма может появится после нажатия на текст, который можно выполнить в виде ссылки (подчёркнута пунктиром и выделена цветом)
Форма захвата - обратный звонок
Можете сделать форму с одним полем для номера телефона чтобы повысить конверсию, ведь чем меньше полей тем выше эффективность из-за того что мы уменьшаем энергозатраты человека.
Но есть небольшой минус, хоть и не значительный - имя клиента должен будет узнать менеджер.
Заказ звонкаОбязательно сделайте форму заказа звонка в подвале страницы рядом с контактами, чтобы пользователю не пришлось подниматься вверх, если у него возникнет желание оставить контакт.
3. Консультация
Если Вы продаете самокат, то тут все ясно, вопросов минимум и консультация почти не нужна.
А если у Вас банкротство юридических лиц, то здесь необходимо учитывать много нюансов и консультация не помещает.
Консультация
Так же заявку на консультацию можно использовать в интернет - магазине. Если есть вероятность, что на Вашем сайте человек не найдет нужного товара, но Вы сможете предложить ему альтернативу.
Выполнить его в виде всплывающего окна формы захвата клиента, который частично по смыслу пересекается с "обратным звонком".
Обратный звонок
Поместите такую форму можно сразу после того, как расскажете о своих выгодах и преимуществах.
Либо можно сделать это сразу на первом экране, как мы это делали это на лендинге у агента недвижимости.
Бесплатная консультация
Либо есть ещё более хитрый и что самое интересное по нашим наблюдениям очень эффективный вариант - расположить форму захвата внизу страницы, где из полей не только имя и телефон, но и место для описания задачи.
https://youtu.be/eykrf_RWJOo
4. Расчёт / узнавание стоимости
Опять же, если Вы продаёте наращивание ногтей, то стоимость можно указывать сразу на сайте.
А если у Вас, как и у нас, услуга сложная, например, то какую-бы стоимость Вы не указали, она в любом раскладе будет ориентировочная, а значит нужна отдельная форма захвата по её персональному расчёту.
Расчет стоимости
Кстати, выше на примере Вы видите реализацию расчёта стоимости через (в нашем случае квиз-блок).
Это когда клиент, перед тем как увидеть заветные поля для ввода контактов, должен в виде небольшой геймификации ответить на вопросы, и его система примерно сориентирует в вилке цен.
Но не обязательно так заморачиваться, в некоторых случаях достаточно просто сделать кнопку с обычным предложением “Рассчитать стоимость” или “Получить предложение с ценами”.
Например, именно так у нас реализовано на первом экране нашего сайта по .
Узнать цены
5. Онлайн-консультант
Онлайн-чат тоже относится к форме обратной связи, хоть и косвенно. Но мы не оставим его без внимания.
Поэтому если Вы уверены, что у посетителя возникнут какие-либо вопросы по продукту и менеджер в чате может закрыть его на последующую ступень воронки продаж, то внедряйте онлайн консультанта на свой ресурс.
Онлайн-консультант
Только фраза в примере выше - это приветствие у тысячи сайтов. И у Ваших конкурентов. Поэтому убирайте шаблоны.
Подстраивайтесь под специфику Вашей ниши. Если Вы продаете детские игрушки, то можете написать такое приветствие: “Здласти! Если Вы не мозете опледелица с выболом, написыте нам в цят и полуците всю инфолмацию)))”
Нелепо, но прикольно. А позитив и смех, поверьте, больше располагает, нежели сухое: “Здравствуйте, чем могу помочь?”. Кстати, об этом у нас даже есть целое видео:
https://youtu.be/p3G42Yg3VKA
И есть ещё одна хорошая новость, в своей практике мы поработали с большим количеством онлайн-консультантов и естественно за это время выбрали лучшие. О них мы написали статье.
6. Форма входа и регистрации
Эта форма обеспечивает доступ к дополнительной информации или возможностям ресурса на пробный период.
Опять же, никаких лишних действий для пользователя. Достаточно трех полей: “Имя”, “E-mail” и “Пароль”.
Форма регистрации
Казалось бы, проще простого, но… Можно сделать еще проще: сгенерировать пароль за пользователя и избавить его, в очередной раз от перебирания в голове дат рождения своих родных.
Генерация пароля
Только если вдруг Вы сервис, то не смешивайте между собой форму “Вход” и “Регистрация”. У этих форм хоть и нет большого отличия, но они предназначены для разных задач.
Одна для входа зарегистрированных людей, другая для первичной регистрации или вообще попытки пробно изучить портал.
Формы вход и регистрация
7. Поп ап с формой обратной связи
Поп ап - окно, которое “выскакивает”, когда курсор посетителя движется к вкладкам браузера или через определенное время пребывания пользователя на сайте.
В этой форме должно быть вкусное спец предложение, чтобы клиент отправил заявку.
Спец.предложение
Считается, что поп - ап раздражает и вызывает недовольство. Но если у Вас действительно есть предложение, которого больше ни у кого нет, то почему бы не попробовать сделать поп - ап? Покажет только тестирование.
Только умоляю Вас, настройте нормальную логику его появления. Этот поп-ап не должен вылетать на каждой странице через 2 секунды движения мышки.
Всё должно быть логично, и тогда даже можно будет тестированием не заниматься.
ФИШЕЧКИ и нюансы
Вы, должно быть, уже почувствовали, что этот “квадратик с кнопкой” на сайте не такой уж и плохой.
У него много мелких составляющих, которые важны для заветной конверсии Вашего ресурса. Поэтому далее мы разберём как раз эти фишечки. Да, и Вы их так любите, я знаю.
1. Окно благодарности после отправки формы
Это та самая “галочка”, которая появляется на экране монитора, после отправки формы пользователем.
Очередная мелочь, но такая важная! Это может быть модальное окно или отдельная и дальнейшими действиями, которые будут происходить после успешной отправки формы пользователем.
Окно благодарности
2. Каптча
Каптча – это тест компьютерных систем, который определяет: человек Вы или робот. Ее плюс в том, что каптча защищает Ваш ресурс от роботов, которые заходят на сайт, регистрируются, рассылают спам и увеличивают его нагрузку.
КаптчаМинус – добавляет сложности в заполнении формы пользователем. И иногда именно каптча становится причиной ухода посетителя с сайта. Непонятные надписи, неразборчивые буквы. В общем, сложно все.
Если подумать, то проблема спама и ботов на ресурсе не является проблемой Ваших клиентов. Она Ваша.
Так что старайтесь избегать или делать каптчи простыми (invisible reCAPTCHA от Goog) или в полу-игровой форме, с использованием изображения.
Каптча в игровой форме
3. Политика конфиденциальности
Помните о Законе N 152-ФЗ “О персональных данных”. Нет?! В общем закон Российской федерации гласит, что Вы не имеете собирать контакты людей без их согласия.
А их согласие это установка галочки в специальном чек-боксе под кнопкой (расположение может быть любое).
Политика конфиденциальности
Несоблюдение данного пункта может повлечь за собой штрафы, хотя мы ещё не слышали про такие случаи. И да, галочка по-умолчанию НЕ должна стоять.
4. Бонус
Надеюсь, Вы еще не уснули. Собственно, бонусы в Вашем бизнесе тоже влияют на конверсию лид-формы.
Например, Вы предлагаете человеку заказать выезд на замер, а дополнительно к этому обещаете, что бутылка шампанского в подарок, даже если человек ничего не купит.
Какой сюрприз!
5. Призыв
Миксуйте банальные призывы к действию с небанальными. Например, у студии дизайна в блоке “Портфолио” глупо делать основной призыв к действию - “Заказать звонок”. Лучше будет написать “Хочу также”.
Призыв к действию
Либо, если Вы представляете продукт, у которого много преимуществ, но он требует подробной консультации, можно использовать призыв - “Еще больше плюсов”.
Или применить такое решение, как на примере ниже, когда мы предлагаем связаться и ответить на любые вопросы.
Необычный призыв к действию
Это необходимо, чтобы наши формы захвата, особенно одинарные, не попадали в фильтр человеческого глаза, который автоматически пропускает их, так как знает, что это реклама. Заинтересовал? Подробнее об этом читайте в статье.
Форма захвата на сайте – это несколько полей, последовательно располагающихся друг за другом, которые посетитель может заполнить, оставив свои контактные данные, какие посчитает нужным . Еще ее называют лид-формой, то есть формой для захвата лидов. Форма может быть предложена для заполнения при оформлении заявки или для получения рассылки информации на свой электронный адрес. Например, для того, чтобы какой-нибудь интернет-магазин смог прислать свой новый каталог данному посетителю с уникальным предложением.
В форме обычно предлагается указать имя, телефон, электронный адрес , еще может быть текстовое поле для комментариев, пожеланий, дополнительной информации. Если человек указывает телефон, лучше добавить поле, в котором можно отметить удобное для звонка время. Некоторые поля могут быть обязательными к заполнению, а остальные могут заполняться по желанию клиента.
Для чего нужна форма захвата на сайте
Личную информацию пользователи всемирной сети, чаще всего, оставляют неохотно. Чтобы человек предоставил хоть какие-то свои данные, веб-сайт должен вызывать доверие и предложить что-то очень уникальное, интересное или бесплатное . Так уж устроена психика современного человека – больше получать, чем отдавать.
Как улучшить форму
После получения определенного количества откликов с формы захвата, можно провести анализ . Из его результатов будет получена информация о том, какие поля заполняются охотнее, а какие чаще остаются пустыми. Это поможет оптимизировать форму и убрать лишнее. Удалить ненужные строки, можно попробовать добавить другие. Потом снова провести анализ их заполнения. Как говорится, нет предела совершенству.
Чтобы людям было удобно и достаточно комфортно заполнять формы на Вашем веб-сайте, пробуйте заполнить их сами . Тогда Вы сможете еще на стадии разработки выявить все нюансы данной процедуры. Прочувствуете на себе все плюсы и минусы и сможете сделать лид-форму более простой и удобной.
Работа с базой данных для рассылки
Получив контакты посетителей сайта, которые согласились заполнить форму, можно приступать к их оповещению и рассылкам . Существует множнство сервисов и скриптов, которые позволяют формировать письма рассылок, автоматически отправлять их на множество адресов одновременно. Можно даже настроить последовательность и частоту рассылки. К тому же, на таких сервисах существуют системы статистики и анализа открытий писем, просмотров, откликов.
Форма захвата на сайте призвана развивать Ваш ресурс и организовать доверительное общение между Вами и потенциальными клиентами.
Здравствуйте дорогие читатели, сегодня хочу рассказать вам о том, как я создаю формы, для получения контактных данных пользователя.
На сегодняшний день, , является в структуре лендинг пейдж. Ведь это один из способов принять заказ или отправить каталог вашей продукции, предварительно получив e-mail посетителя.
Создание формы обратной связи – html разметка
Обычно мне хватает трех полей, и в большинстве случаев, я использую такую разметку для создания контактной формы:
Попробуйте открыть в браузере данный код и посмотрите что у вас получилось, в зависимости от того, какой интернет-обозреватель используете, должно выглядеть примерно так:
Если возникнут какие-нибудь вопросы по разметке, смело задавайте их в комментариях, постараюсь подробно ответить, а в статье не буду описывать каждый элемент, чтобы не увеличивать ее размер. Кроме того, элементы достаточно просты.
Создание формы обратной связи — css разметка
Давайте зададим стили нашей форме и приведем ее к читабельному виду:
/* Стили формы */ #application { width: 475px; margin: 0 auto; } /*Стили полей для ввода*/ #applicationName, #applicationEmail, #applicationTelephone { width: 100%; height: 73px; background: none; margin-top: 25px; border: 1px solid #fff; border-radius: 40px; text-align: center; color: #fff; font-size: 24px; } /*Стили полей при клике по ним*/ #applicationName:focus, #applicationEmail:focus, #applicationTelephone:focus { border: 1px solid #30ad64; } /*Стили текста, выводящегося в placeholder*/ ::-webkit-input-placeholder { color: #efefef; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } ::-moz-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /* Firefox 19+ */ :-moz-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /* Firefox 18- */ :-ms-input-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } ::placeholder { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /*Стили для кнопки*/ .applicationButton { margin-top: 25px; background: #30ad64; border: none; width: 100%; height: 73px; border-radius: 40px; color: #fff; font-size: 24px; text-transform: uppercase; font-family: "PT Sans", sans-serif; cursor: pointer; } .applicationButton:hover { background: #d68c18; }
Если хотите, чтобы цвет кнопки менялся плавно, добавьте в.applicationButton и.applicationButton:hover такую строку:
Transition: .6s;
Где.6s — время анимации в миллисекундах.
Теперь наша форма приобрела красивый вид, сейчас она выглядит так:
Создание формы обратной связи — php разметка
Теперь нам необходимо создать файл application.php. Он будет получать введенные параметры из формы и отправлять их к нам на почту.
Структура у него, как у обычного html файла, это может быть страничка, на которой вы напишите «Спасибо, ваша заявка принята. После обработки заявки наши менеджеры свяжутся с вами»
То есть, когда пользователь нажмет кнопку, его перекинет на страницу application.php. Это полноценная страница, и вы должны оформить ее соответствующим образом.
"; $msg .= "
Cообщение с сайта
\r\n"; $msg .= "От кого: ".$username."
\r\n"; $msg .= "Почта: ".$usermail."
\r\n"; $msg .= "Сайт: ".$usertel."
\r\n"; $msg .= ""; // отправка сообщения if(@mail($sendto, $subject, $msg, $headers)) { echo "
Давайте немного поясню код:
$sendto = "[email protected]"; // почта, на которую будет приходить письмо $username = $_POST["name"]; // сохраняем в переменную данные полученные из поля c именем $usertel = $_POST["telephone"]; // сохраняем в переменную данные полученные из поля c телефонным номером $usermail = $_POST["email"]; // сохраняем в переменную данные полученные из поля c адресом электронной почты
Тут, думаю, — понятно.
Теперь давайте сформируем заголовок письма.
$subject = "Новое сообщение"; $headers = "From: " . strip_tags($usermail) . "\r\n"; $headers .= "Reply-To: ". strip_tags($usermail) . "\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html;charset=utf-8 \r\n";
Строка $subject = «Новое сообщение»; — отвечает за тему письма, может написать там: «Заявка с сайта» или то, что вам больше подходит.
Предлагаю сделать так, чтобы письмо приходило, от адреса, указанного в поле input type=»email». То есть с того, с которого пользователь ввел при заполнении формы. Для этого пропишем следующие строки:
$headers = "From: " . strip_tags($usermail) . "\r\n";
То есть мы подставим данные из переменной $usermail, где и хранится информация из поля, отвечающего за ввод email адреса.
Теперь зададим внешний вид письма. Вы можете оформить его как угодно, а я предлагаю следующую структуру:
$msg = "
"; $msg .= "Cообщение с сайта
\r\n"; $msg .= "От кого: ".$username."
\r\n"; $msg .= "Почта: ".$usermail."
\r\n"; $msg .= "Телефон: ".$usertel."
\r\n"; $msg .= "";Первой строкой задаем шрифт письма. Второй — выводим сообщение, например: «Заявка с формы обратной связи на первом экране». Третей, четвертой и пятой строкой передаем данные из формы. Каждая с новой строки.
Теперь нужно отправить письмо функцией mail и определить, что будет происходить при успешной и не успешной отправки письма:
If(@mail($sendto, $subject, $msg, $headers)) { echo "
Я сделал так, что в любом из случаев выведется картинка с соответствующим текстом. Вы можете вместо картинки вывести полноценную страницу. Просто пропишите код, вместо картинки.
Через несколько секунд, после вывода изображения, я делаю редирект (автоматическое перенаправление) на главную страницу. Сделать это можно, вписав следующую строку между тегами head;
То есть через 4 секунды пользователя автоматически вернет на главную страницу!
Я не эксперт в php — это back-end язык программирования, меня всю жизнь тянуло к изучению front-end. Поэтому не судите строго. Да, здесь можно сделать проверки на заполнение контактных форм и так далее, но мне всегда хватало и этого, так что, если у кого-то есть предложение как улучшить этот код, напишите пожалуйста в комментариях или на почту, поправлю урок, спасибо!
Кстати, если вам нужна форма обратной связи без перезагрузки страницы, то почитать о том как ее установить можно в
Может быть, кому-то не очень понятен материал, но если вы в точности повторите мои действия, то у вас обязательно будет работать контактная форма. Возникнут вопросы — пишите в комментариях, постараюсь ответить! До встречи на блоге!
P.s. Так как я стал очень часто получать вопросы о том, почему не работает форма и не приходят письма на почту, то решил описать несколько наиболее популярных причин, по которым это может происходить:
- Тестируете форму не на сервере.
- Тестируете форму на бесплатном хостинге.
- Тестируете форму на платном хостинге, но в бесплатном тестовом периоде.
В этих случаях письма не будут приходить к вам на почту.
Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на .
23/07/2014 12/07/2018
dimadv7