Короткой обычно считается форма от 1-ого до 3-ех полей. Такая лид-форма имеет ряд преимуществ:
- она компактна, и это позволяет разместить ее на любой странице сайта;
- одно-два поля легки для визуального восприятия;
- пользователям не нужно прилагать много усилий, чтобы заполнить ее;
- она не требует от пользователя много личной информации.
Например, форма подписки на Webdesigner News состоит всего из одного поля и кнопки «Подписаться». А зачем больше?
О том, что короткая лид-форма конвертирует лучше, говорят многочисленные кейсы и исследования. Мы собрали самые интересные из них.
3 кейса, которые доказывают, что сокращение полей лид-формы может увеличить конверсию
1. Сервис ImageScape сократил количество полей в форме подписки с одиннадцати до четырех, чем увеличил конверсию на 120%.
Уменьшение количества полей в форме дало рост конверсии с 5,4% до 11, 9%.
- Если добавить поле “Возраст” конверсия падает на 3%.
- Если добавить номер телефона — на 5%.
- Если запросить в форме адрес, конверсия может упасть на 2-4%. Причем просьба ввести название улицы больше всего снижает конверсию, в сравнении с запросом города или штата.
Кейсы и исследования доказывают, что короткая лид-форма более удобна для пользователя, а сокращение полей ввода может в разы увеличить конверсию. Но несмотря на все преимущества такой формы, у нее есть один, но существенный недостаток — вы получаете минимум информации о пользователе, а это значит:
- Нет возможности сегментировать аудиторию по интересам, сфере деятельности или другим критериям;
- Отсутствие информации усложняет работу отдела продаж и маркетолога.
Поэтому, чтобы сделать второй контакт с пользователем более персонализированным, приходится делать форму длиннее.
Длинная форма подписки: вынужденная необходимость
Лид-форма считается длинной, если она состоит более чем из 3-ех строк для заполнения. Из приведенных выше исследований можно сделать вывод, что пользователей отталкивают дополнительные поля для ввода:
- они неохотно тратят свое время на заполнение того, что нужно вам, а не им;
- их настораживает требование оставить дополнительную информацию о себе;
- им неудобно заполнять полотна текста с мобильных устройств.
Почему же длинные лид-формы продолжают использовать?
Потому что у них тоже есть ряд преимуществ:
- Такая форма приводит более качественные лиды: если человек нашел время и силы для того, чтобы заполнить все поля формы - он действительно заинтересован вашим предложением.
- У вас на руках достаточно данных для того, чтобы сегментировать аудиторию, и составить более релевантную рассылку, выбрать более подходящий посыл для следующего контакта.
Простая форма из трех вопросов (имя, почта, телефон) была изменена на более длинную, состоящую из семи полей.
Пользователь заполняет эту форму в два этапа. Кроме того, сама форма отличается от привычной нам, и больше напоминает тест.
После такого изменения формы подписки конверсия выросла на 214%.В этом примере есть один важный нюанс: ребята сделали из одной длинной формы две короткие. В результате пользователям не сложно заполнять первую часть (всего три поля), а заполнять вторую уже есть мотивация — жалко бросать начатое.
На экран по мере заполнения выводится только 1 вопрос
Такая необычная длинная форма грамотно продумана:
- тут используется условная логика, чтобы задавать разные вопросы различным пользователям на основе их предыдущих ответов;
- сверху есть зеленый индикатор, который показывает, сколько процентов формы вы уже заполнили;
- когда форма заполнена на 40%, заявка отправляется в отдел продаж. Заполнять дополнительную информацию или нет — пользователь выбирает сам.
Все эти кейсы доказывают, что длинная форма тоже может хорошо конвертировать, особенно если выбрать правильную подачу.
Здравствуйте дорогие читатели, сегодня хочу рассказать вам о том, как я создаю формы, для получения контактных данных пользователя.
На сегодняшний день, , является в структуре лендинг пейдж. Ведь это один из способов принять заказ или отправить каталог вашей продукции, предварительно получив 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