И так приступим.
1. Подключение библиотеки jQueryСкорее всего вы и так это сделаете, но всеравно напомню об этом.
Нужно в head добавить следующее:
2.Добавляем javascript
Для того, чтобы отправка формы осуществлялась без перезагрузки страницы нам придется воспользоваться технологией ajax. Необходимо после подключенной библиотеки подключить следующий скрипт:
function AjaxFormRequest(result_id,formMain,url) { jQuery.ajax({ url: url, type: "POST", dataType: "html", data: jQuery("#"+formMain).serialize(), success: function(response) { document.getElementById(result_id).innerHTML = response; }, error: function(response) { document.getElementById(result_id).innerHTML = "
Возникла ошибка при отправке формы. Попробуйте еще раз
"; } }); $(":input","#formMain") .not(":button, :submit, :reset, :hidden") .val("") .removeAttr("checked") .removeAttr("selected"); }Его нижняя часть
$(":input","#formMain") .not(":button, :submit, :reset, :hidden") .val("") .removeAttr("checked") .removeAttr("selected");
отвечает за то, чтобы после нажатия на кнопку отправки поля ставали пустыми. Также он может очистить checbox и радиокнопки, если Вы добавите их к данной форме. Если Вам это не нужно, можете просто удалить его.
3.Добавляем htmlВ нужном месте вставляем код с формой приведенный ниже
Оставьте ваши контакты и наш консультант свяжется с вами
Данная форма имеет 2 поля Имя и телефон. Так что ее можно использовать еще и как форму заказа обратного звонка на любом сайте не только Лендинге. Можете добавить свои поля с почтой и адресом и тд.
Кстати, последний input
- это кнопка отправки и она заключенная в div id=messegeResult
. Вся фишка в том что после нажатия кнопки, данные отправятся Вам на почту, а сама кнопка исчезнет, а вместо нее появится текст типа - Сообщение успешно отправлено. Скоро Вам перезвонят.
Можете в div id=messegeResult заключить например вторую строку - Оставьте ваши контакты и наш консультант свяжется с вами
тогда после нажатия на кнопу этот текст изменится на тот, что приведен выше. В общем все что находится в этом диве, после нажатия на кнопку изменится на сообщение об успешной отправке.
Для начала нужно создать файл и назвать его zakaz.php
Далее вставить в него следующий код, отвечающий за обработку
В 4 и в 11 нужно указать почту, на которую будут отправлены данные с формы. В 6 строке $message
начинается все содержание письма.так что если добавите новые поля адреса и почты и тд, то их как раз нужно дописать тут по примеру уже имеющихся Имени и Телефона.
В 15 строке - как раз прописано то сообщение, которое выведется в div id=messegeResult
с предыдущего пункта. Так что можете его изменить под себя.
Чтобы форма выглядела боле-менее читабельно, зададим стили. которые Вы тоже можете менять так как Вам угодно.
Form{ width:350px; height:225px; position:absolute; top:50%; left:50%; right:50%; bottom:50%; background:#f1f1f1; padding: 20px; } .form p{ font-size:18px; color:#333; text-align:center; } input{ background:#fff; font-size:15px; border:2px solid #336699; line-height:20px; padding:7px 10px 6px; margin:10px 0 0; font-size:15px; width:90%; box-shadow:inset 0 2px 7px rgba(0,0,0,.15); transition:all .15s; } input:hover, input:focus{ border-color:#ff6600; } input{ border-color:#ccff33; } .btn{vertical-align:middle;font-size:18px;color:#fff;font-weight:700;text-align:center;line-height:1.3 !important;padding:5px 10px 5px;margin:10px 0 0;border:0;cursor:pointer;background:#97ca33;} .btn:active{ color:rgba(255,255,255,.6); background:#57900f; box-shadow:inset 0 2px 15px rgba(0,0,0,.2); } .btn:hover{ background:#a6d251; }
Если все сделано правильно то у Вас должна получиться форма. На этом все, спасибо за внимание 🙂
Как создать успешную интернет-площадку для продвижения бизнеса? В чем секрет и принципы ее формирования? Эти и другие вопросы волнуют тех, кто решил обзавестись личной посадочной страницей в мировой сети, ожидающих потока покупателей на свой товар. Итак, рассмотрим детали.
Секреты создания формы для лендингаНаверное, вряд ли кто-то будет спорить с утверждением, что самым главным элементом посадочной страницы является веб-форма для приема заказов . По сути, именно ради этого лендинг и создается. Созданием формы заказа для лендинга занимаются профессионалы, которые точно знают секрет разработки вызывающего интерес и вместе с тем достаточно простого варианта.
Грамотно составленная лендинг пейдж форма должна быть понятной самому обычному пользователю, открывшему страницу. Если в открывшемся окне полей будет слишком много, это просто отпугнет потенциального покупателя и он уйдет к конкурентам. Так что разработка качественной формы заказа для landing page - задание не менее ответственное, чем главная страница компании. Для того чтобы достигнуть успеха, то есть высокой конверсии, необходимо всего лишь следовать нескольким несложным правилам.
Требования к созданию идеальной формы заказа для landing pageПосадочная интернет-страница должна быть готова принимать покупателей. Для этого надо брать во внимание несколько основополагающих факторов.
Эти, казалось бы, всем известные постулаты очень важны и пренебречь ими - равносильно обречь себя на неудачу. Это все ведет к потере клиентов и их денег. После осознания важности формы заказа для лендинга пора задаться другим вопросом, как и где ее можно создать?
Пример формы заказа для landing page
Если только вы не обладаете достаточными знаниями и умениями, а таких меньшинство, вряд ли у вас получится рабочая форма для landing page, которая будет безукоризненно выполнять возложенные на нее функции. Некоторые ищут исходные коды в открытом доступе в сети, хотя такой способ может принести гораздо больше проблем, чем пользы. Во-первых, как будет работать форма неизвестно, тестирование займет много времени, да и это не гарантирует 100%-ной работоспособности. Письма с формы могут попадать в спам или вообще не отправляться или приходить в непонятной кодировке. В последствие выяснится, что некоторые заказы потерялись, или произошел другой сбой, а все это вряд ли благотворно отобразиться на имидже продавца. Во-вторых, что делать, если понадобиться внести какие-то изменения? Самостоятельно копаться в коде или приглашать специалиста, услуги которого также могут влететь в копеечку.
Второй вариант - привлечь к этой задаче фрилансера. Но и этот путь решения проблемы не лишен подводных камней. Топовые фрилансеры, конечно, могут сделать идеальную форму захвата для лендинга, но где найти такого? На поиски может уйти много времени. Можно, конечно, попробовать конкурсный отбор, но это все время и деньги. Опять-таки, актуальным остается вопрос внесения изменений в форму. Хорошо, если координаты автора формы сохранились, а если нет? Да и то, если связь сохранилась, он может быть просто занят другими заказами и не сможет вам помочь. А другие фрилансеры не всегда готовы исправлять работу других собратьев по цеху.
Наиболее эффективным решением данной задачи является онлайн конструктор веб-форм Formdesigner . Данный сервис не требует особенных умений, обладает понятным интерфейсом. Встроенный дизайнер форм поможет создать идеальную форму захвата, лаконично вписывающуюся в веб-сайт. Продумана и защита в виде пароля, протокола HTTPS, и Captcha. Онлайн-платежи доступны и легки, позволят принимать деньги в считанные минуты. Уникальные сценарии создаются с помощью динамических форм .
Принцип работыКонструктор появился в 2013 году и уже завоевал доверие новичков и профессиональных вебмастеров. Он позволяет владельцам сайтов в считанные минуты создать форму заявок , обратной связи , подписки , форму заказа и многие другие, идеально вписывающиеся в интерфейс любого сайта. Специальных навыков и знаний не нужно, форма захвата на лендинг пейдж, благодаря сервису Formdesigner, будет готова в течение 5 минут. Помимо этого, при необхолимости что-то изменить, достаточно просто еще раз посетить сайт и внести необходимые правки. Кроме того, все это можно сделать совершенно бесплатно, что тоже немаловажно.
Говоря про основные преимущества конструктора веб-форм Formdesigner, можно отметить:
Конструктор легок и прост. Необходимую вам веб-форму можно создать всего за несколько кликов мышкой. Для добавления нового элемента достаточно кликнуть на него или перетащить в планируемое место, и он сразу же добавиться в веб-форму. Отредактировать элемент также можно с легкостью, просто кликнув на него в форме и в открывшемся окне внести изменения в его свойства.
Точно также легко производится и настройка внешнего вида, задаются правила валидации и прочие нужные изменения, которые сразу же отображаются в демонстрационном образце формы, без перезагрузки страницы. После окончания работы, остается скопировать готовый код. Его нужно будет вставить на свой сайт. Далее пойдет прием долгожданных заявок. При использовании данного конструктора, все загруженные формы мгновенно отображаются, и не требуется томительных перезагрузок странички.
Можно создать сайт с нуля и подкорректировать имеющийся. С прекрасным помощником в мире созидания веб контента вам не придется долго ждать клиентов.
Менять изображение на первом экране или «подгонять» выгоды под клиента, но какой в этом толк, если взаимодействия с формой не происходит?
Статистика показывает, что в 20% случаев
причина недостаточной конверсии посадочной страницы кроется не столько в плохом УТП или отсутствии целевого трафика, сколько в небрежном и непродуманном оформлении формы заявки
.
Посетитель не желает оставлять свои контактные данные, «бросает» форму и уходит. Вы теряете потенциальных клиентов, а значит и доход.
Почему так происходит и как повысить конверсию формы заявок
?
2 причины плохой «заполняемости» форм:
В статье приведен простой чек-лист , с помощью которого вы сможете легко проанализировать формы на landing page . Для работы я рекомендую использовать 4 инструмента : карту кликов, карту скроллинга, аналитику форм и .
Форма заявки должна быть видна на первом экране без «прокрутки»Изучите карту скроллинга . Посмотрите, попадают ли основные конверсионные элементы в просматриваемые части страницы. Проверяйте сверстанную страницу на устройствах с разным расширением экрана. Уделите особое внимание мобильной версии!
Проверяйте все браузерыНужно проверить, как работает форма заявки во всех браузерах , и это стоит протестировать отдельно! Если функционал неисправен, не будет результата, данных для анализа и выработки рекомендаций.
Количество полей должны соответствовать поставленной задачеРис.2 Пример дополнительного поля, решающего проблему клиента
Правило простое – уделите внимание удобству заполнения этих форм:
Отталкивайтесь от особенностей продукта или ниши. Дайте возможность связаться с вами по телефону, e-mail или чату для консультации. Учитывайте поведение клиентов – кому-то легче сразу позвонить и обговорить условия, в некоторых случаях (получение КП) не обойтись без взаимодействия с формой.
Закрытая или открытая форма?При работе с зарубежными сайтами мы все чаще сталкиваемся с закрытой формой заявки — простой и понятной кнопкой в стиле «Начать сейчас». Но однозначного ответа, какая из форм работает лучше, — нет. В конечном итоге, все зависит от того, насколько грамотно вы построили логическую «подводку» к заветной кнопке .
Правила оформления полей в поп-апе будут те же:
Рис.3 Пример хорошей «подводки» к закрытой форме заявки
Не используйте шаблонные фразы!Типа «получите бесплатную консультацию». Продумайте несколько вариантов «легкого шага», способного заинтересовать пользователя и заставить его взаимодействовать с формой .
Хороший пример в нише продажи авто. Вместо стандартной «Получите консультацию по продаже автомобиля» использован классный прием: посетителю предлагается сразу прикинуть сумму, которую он может получить.
Призывайте к конкретному действиюУходите от формулировки «отправить заявку». Гораздо лучше сделать кнопку с описанием конкретного результата (например, «получить КП» или «рассчитать стоимость»). В идеале текст кнопки должен частично дублировать «подводку».
Привлеките дополнительное вниманиеИспользуйте графические направляющие . Самый простой вариант — «освободить» пространство вокруг формы и направить взгляд посетителя при помощи указателя или стрелки. Так форма станет более заметной и сильнее будет притягивать к себе внимание.
Заставьте изображение (фотобаннер первого экрана) работать на СТАВ случае, когда форму невозможно подчеркнуть графическими элементами или сделать кнопку крупнее и контрастнее, «обратите» на нее внимание пользователя посредством изображения. Грамотно подберите фото и направьте взгляд посетителя в нужном вам направлении.
Рис.7 Взгляд девушки обращает ваше внимание на форму
Изучайте взаимодействие пользователей с формамиАналитика форм заявки показывает, какие поля заполняют/не заполняют пользователи. А Вебвизор, благодаря своему функционалу, выступает в роли «большого брата», который следит за поведением посетителя. Если взаимодействие с формой было, но данные по каким-то причинам не были отправлены, он покажет вам, в чем была проблема. Иными словами, он поможет понять, на каких этапах заполнения у пользователей возникают трудности, какие поля можно убрать, а какие стоит дополнить подсказкой для корректного заполнения.
Поблагодарите клиента – это важноПродумайте детали! Грамотно оформленная страница благодарности – это не только проявление уважения к клиенту, но и инструмент повышения конверсии . Еще раз — отойдите от шаблонов! Проявите креатив — вместо стандартной фразы «Ваша заявка принята» пропишите что-то более персональное, касающееся вас и вашей компании. Страница «спасибо» при правильном оформлении может стать хорошей площадкой для экспериментов.
ВыводыБудьте во всеоружии и опережайте своих конкурентов. Конверсионных лендингов вам!
Привет, Друзья! Хочу представить вашему вниманию универсальный скрипт отправки данных из форм на email . Скрипт идеально подойдет для сайтов типа Landing Page , сайтов визиток и т.д. Наш скрипт Формы обратной связи выделяется среди массы остальных скриптов в интернете тем, что имеет возможность подключения неограниченного количества форм с разными полями на одной странице и способен отправлять письма нескольким получателям .
Итак. Давайте приступим. Начнем пожалуй с возможностей скрипта.
О остальных файлах давайте подробнее:
feedback.js
- основной файл скрипта, отвечает за AJAX отправку формы
.
jquery.arcticmodal.js,
jquery.arcticmodal.
- обеспечивают возможность вывода форм в модальном окне.
jquery.jgrowl.js,
jquery.jgrowl.css
- позволяют выводить уведомления на странице (блоки в верхнем углу страницы).
Вот мы и разобрались с основными настройками подключения нашего скрипта отправки форм на E-mail. Давайте теперь заглянем во внутрь и разберемся с настройкой полей, уведомлений да и всего остального, что там есть.
Пример настроек для одной формыНастройки всех форм хранятся в файле feedback\index.phpПомните я говорил о обязательном атрибуте name=""
?
Пример html кода для наглядности
Теперь давайте разберемся с массивами и для чего они нужны.
$form["form-1"] = array();
$form["form-2"] = array();
и т.д.
Это основные массивы для каждой новой формы, содержат в себе:
Пример: (feedback/tpl/form-1.tpl
)
Заголовок в теле письма | |
%%name.title%% | %%name.value%% |
%%tell.title%% | %%tell.value%% |
name
, tell
и т.д. - Это атрибуты (name="") полей которые заполняет пользователь.
title
- Название элемента формы, которое задается в массиве настроек элементов формы.
value
- Значение элемента формы.
На сегодня пока все, но скрипт конечно же не идеален, так что комментарии и описания багов приветствуются и в следующих версиях будут исправлены.
P.S. Скрипт разработан командой