Привет, Друзья! Хочу представить вашему вниманию универсальный скрипт отправки данных из форм на 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. Скрипт разработан командой
Нужно понимать, что за такую ювелирную работу нужно будет заплатить, но плата того стоит. Нужно обсудить все вопросы по созданию, это повлияет на стоимость работы и на лендинг в целом. Создавая нужно учитывать все возможные мелочи, которые могут привлекать внимание людей: от красоты, до удобства пользования. К тому же, нельзя забывать о психологии и подсознании. Многие решения принимаются подсознательно. И покупка товара – не исключение. Если построить правильную логическую цепочку, которая будет содержать в себе решение проблемы человека, описание этого решения, убеждение, что это решение верное и поможет ему, концентрация на этой цели, подталкивание к действию и само действие, то получится превратить большую часть посетителей в клиентов. Причем, не важно какое будет целевое действие страницы – продажа, подписка на рассылку, приобретение контактных данных посетителя и так далее.
Отдельное внимание нужно уделить форме обратной связи с клиентом. Так как это общение с клиентом, пусть и не прямое. Связь с клиентом крайне важна, так как, один лишь сайт не сможет полностью удовлетворить потребности клиента. Он может обрабатывать лишь стандартные запросы, которых бывает крайне мало, поскольку люди редко выбирают стандартный подход к решению проблемы. Связавшись с клиентом через обратную связь можно увеличить не только оборот продаж/сделок/подписок, но и репутацию компании.
Поскольку личное общение и удовлетворение потребностей клиента очень важно для развития хорошей репутации. Созданию такой формы всегда уделялось отдельное внимание. Использование шаблона, на котором установлена обратная связь сильно ограничивает функционал страницы, потому данная форма всегда вписывалась в основной код вручную с соблюдением всех требований SEO. К такой формы тоже подход особый: она должна быть расположена на видном месте, она должна быть интуитивно понятной и простой в использовании, она не должна спрашивать у клиента много лишней информации, достаточно электронной почты и имени. Расположение влияет на ту категорию людей, которые привыкли быстро искать необходимую информацию и использовать ее. Некоторым достаточно пары секунд пребывания на странице, чтобы оценить будут ли они пользоваться ее услугами или нет. Потому, расположение должно быть таким, чтобы даже такие пользователи успели заинтересоваться предложением и оставить контакты.
Очень важно, чтобы страница была проста в понимании, потому как не все пользователи сети интернет опытны в этом деле. Для охвата аудитории опытной и не очень, нужно чтобы было интуитивное понимание последовательности действий для совершения операции. И не менее важно – количество информации. Это влияет на подсознательный уровень доверия. Если страница спрашивает много контактов: и номер телефона, и электронную почту, номер карты, адрес и так далее. То может возникнуть ощущение, что это страница сделана мошенниками. А это сильный удар «под дых» репутации сайта в целом. Потому – информации нужно спрашивать ровно столько, сколько будет достаточно для связи с клиентом и уточнения его пожеланий и выполнения условий сделки. Лендинг в целом – простой сайт, созданный сложным образом. Он простой для пользователей, но сложный для создания разработчикам. Однако, такая работа стоит затраченных усилий!
Как создать успешную интернет-площадку для продвижения бизнеса? В чем секрет и принципы ее формирования? Эти и другие вопросы волнуют тех, кто решил обзавестись личной посадочной страницей в мировой сети, ожидающих потока покупателей на свой товар. Итак, рассмотрим детали.
Секреты создания формы для лендингаНаверное, вряд ли кто-то будет спорить с утверждением, что самым главным элементом посадочной страницы является веб-форма для приема заказов . По сути, именно ради этого лендинг и создается. Созданием формы заказа для лендинга занимаются профессионалы, которые точно знают секрет разработки вызывающего интерес и вместе с тем достаточно простого варианта.
Грамотно составленная лендинг пейдж форма должна быть понятной самому обычному пользователю, открывшему страницу. Если в открывшемся окне полей будет слишком много, это просто отпугнет потенциального покупателя и он уйдет к конкурентам. Так что разработка качественной формы заказа для landing page - задание не менее ответственное, чем главная страница компании. Для того чтобы достигнуть успеха, то есть высокой конверсии, необходимо всего лишь следовать нескольким несложным правилам.
Требования к созданию идеальной формы заказа для landing pageПосадочная интернет-страница должна быть готова принимать покупателей. Для этого надо брать во внимание несколько основополагающих факторов.
Эти, казалось бы, всем известные постулаты очень важны и пренебречь ими - равносильно обречь себя на неудачу. Это все ведет к потере клиентов и их денег. После осознания важности формы заказа для лендинга пора задаться другим вопросом, как и где ее можно создать?
Пример формы заказа для landing page
Если только вы не обладаете достаточными знаниями и умениями, а таких меньшинство, вряд ли у вас получится рабочая форма для landing page, которая будет безукоризненно выполнять возложенные на нее функции. Некоторые ищут исходные коды в открытом доступе в сети, хотя такой способ может принести гораздо больше проблем, чем пользы. Во-первых, как будет работать форма неизвестно, тестирование займет много времени, да и это не гарантирует 100%-ной работоспособности. Письма с формы могут попадать в спам или вообще не отправляться или приходить в непонятной кодировке. В последствие выяснится, что некоторые заказы потерялись, или произошел другой сбой, а все это вряд ли благотворно отобразиться на имидже продавца. Во-вторых, что делать, если понадобиться внести какие-то изменения? Самостоятельно копаться в коде или приглашать специалиста, услуги которого также могут влететь в копеечку.
Второй вариант - привлечь к этой задаче фрилансера. Но и этот путь решения проблемы не лишен подводных камней. Топовые фрилансеры, конечно, могут сделать идеальную форму захвата для лендинга, но где найти такого? На поиски может уйти много времени. Можно, конечно, попробовать конкурсный отбор, но это все время и деньги. Опять-таки, актуальным остается вопрос внесения изменений в форму. Хорошо, если координаты автора формы сохранились, а если нет? Да и то, если связь сохранилась, он может быть просто занят другими заказами и не сможет вам помочь. А другие фрилансеры не всегда готовы исправлять работу других собратьев по цеху.
Наиболее эффективным решением данной задачи является онлайн конструктор веб-форм Formdesigner . Данный сервис не требует особенных умений, обладает понятным интерфейсом. Встроенный дизайнер форм поможет создать идеальную форму захвата, лаконично вписывающуюся в веб-сайт. Продумана и защита в виде пароля, протокола HTTPS, и Captcha. Онлайн-платежи доступны и легки, позволят принимать деньги в считанные минуты. Уникальные сценарии создаются с помощью динамических форм .
Принцип работыКонструктор появился в 2013 году и уже завоевал доверие новичков и профессиональных вебмастеров. Он позволяет владельцам сайтов в считанные минуты создать форму заявок , обратной связи , подписки , форму заказа и многие другие, идеально вписывающиеся в интерфейс любого сайта. Специальных навыков и знаний не нужно, форма захвата на лендинг пейдж, благодаря сервису Formdesigner, будет готова в течение 5 минут. Помимо этого, при необхолимости что-то изменить, достаточно просто еще раз посетить сайт и внести необходимые правки. Кроме того, все это можно сделать совершенно бесплатно, что тоже немаловажно.
Говоря про основные преимущества конструктора веб-форм Formdesigner, можно отметить:
- Конструктор работает онлайн в режиме реального времени;
- Весь процесс создания веб-формы прозрачен и происходит у вас на глазах;
- Все данные из формы хранятся на сервере и доступны 24 часа в сутки;
- Возможность загрузки файлов и использования пользовательского СSS позволяет сделать уникальную веб-форму для лендинга.
Конструктор легок и прост. Необходимую вам веб-форму можно создать всего за несколько кликов мышкой. Для добавления нового элемента достаточно кликнуть на него или перетащить в планируемое место, и он сразу же добавиться в веб-форму. Отредактировать элемент также можно с легкостью, просто кликнув на него в форме и в открывшемся окне внести изменения в его свойства.
Точно также легко производится и настройка внешнего вида, задаются правила валидации и прочие нужные изменения, которые сразу же отображаются в демонстрационном образце формы, без перезагрузки страницы. После окончания работы, остается скопировать готовый код. Его нужно будет вставить на свой сайт. Далее пойдет прием долгожданных заявок. При использовании данного конструктора, все загруженные формы мгновенно отображаются, и не требуется томительных перезагрузок странички.
Можно создать сайт с нуля и подкорректировать имеющийся. С прекрасным помощником в мире созидания веб контента вам не придется долго ждать клиентов.
Приветствую моих читателей, набрался опыта и расскажу Вам о принципах работы формы обратной связи 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 (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.
Есть специальные блоки, содержащие форму для заявки. Такие блоки находятся в группе "Форма-лид" в левой боковой колонке. При отправке формы регистрируется выполнение целевого действия на лендинге.
Форму вы можете настроить под ваши задачи.
Вы можете изменить текст на кнопке в форме, а также настроить URL, по которому пользователь будет перенаправлен после отправки формы.
Вы можете настроить поля для ввода данных.
Для наведите мышку на поле и в появившемся меню нажмите "Настроить поле".
В появившемся всплывающем окне вы можете настроить параметр "name" (имя поля в форме). Можно вводить только латинские символы.
Также можете настроить параметр placeholder. Это заголовок, который отображается к поле, когда оно не активно и не содержит данных, введенных пользователем. Например, для ввода e-mail следует написать "Введите ваш e-mail".
Заявка отправленная через форму будет отправлена к вам на почту, через которую вы авторизуетесь в сервисе.
Вы можете установить другой e-mail. Для этого в общих настройках лендинга укажите нужный e-mail.
Вы можете интегрировать лендинг с любым внешним сервисом, к примеру сторонней CRM-системой.
Для этого в общих настройках лендинга в поле "Отправлять форму с лендинга по URL" установите нужный URL. А также укажите, каким методом должны отправляться данные: GET или POST.
В этом случае кроме отправки данных из формы на e-mail, они также будут отправляться по указанному URL указанным методом.
