Форма обратной связи для лендинга. Форма отправки письма без перезагрузки страницы для лендинга Php обработчик формы обратной связи для лендинга
И так приступим.
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; }
Если все сделано правильно то у Вас должна получиться форма. На этом все, спасибо за внимание 🙂
Приветствую моих читателей, набрался опыта и расскажу Вам о принципах работы формы обратной связи 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 (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.
Менять изображение на первом экране или «подгонять» выгоды под клиента, но какой в этом толк, если взаимодействия с формой не происходит?
Статистика показывает, что в 20% случаев
причина недостаточной конверсии посадочной страницы кроется не столько в плохом УТП или отсутствии целевого трафика, сколько в небрежном и непродуманном оформлении формы заявки
.
Посетитель не желает оставлять свои контактные данные, «бросает» форму и уходит. Вы теряете потенциальных клиентов, а значит и доход.
Почему так происходит и как повысить конверсию формы заявок
?
2 причины плохой «заполняемости» форм:
- неграмотное оформление формы заявки
- ее непродуманный функционал
В статье приведен простой чек-лист , с помощью которого вы сможете легко проанализировать формы на landing page . Для работы я рекомендую использовать 4 инструмента : карту кликов, карту скроллинга, аналитику форм и .
Форма заявки должна быть видна на первом экране без «прокрутки»Изучите карту скроллинга . Посмотрите, попадают ли основные конверсионные элементы в просматриваемые части страницы. Проверяйте сверстанную страницу на устройствах с разным расширением экрана. Уделите особое внимание мобильной версии!
Проверяйте все браузерыНужно проверить, как работает форма заявки во всех браузерах , и это стоит протестировать отдельно! Если функционал неисправен, не будет результата, данных для анализа и выработки рекомендаций.
Количество полей должны соответствовать поставленной задаче
Рис.2 Пример дополнительного поля, решающего проблему клиента
Правило простое – уделите внимание удобству заполнения этих форм:
- используйте подсказки (например, «маску» для телефонных номеров);
- сделайте отправку формы возможной без заполнения всех имеющихся полей;
- ставьте адекватные цели – например, не запрашивайте на подписной странице контактный телефон, если . Посетители не станут заполнять 5 полей, чтобы просто получить демо-версию или каталог.
Отталкивайтесь от особенностей продукта или ниши. Дайте возможность связаться с вами по телефону, e-mail или чату для консультации. Учитывайте поведение клиентов – кому-то легче сразу позвонить и обговорить условия, в некоторых случаях (получение КП) не обойтись без взаимодействия с формой.
Закрытая или открытая форма?При работе с зарубежными сайтами мы все чаще сталкиваемся с закрытой формой заявки — простой и понятной кнопкой в стиле «Начать сейчас». Но однозначного ответа, какая из форм работает лучше, — нет. В конечном итоге, все зависит от того, насколько грамотно вы построили логическую «подводку» к заветной кнопке .
Правила оформления полей в поп-апе будут те же:
- Будьте последовательны . Форма должна быть максимально простой для заполнения.
- Придерживайтесь порядка. Первыми располагайте поля, которые заполнить проще всего (например, «имя»).
- Сформулируйте четкую выгоду. Объясните, зачем посетителю нужно заполнить форму и что он получит .
Рис.3 Пример хорошей «подводки» к закрытой форме заявки
Не используйте шаблонные фразы!Типа «получите бесплатную консультацию». Продумайте несколько вариантов «легкого шага», способного заинтересовать пользователя и заставить его взаимодействовать с формой .
Хороший пример в нише продажи авто. Вместо стандартной «Получите консультацию по продаже автомобиля» использован классный прием: посетителю предлагается сразу прикинуть сумму, которую он может получить.
Уходите от формулировки «отправить заявку». Гораздо лучше сделать кнопку с описанием конкретного результата (например, «получить КП» или «рассчитать стоимость»). В идеале текст кнопки должен частично дублировать «подводку».
Используйте графические направляющие . Самый простой вариант — «освободить» пространство вокруг формы и направить взгляд посетителя при помощи указателя или стрелки. Так форма станет более заметной и сильнее будет притягивать к себе внимание.
В случае, когда форму невозможно подчеркнуть графическими элементами или сделать кнопку крупнее и контрастнее, «обратите» на нее внимание пользователя посредством изображения. Грамотно подберите фото и направьте взгляд посетителя в нужном вам направлении.
Рис.7 Взгляд девушки обращает ваше внимание на форму
Изучайте взаимодействие пользователей с формамиАналитика форм заявки показывает, какие поля заполняют/не заполняют пользователи. А Вебвизор, благодаря своему функционалу, выступает в роли «большого брата», который следит за поведением посетителя. Если взаимодействие с формой было, но данные по каким-то причинам не были отправлены, он покажет вам, в чем была проблема. Иными словами, он поможет понять, на каких этапах заполнения у пользователей возникают трудности, какие поля можно убрать, а какие стоит дополнить подсказкой для корректного заполнения.
Поблагодарите клиента – это важноПродумайте детали! Грамотно оформленная страница благодарности – это не только проявление уважения к клиенту, но и инструмент повышения конверсии . Еще раз — отойдите от шаблонов! Проявите креатив — вместо стандартной фразы «Ваша заявка принята» пропишите что-то более персональное, касающееся вас и вашей компании. Страница «спасибо» при правильном оформлении может стать хорошей площадкой для экспериментов.
Будьте во всеоружии и опережайте своих конкурентов. Конверсионных лендингов вам!
Привет, Друзья! Хочу представить вашему вниманию универсальный скрипт отправки данных из форм на email . Скрипт идеально подойдет для сайтов типа Landing Page , сайтов визиток и т.д. Наш скрипт Формы обратной связи выделяется среди массы остальных скриптов в интернете тем, что имеет возможность подключения неограниченного количества форм с разными полями на одной странице и способен отправлять письма нескольким получателям .
Итак. Давайте приступим. Начнем пожалуй с возможностей скрипта.
Скрипт работает на основе библиотеки , поэтому первое что нам необходимо сделать это подключить ее. Для этого рекомендую воспользоваться Google Hosted Libraries.
О остальных файлах давайте подробнее:
feedback.js
- основной файл скрипта, отвечает за AJAX отправку формы
.
jquery.arcticmodal.js,
jquery.arcticmodal.
- обеспечивают возможность вывода форм в модальном окне.
jquery.jgrowl.js,
jquery.jgrowl.css
- позволяют выводить уведомления на странице (блоки в верхнем углу страницы).
Обязательным атрибутом для всех элементов формы является атрибут name="" - необходим для последующей настройки формы.
Для кнопки (type=«button») обязательно нужно указать class=«feedback» . Так же хочу обратить ваше внимание на то, что в качестве кнопки может выступать любой html тег с классом «feedback».Вызов формы в модальном окнеДля вызова формы в модальном окне сперва нужно определить действие по нажатию на какой либо тег, например div с классом modal_btn
Вызов формы в модальном окне $(document).ready(function() { $(document).on("click", ".modal_btn", function(){ $("#small-modal").arcticmodal(); }); });
Так как форма должна быть видна только в модальном окне ее нужно скрыть, поместив в div с атрибутом style=«display: none;», а также для стилизации модального окна обернуть в парочку стандартных дивов.
x
Вот мы и разобрались с основными настройками подключения нашего скрипта отправки форм на E-mail. Давайте теперь заглянем во внутрь и разберемся с настройкой полей, уведомлений да и всего остального, что там есть.
Пример настроек для одной формыНастройки всех форм хранятся в файле feedback\index.php$form["form-1"] = array("fields" => array("name" => array("title" => "Имя", "validate" => array("preg" => "%%", "minlength" => "3", "maxlength" => "35",), "messages" => array("preg" => "Поле [ %1$s ] возможно содержит ошибку", "minlength" => "Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s", "maxlength" => "Максимальная длинна поля [ %1$s ] превышает допустимую - %2$s",)), "tell" => array("title" => "Телефон", "validate" => array("preg" => "/^((8|\+)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{5,10}$/", "minlength" => "5",), "messages" => array("preg" => "Поле [ %1$s ] возможно содержит ошибку", "minlength" => "Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s",)),), "cfg" => array("charset" => "utf-8", "subject" => "Тема письма", "title" => "Заголовок в теле письма", "ajax" => true, "validate" => true, "from_email" => "[email protected]", "from_name" => "noreply", "to_email" => "[email protected], [email protected]", "to_name" => "noreply1, noreply2", "geoip" => true, "referer" => true, "type" => "html", "tpl" => true, "antispam" => "email77", "antispamjs" => "address77", "okay" => "Сообщение отправлено - OK", "fuck" => "Сообщение отправлено - ERROR", "spam" => "Cпам робот", "notify" => "color-modal-textbox", "usepresuf" => false)); // Следующая форма $form["form-2"] = array("fields" => array(.....
Для добавления настроек новой формы, нужно по примеру массива $form["form-1"] создать новый массив $form[""]
Помните я говорил о обязательном атрибуте name=""
?
Так вот пришло время рассказать для чего же он все таки нужен.
name="" - это буквенно-цифровой ключ для массива, должен быть уникальным для массива $form[""]
Пример html кода для наглядности
Теперь давайте разберемся с массивами и для чего они нужны.
$form["form-1"] = array();
$form["form-2"] = array();
и т.д.
Это основные массивы для каждой новой формы, содержат в себе:
- "name" => array();
- Массив настроек элемента формы (например input name=«name» type=«text»
) который имеет ряд настроек.
- "title" => "Ваше имя" - название элемента формы, будет выводится при ошибках или в шаблоне
- "validate" => array();
- массив, содержит правила валидации элемента формы
- "preg" => "%%" - регулярное выражение
- "minlength" => "3" - минимальный размер поля
- "maxlength" => "35" - максимальный размер поля
- "substr" => "35" - всегда обрезать до N символов
- "messages" => array();
- массив, содержит сообщения валидации, а именно:
- "preg" => "Элемент формы не соответствует регулярному выражению"
- "minlength" => "Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s" - ошибка валидации, ключ(preg) не соответствие ключу валидации
- "maxlength" => "Максимальная длинна поля [ %1$s ] превышает допустимую - %2$s" - ошибка валидации, ключ(preg) не соответствие ключу валидации
- "charset" => "utf-8" - кодировка
- "subject" => "Тема письма", - Тема письма
- "title" => "Заголовок в теле письма", - Заголовок в теле письма
- "ajax" => true, - это аякс форма TODO (если не нужно, поставить - false)
- "validate" => true, - (true) если хотим валидацию формы на сервере, заменяет js валидацию при "ajax" => true. Когда выкл(false) то можно не задавать настройки validate полей. TODO
- "from_email" => "myemail", - отправитель, указать имя поля(name=«myemail»), а если не нужно email от пользователя, тогда заглушку [email protected]
- "from_name" => "myname", - отправитель, указать имя поля(name=«myname»), а если не нужно имени пользователя, тогда заглушку No-reply
- "to_email" => "[email protected]", - email получателя. Для отправки на несколько адресов перечислить их через запятую. Пример ("to_email" => "[email protected], [email protected], [email protected]",)
- "to_name" => "noreply1", - Имя получателя. При отправке на несколько адресов через запятую перечислить имена получателей. Пример ("to_name" => "noreply1, noreply2, noreply3",)
- "geoip" => true, - узнать местоположение по типу TODO
- "referer" => false, - добавлять URL страницы с которой была отправлена форма
- "type" => "plain", - тип письма - plain, html (если используются html теги)
- "tpl" => false, - использовать шаблон письма. Если true, то будет подключен файл шаблона, в соответствии с именем формы (name=«form-1»), из папки и обработан файл (feedback/tpl/form-1.tpl), в противном случае будет отправлено все как есть, каждое поле с новой строки
- "antispam" => "email77", - Анти спам, метод основан на скрытом (display:none) поле, которое автоматом заполняет только робот, тем самым выдает себя.
- "antispamjs" => "address77", - Анти спам, метод основан на скрытом (display:none) поле, изначально заполненное, которое автоматически очищает javascript при загрузке страницы, даже умный робот не может это предвидеть, и тогда он блокируется.
- "okay" => "Сообщение пользователю", - Сообщение пользователю, выводится при условии успешно отправленной формы, можно использовать html теги.
- "fuck" => "Сообщение пользователю", - Сообщение пользователю, выводится при возникновении ошибки отправки формы, можно использовать html теги.
- "spam" => "Сообщение пользователю", - Сообщение пользователю, выводится при подозрении на спам робот, можно использовать html теги.
- "notify" => "color-modal", - какой тип уведомлений показывать, textbox - блоки в верхнем углу страницы, color - цветная подсветка в форме, modal - модальное окно в центре страницы, none - отключить. Можно совмещать, пример: color-modal - ошибки заполнения подсветкой полей, а текстовый статус отправки в модальном окне TODO
- "usepresuf" => false - Используется ли кастомное добавление к теме либо к заголовку письма, на случай не большого изменения можно указать например %%cfg.title.suffix%%, для этого в форме должно быть скрытое поле, подробнее, см. ф-цю presuf()
Во-первых, для того, что-бы форма была отправлена в шаблоне, в настройках формы нужно включить использование файла шаблона - "tpl" => true ,
Во-вторых, нужно создать файл шаблона с расширением *.tpl в папке (feedback/tpl/ ), в соответствии с именем формы (name=«form-1» ).
Пример: (feedback/tpl/form-1.tpl
)
| Заголовок в теле письма | |
| %%name.title%% | %%name.value%% |
| %%tell.title%% | %%tell.value%% |
name
, tell
и т.д. - Это атрибуты (name="") полей которые заполняет пользователь.
title
- Название элемента формы, которое задается в массиве настроек элементов формы.
value
- Значение элемента формы.
На сегодня пока все, но скрипт конечно же не идеален, так что комментарии и описания багов приветствуются и в следующих версиях будут исправлены.
P.S. Скрипт разработан командой
