Форма отправки письма без перезагрузки страницы для лендинга. Форма обратной связи для лендинга Сделать форму обратной связи для лендинга
Менять изображение на первом экране или «подгонять» выгоды под клиента, но какой в этом толк, если взаимодействия с формой не происходит?
Статистика показывает, что в 20% случаев
причина недостаточной конверсии посадочной страницы кроется не столько в плохом УТП или отсутствии целевого трафика, сколько в небрежном и непродуманном оформлении формы заявки
.
Посетитель не желает оставлять свои контактные данные, «бросает» форму и уходит. Вы теряете потенциальных клиентов, а значит и доход.
Почему так происходит и как повысить конверсию формы заявок
?
2 причины плохой «заполняемости» форм:
- неграмотное оформление формы заявки
- ее непродуманный функционал
В статье приведен простой чек-лист , с помощью которого вы сможете легко проанализировать формы на landing page . Для работы я рекомендую использовать 4 инструмента : карту кликов, карту скроллинга, аналитику форм и .
Форма заявки должна быть видна на первом экране без «прокрутки»Изучите карту скроллинга . Посмотрите, попадают ли основные конверсионные элементы в просматриваемые части страницы. Проверяйте сверстанную страницу на устройствах с разным расширением экрана. Уделите особое внимание мобильной версии!
Проверяйте все браузерыНужно проверить, как работает форма заявки во всех браузерах , и это стоит протестировать отдельно! Если функционал неисправен, не будет результата, данных для анализа и выработки рекомендаций.
Количество полей должны соответствовать поставленной задаче
Рис.2 Пример дополнительного поля, решающего проблему клиента
Правило простое – уделите внимание удобству заполнения этих форм:
- используйте подсказки (например, «маску» для телефонных номеров);
- сделайте отправку формы возможной без заполнения всех имеющихся полей;
- ставьте адекватные цели – например, не запрашивайте на подписной странице контактный телефон, если . Посетители не станут заполнять 5 полей, чтобы просто получить демо-версию или каталог.
Отталкивайтесь от особенностей продукта или ниши. Дайте возможность связаться с вами по телефону, e-mail или чату для консультации. Учитывайте поведение клиентов – кому-то легче сразу позвонить и обговорить условия, в некоторых случаях (получение КП) не обойтись без взаимодействия с формой.
Закрытая или открытая форма?При работе с зарубежными сайтами мы все чаще сталкиваемся с закрытой формой заявки — простой и понятной кнопкой в стиле «Начать сейчас». Но однозначного ответа, какая из форм работает лучше, — нет. В конечном итоге, все зависит от того, насколько грамотно вы построили логическую «подводку» к заветной кнопке .
Правила оформления полей в поп-апе будут те же:
- Будьте последовательны . Форма должна быть максимально простой для заполнения.
- Придерживайтесь порядка. Первыми располагайте поля, которые заполнить проще всего (например, «имя»).
- Сформулируйте четкую выгоду. Объясните, зачем посетителю нужно заполнить форму и что он получит .
Рис.3 Пример хорошей «подводки» к закрытой форме заявки
Не используйте шаблонные фразы!Типа «получите бесплатную консультацию». Продумайте несколько вариантов «легкого шага», способного заинтересовать пользователя и заставить его взаимодействовать с формой .
Хороший пример в нише продажи авто. Вместо стандартной «Получите консультацию по продаже автомобиля» использован классный прием: посетителю предлагается сразу прикинуть сумму, которую он может получить.
Уходите от формулировки «отправить заявку». Гораздо лучше сделать кнопку с описанием конкретного результата (например, «получить КП» или «рассчитать стоимость»). В идеале текст кнопки должен частично дублировать «подводку».
Используйте графические направляющие . Самый простой вариант — «освободить» пространство вокруг формы и направить взгляд посетителя при помощи указателя или стрелки. Так форма станет более заметной и сильнее будет притягивать к себе внимание.
В случае, когда форму невозможно подчеркнуть графическими элементами или сделать кнопку крупнее и контрастнее, «обратите» на нее внимание пользователя посредством изображения. Грамотно подберите фото и направьте взгляд посетителя в нужном вам направлении.
Рис.7 Взгляд девушки обращает ваше внимание на форму
Изучайте взаимодействие пользователей с формамиАналитика форм заявки показывает, какие поля заполняют/не заполняют пользователи. А Вебвизор, благодаря своему функционалу, выступает в роли «большого брата», который следит за поведением посетителя. Если взаимодействие с формой было, но данные по каким-то причинам не были отправлены, он покажет вам, в чем была проблема. Иными словами, он поможет понять, на каких этапах заполнения у пользователей возникают трудности, какие поля можно убрать, а какие стоит дополнить подсказкой для корректного заполнения.
Поблагодарите клиента – это важноПродумайте детали! Грамотно оформленная страница благодарности – это не только проявление уважения к клиенту, но и инструмент повышения конверсии . Еще раз — отойдите от шаблонов! Проявите креатив — вместо стандартной фразы «Ваша заявка принята» пропишите что-то более персональное, касающееся вас и вашей компании. Страница «спасибо» при правильном оформлении может стать хорошей площадкой для экспериментов.
Будьте во всеоружии и опережайте своих конкурентов. Конверсионных лендингов вам!
Приветствую моих читателей, набрался опыта и расскажу Вам о принципах работы формы обратной связи php. Покажу на наглядных примерах, чтобы вы понимали как все устроено и как происходит взаимодействие между самой формой ввода (ее полями input) и файлом-обработчиком, написанный на языке php. К тому же бесплатно сможете скачать исходники вместе с .
Конечно здорово будет, если вы хоть немного разбираетесь в HTML / CSS т.к. Вам придется уже по аналогии перетягивать код на свою страницу. PHP язык затрагивать не будем, все необходимые правки, которые нужно будет сделать под себя я покажу.
UPDATE :По откликам читателей, я понял, что нужно что-то более красивое и функциональное, встречайте , ознакомьтесь и посмотрите. Сами выбирайте какая больше понравится)
UPDATE2 : Version 3.0 Адаптивный Лендинг + форма ajax с передачей UTM-меток , ознакомьтесь и посмотрите. Вам понравится
Вспомнил себя, когда я впервые пытался делать самостоятельно форму обратной связи на php, и честно признаться было трудоемко, т.к. не понимал что и как происходит. Терпение и упорство друзья и у вас все получится.
Форма обратной связи php — структура
Разбор самой формы обратной связи будем изучать на примере посадочной страницы (Landing Page), кстати есть отдельная статья по . Посмотреть как это работает в действии можете по кнопкам расположенным ниже, прикладываю исходники этого одностраничника и главного файла обработчика-php (этот файл и будет обрабатывать и отправлять письмо на email)
После того как скачаете исходники и распакуете архив, вы увидите следующую структуру по файлам:
- image — все изображения, которые используются для самого Landing Page, кнопки и т.д.
- js — javascript скрипты, которые обеспечивают например всплывающее модальное окно на странице и другие визуальные эффекты
- index.html — индексный файл нашего одностраничника
- index1.php — файл обработчик, в который передаются значения из формы, далее формируется письмо из полученных переменных и отправляется на указанный email адрес. Так же index1.php случит в роли промежуточной страницы уведомления об успешной отправке данных с автоматическим перенаправлением обратно на index.html (т.е. наш одностраничник)
Важно, чтобы ваш хостинг, на котором располагаются файлы сайта, поддерживал php обработку, иначе файл index1.php не выполнится и работать не будет. Чтобы уточнить этот нюанс обратитесь в кампанию, где зарегистрирован ваш хостинг или просто протестируйте — работает, значит есть поддержка. Если нет, то включите опцию поддержки языка php
Взгляните на схему работы взаимодействия всех элементов (страница, форма, обработчик)
Взглянем на работу одной из кнопок, которая вызывает модальное всплывающее окно, в котором находится форма обратной связи. Данный приведенный исходный код — это не раз, два вставил на страницу и заработает, Вам придется самим подгонять под свой дизайн и потребности.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Заказать обратный звонок Заказажите обратный звонок |
Заказать обратный звонок Заказажите обратный звонок
Ниже полный исходный код обработчика index1.php, для того чтобы настроить отправку на свой почтовый ящик, поменяйте «[email protected]» на свой, остальное в принципе можно оставить без изменений
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | С вами свяжутся |
С вами свяжутся body { background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; } setTimeout("location.replace("/index.html")", 3000); /*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/
Проверка работоспособности формыВызываем окно и вводим данные для тестовой проверки нашей формы
Еще раз напомню, ваш хостинг должен поддерживать обработку php файлов, иначе наш обработчик просто не выполнится и никакое письмо не отправится на указанный email-адрес. Результат успешно отработанной форма обратной связи
У меня на этом все, старался донести смысл и работу скрипта наилучшим образом. Возникнут вопросы, можете смело обращаться в комментарии или ко мне в VK (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.
Нужно понимать, что за такую ювелирную работу нужно будет заплатить, но плата того стоит. Нужно обсудить все вопросы по созданию, это повлияет на стоимость работы и на лендинг в целом. Создавая нужно учитывать все возможные мелочи, которые могут привлекать внимание людей: от красоты, до удобства пользования. К тому же, нельзя забывать о психологии и подсознании. Многие решения принимаются подсознательно. И покупка товара – не исключение. Если построить правильную логическую цепочку, которая будет содержать в себе решение проблемы человека, описание этого решения, убеждение, что это решение верное и поможет ему, концентрация на этой цели, подталкивание к действию и само действие, то получится превратить большую часть посетителей в клиентов. Причем, не важно какое будет целевое действие страницы – продажа, подписка на рассылку, приобретение контактных данных посетителя и так далее.
Отдельное внимание нужно уделить форме обратной связи с клиентом. Так как это общение с клиентом, пусть и не прямое. Связь с клиентом крайне важна, так как, один лишь сайт не сможет полностью удовлетворить потребности клиента. Он может обрабатывать лишь стандартные запросы, которых бывает крайне мало, поскольку люди редко выбирают стандартный подход к решению проблемы. Связавшись с клиентом через обратную связь можно увеличить не только оборот продаж/сделок/подписок, но и репутацию компании.
Поскольку личное общение и удовлетворение потребностей клиента очень важно для развития хорошей репутации. Созданию такой формы всегда уделялось отдельное внимание. Использование шаблона, на котором установлена обратная связь сильно ограничивает функционал страницы, потому данная форма всегда вписывалась в основной код вручную с соблюдением всех требований SEO. К такой формы тоже подход особый: она должна быть расположена на видном месте, она должна быть интуитивно понятной и простой в использовании, она не должна спрашивать у клиента много лишней информации, достаточно электронной почты и имени. Расположение влияет на ту категорию людей, которые привыкли быстро искать необходимую информацию и использовать ее. Некоторым достаточно пары секунд пребывания на странице, чтобы оценить будут ли они пользоваться ее услугами или нет. Потому, расположение должно быть таким, чтобы даже такие пользователи успели заинтересоваться предложением и оставить контакты.
Очень важно, чтобы страница была проста в понимании, потому как не все пользователи сети интернет опытны в этом деле. Для охвата аудитории опытной и не очень, нужно чтобы было интуитивное понимание последовательности действий для совершения операции. И не менее важно – количество информации. Это влияет на подсознательный уровень доверия. Если страница спрашивает много контактов: и номер телефона, и электронную почту, номер карты, адрес и так далее. То может возникнуть ощущение, что это страница сделана мошенниками. А это сильный удар «под дых» репутации сайта в целом. Потому – информации нужно спрашивать ровно столько, сколько будет достаточно для связи с клиентом и уточнения его пожеланий и выполнения условий сделки. Лендинг в целом – простой сайт, созданный сложным образом. Он простой для пользователей, но сложный для создания разработчикам. Однако, такая работа стоит затраченных усилий!
Среди основных элементов Landing Page можно выделить блоки с контактными данными и с запросом обратной связи. Эти блоки отличаются повышенной важностью. В первую очередь, следует понимать, что потенциальному потребителю часто недостаточно информации, представленной на лендинге – некоторые лучше всего воспринимают информацию со слов живого человека, чем с чтения текстового содержимого. Поэтому посетителю необходимо дать качественную обратную связь. Как это сделать?
Блок с контактами в обязательном порядке должен быть на каждом лендинге. Некоторые прячут номера и адреса в самый дальний угол, но это в корне неправильный подход. Всё дело в том, что посетитель должен видеть телефоны и адреса на всех страницах, а не где-то на одной. Страница без телефонного номера выглядит обезличенной – возникает чувство, что администрация магазина намеренно избегает всяческих контактов. Вот типичный пример неправильной организации контактов, когда указана только почта:
И это неправильно, так как у посетителя всегда должна иметься возможность оперативной связи с магазином. Для этого необходимо расположить контакты в самой видимой части лендинга – в его шапке, неподалёку от логотипа. Есть возможность арендовать номер формата 8-800? В этом случае можно рассчитывать на более лояльное отношение аудитории, так как у многих потребителей наличие такого номера у магазина вызывает дополнительное доверие.
Как не нужно ставить формы обратной связи на лендинги
Хорошим тоном стало использование на лендингах форм обратной связи, призывающих оставить номер для обратного звонка. Подход хороший, но не нужно делать так, чтобы формы были излишне навязчивыми. Некоторые лендинги грешат этим со страшной силой, демонстрируя формы на том этапе, пока посетители пытаются понять, куда они вообще попали. Лучше всего, если форма будет появляться где-нибудь сбоку/снизу, не занимая экран и не отвлекая посетителей навязчивыми вопросами. Если свободных операторов в магазине нет, то посетителей нужно избавлять от подобных запросов, так как они будут ждать чуть-ли не мгновенного ответа (всем нужна помощь прямо здесь и сейчас). В формах обратной связи можно просить не только номера телефонов, но и другие контактные данные.
Для организации хорошо продуманной обратной связи можно использовать виджеты многочисленных сервисов. Это могут быть формы обратных звонков, платные и бесплатные онлайн-консультанты и многое другое.
В пределах одной страницы можно сочетать самые разные инструменты для организации обратной связи, но в этом случае они не должны быть слишком навязчивыми и перегружать внимание посетителя – под напором настойчивых окошек с различными формами он скорее покинет лендинг, чем воспользуется возможностью что-то купить на нём.
