Форма обратной связи с телефоном. Форма обратной связи на jQuery и PHP. Пример настроек для одной формы

21.09.2020

Для развития веб проекта очень важно получать обратную связь от посетителей. К сожалению, на многих веб сайтах возможность отправить сообщение разработчикам либо вообще не предоставляется, либо связана с достаточно серьезными трудностями.

Сегодня мы сделаем простое решение данной задачи. Используя jQuery, PHP и класс PHPMailer форма посылает предложение пользователя прямо в ваш почтовый ящик.

HTML

Начнем с разметки HTML. Стили включаются вверху документа, а файлы JavaScript - внизу. Таким образом оптимизируется процесс загрузки страницы, так скрипты грузятся последними, позволяя пользователю увидеть содержание страницы.

demo.html

Форма обратной связи с использованием PHP и jQuery | Демонстрация для сайта сайт Обратная связь

Пожалуйста, включите контактную информацию, если вы хотите получить ответ.

Отправить

Внутри body находится div #feedback . Он размещен внизу справа в окне с помощью фиксированного позиционирования, что будет видно в разделе урока, посвященного CSS.

Внутри данного div размещаются пять цветных элементов span . Каждый из них имеет 20% ширины и смещается влево. Таким образом, они размещаются точно на по всей ширине div #feedback .

Затем следует контейнер .section, который содержит заголовок, область текста и кнопку.

CSS

Перейдем к заданию стилей для формы. Для начала скажем несколько слов о том, из чего состоит структура таблицы стилей. Если взглянуть на определения CSS, представленные ниже, то можно заметить что каждое правило начинается с #feedback . Таким образом организуется подобие пространства имен в CSS, что облегчает добавление кода к существующему веб-сайту без конфликтов.

styles.css - Часть 1

#feedback{ background-color:#9db09f; width:310px; height:330px; position:fixed; bottom:0; right:120px; margin-bottom:-270px; z-index:10000; } #feedback .section{ background:url("img/bg.png") repeat-x top left; border:1px solid #808f81; border-bottom:none; padding:10px 25px 25px; } #feedback .color{ float:left; height:4px; width:20%; overflow:hidden; } #feedback .color-1{ background-color:#d3b112;} #feedback .color-2{ background-color:#12b6d3;} #feedback .color-3{ background-color:#8fd317;} #feedback .color-4{ background-color:#ca57df;} #feedback .color-5{ background-color:#8ecbe7;} #feedback h6{ background:url("img/feedback.png") no-repeat; height:38px; margin:5px 0 12px; text-indent:-99999px; cursor:pointer; } #feedback textarea{ background-color:#fff; border:none; color:#666666; font:13px "Lucida Sans",Arial,sans-serif; height:100px; padding:10px; width:236px; resize:none; outline:none; overflow:auto; -moz-box-shadow:4px 4px 0 #8a9b8c; -webkit-box-shadow:4px 4px 0 #8a9b8c; box-shadow:4px 4px 0 #8a9b8c; }

Первый элемент, для которого задается стиль - это div #feedback . Ему назначается фиксированная позиция и привязка к окну браузера. После него идет определение для div .section и пяти цветных элементов span . Данные элементы отличаются только цветом фона, который назначается отдельно для каждого класса.

В самом низу представленной части CSS файла определяются правила для вывода области текста.

styles.css - Часть 2

#feedback a.submit{ background:url("img/submit.png") no-repeat; border:none; display:block; height:34px; margin:20px auto 0; text-decoration:none; text-indent:-99999px; width:91px; } #feedback a.submit:hover{ background-position:left bottom; } #feedback a.submit.working{ background-position:top right !important; cursor:default; } #feedback .message{ font-family:Corbel,Arial,sans-serif; color:#5a665b; text-shadow:1px 1px 0 #b3c2b5; margin-bottom:20px; } #feedback .arrow{ background:url("img/arrows.png") no-repeat; float:right; width:23px; height:18px; position:relative; top:10px; } #feedback .arrow.down{ background-position:left top;} #feedback h6:hover .down{ background-position:left bottom;} #feedback .arrow.up{ background-position:right top;} #feedback h6:hover .up{ background-position:right bottom;} #feedback .response{ font-size:21px; margin-top:70px; text-align:center; text-shadow:2px 2px 0 #889889; color:#FCFCFC; display:block; }

Во второй части таблицы стилей определяется вид кнопки отправки. Отметим, что существует три состояния кнопки, изображения для которых содержатся в одном файле для фонового рисунка - submit.png . Они выводятся только когда необходимо.

jQuery

Форма обратной связи имеет два состояния - минимизированной и максимальное. При загрузке по умолчанию устанавливается минимизированное состояние внизу справа на экране. А jQuery переводит форму в максимальное состояние, когда пользователь нажимает кнопку мыши на заголовке. Данная функция выполняется с помощью привязки события и выполнения простых анимаций.

script.js - Часть 1

$(document).ready(function(){ // Относительный URL скрипта submit.php. // Вероятно, вам нужно будет его поменять. var submitURL = "submit.php"; // Кэшируем объект feedback: var feedback = $("#feedback"); $("#feedback h6").click(function(){ // Значения свойств анимации хранятся // в отдельном объекте: var anim = { mb: 0, // Поле снизу pt: 25 // Отступ сверху }; var el = $(this).find(".arrow"); if(el.hasClass("down")){ anim = { mb: -270, pt: 10 }; } // Первая анимация перемещает вверх или вниз форму, а вторая перемещает // заголовок, так что он выравнивается по минимизированной версии feedback.stop().animate({marginBottom: anim.mb}); feedback.find(".section").stop().animate({paddingTop:anim.pt},function(){ el.toggleClass("down up"); }); });

Для того, чтобы код был простым и понятным, вверху создается объект anim , который содержит значения для анимации, и размещается оператор if . В зависимости ото существования класса ‘down ‘ на стрелке, мы разворачиваем или сворачиваем форму.

Вторая часть script.js обрабатывает работу с AJAX с submit.php .

script.js - Часть 2

$("#feedback a.submit").live("click",function(){ var button = $(this); var textarea = feedback.find("textarea"); // Мы используем класс working не только для задания стилей для кнопки отправки данных, // но и как своеобразный замок для предотвращения множественных генераций формы. if(button.hasClass("working") || textarea.val().length < 5){ return false; } // Запираем форму и изменяем стиль кнопки: button.addClass("working"); $.ajax({ url: submitURL, type: "post", data: { message: textarea.val()}, complete: function(xhr){ var text = xhr.responseText; // Данная операция помогает пользователю определить ошибку: if(xhr.status == 404){ text = "Путь к скрипту submit.php неверный."; } // Прячем кнопку и область текста, после которой // мы показывали полученный ответ из submit.php button.fadeOut(); textarea.fadeOut(function(){ var span = $("",{ className: "response", html: text }) .hide() .appendTo(feedback.find(".section")) .show(); }).val(""); } }); return false; }); });

Мы используем метод jQuery для AJAX $.ajax() для взаимодействия с submit.php . Данный метод дает немного больше контроля над соединением, чем $.get() и $.post() .

Одним из преимуществ метода является видимость свойств объекта во "всей" возвратной функции. Здесь мы проверяем статус ответа на соответствие ошибке 404 (не найдена страница) , и выводим сообщение пользователю с просьбой проверить путь submitURL .

Теперь пора перейти к завершающей части - PHP.

PHP

PHP обрабатывает данные, переданные с AJAX, проверяет их и посылает e-mail сообщение по заданному адресу.

submit.php

// Здесь нужно ввести свой адрес $emailAddress = "test@example.ru"; // Используем сессию, чтобы предотвратить флудинг: session_name("quickFeedback"); session_start(); // Если последняя форма была отправлена меньше 10 секунд назад, // или пользователь уже послал 10 сообщений за последний час if($_SESSION["lastSubmit"] && (time() - $_SESSION["lastSubmit"] < 10 || $_SESSION["submitsLastHour"] > 10)){ die("Пожалуста, подождите несколько минут, прежде чем отправить сообщение снова."); } $_SESSION["lastSubmit"] = time(); $_SESSION["submitsLastHour"]++; require "phpmailer/class.phpmailer.php"; if(ini_get("magic_quotes_gpc")){ $_POST["message"] = stripslashes($_POST["message"]); } if(mb_strlen($_POST["message"],"utf-8") < 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->IsMail(); // Добавляем адрес получателя $mail->AddAddress($emailAddress); $mail->Subject = "Новое письмо из формы обратной связи"; $mail->MsgHTML($msg); $mail->AddReplyTo("noreply@".$_SERVER["HTTP_HOST"], "Форма обратной связи на демо странице"); $mail->SetFrom("noreply@".$_SERVER["HTTP_HOST"], "Форма обратной связи на демо странице"); $mail->Send(); echo "Спасибо!";

Сначала мы используем управление сессиями, чтобы определить, как часто использует пользователь отправку формы в течение последнего часа, а также определяем время, прошедшее с последней отправки. Если с момента последней отправки прошло менее 10 секунд, или пользователь уже посылал более 10 сообщений в течение последнего часа, выводится сообщение об ошибке.

E-mail отправляется с помощью класса PHPMailer . Внимание! Он работает только с PHP5.

Несколько методов PHPMailer используется для конфигурации исходящего e-mail. Метод IsMail() указывает классу использовать внутреннюю функцию PHP mail() . Метод AddAddress() добавляет адрес получателя (вы можете добавить более одного получателя с помощью дополнительных вызовов данного метода). После добавления темы письма и текста указывается адрес для ответов и производится отправка сообщения.

Готово!

Заключение

Вы можете использовать данную форму для организации быстрой обратной связи с посетителем вашего сайта. Очень низкий барьер перед отправкой - нужно просто заполнить текстовове поле и нажать кнопку - создаст отличные условия для того, чтобы посетители ваших страниц начали делиться своими идеями. Скрипт также хорошо структурирован и прост в настройке, что поможет вам с минимальными усилиями использовать его на своем сайте.

Не секрет, что очень часто приходится как-то общаться с посетителями своего сайта. Разумеется, можно просто дать свой e-mail (как сделал я), а можно предложить и другой способ - это форма обратной связи . Разумеется, здесь потребуется знание PHP . Но чтобы Вам не надо было писать всё с нуля, я предоставляю Вам очень даже хороший скрипт формы обратной связи .

После скачивания извлекайте архив на Ваш сайт (смотрите, ничего не сотрите у себя). Теперь давайте его настроим. Для этого открываем файл "config.php ". И меняем значения следующих переменных:

"mailto " - поставьте вместо "admin@aceweb.ru " адрес своего почтового ящика.

"charset " - поставьте кодировку, хотя если Ваш сайт русскоязычный, то можете оставить "windows-1251 ".

"content " - советую оставить "text/plain ", так как вряд ли Ваши посетители будут отправлять Вам сообщения в HTML-формате .

Теперь Вы можете запустить файл index.php у скрипта. В результате, перед Вами возникнет форма. Можете её заполнить и отправить письмо.

Теперь встаёт вопрос: "Как вставить эту форму обратной связи на свой сайт? ". Чтобы это сделать, найдите файл, который отвечает у Вас за страницу обратной связи (пусть это будет "feedback.html "). Сразу измените расширение на php (то есть на "feedback.php "). Скопируйте код из index.php скрипта в файл со страницей обратной связи (feedback.php ). Теперь Вы можете делать всё, что пожелаете нужным между тегами и , только не стирайте то, что Вы вставили из index.php . То что между тегов тоже не трогайте, если точно не знаете, что делаете.

И, наконец, если Вам не нравится внешний вид формы, то Вы можете его подкорректировать в файле "styling.css ".

Если у Вас остались какие-либо вопросы, либо происходят какие-то глюки со скриптом (я его не тестировал), то пишите мне на e-mail , чтобы я исправил.

Чтобы не зависеть от работы чужих скриптов, научитесь их создавать самостоятельно. Этому Вас научит мой Видеокурс "PHP и MySQL с Нуля до Гуру ":

Привет, Друзья! Хочу представить вашему вниманию универсальный скрипт отправки данных из форм на email . Скрипт идеально подойдет для сайтов типа Landing Page , сайтов визиток и т.д. Наш скрипт Формы обратной связи выделяется среди массы остальных скриптов в интернете тем, что имеет возможность подключения неограниченного количества форм с разными полями на одной странице и способен отправлять письма нескольким получателям .

Итак. Давайте приступим. Начнем пожалуй с возможностей скрипта.

Подключение неограниченного количества форм на одной странице.

Проверка правильности заполнения полей.

Настройка уведомлений.

Возможность использования писем для каждой формы.

Тип письма - (если используются html теги)

Отправка на неограниченное количество адресов.

Индивидуальная настройка каждой формы.

Скрипт работает на , без перезагрузки страницы.

Защита от спам ботов.

Первоначальная настройка.
Скрипт работает на основе библиотеки , поэтому первое что нам необходимо сделать это подключить ее. Для этого рекомендую воспользоваться Google Hosted Libraries.

О остальных файлах давайте подробнее:

feedback.js - основной файл скрипта, отвечает за AJAX отправку формы .
jquery.arcticmodal.js,
jquery.arcticmodal. - обеспечивают возможность вывода форм в модальном окне.
jquery.jgrowl.js,
jquery.jgrowl.css - позволяют выводить уведомления на странице (блоки в верхнем углу страницы).

HTML и обязательные атрибуты.
Обязательным атрибутом для всех элементов формы является атрибут 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" => "noreply@email.com", "from_name" => "noreply", "to_email" => "noreply1@email.com, noreply2@email.com", "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="" - необходим для последующей настройки формы.
Так вот пришло время рассказать для чего же он все таки нужен.
name="" - это буквенно-цифровой ключ для массива, должен быть уникальным для массива $form[""]

Пример html кода для наглядности

Теперь давайте разберемся с массивами и для чего они нужны.

$form["form-1"] = array();
$form["form-2"] = array(); и т.д.
Это основные массивы для каждой новой формы, содержат в себе:

"fields" => 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) не соответствие ключу валидации

"cfg" => array(); - Массив настроек формы.

"charset" => "utf-8" - кодировка
"subject" => "Тема письма", - Тема письма
"title" => "Заголовок в теле письма", - Заголовок в теле письма
"ajax" => true, - это аякс форма TODO (если не нужно, поставить - false)
"validate" => true, - (true) если хотим валидацию формы на сервере, заменяет js валидацию при "ajax" => true. Когда выкл(false) то можно не задавать настройки validate полей. TODO
"from_email" => "myemail", - отправитель, указать имя поля(name=«myemail»), а если не нужно email от пользователя, тогда заглушку noreply@email.com
"from_name" => "myname", - отправитель, указать имя поля(name=«myname»), а если не нужно имени пользователя, тогда заглушку No-reply
"to_email" => "noreply1@email.com", - email получателя. Для отправки на несколько адресов перечислить их через запятую. Пример ("to_email" => "noreply1@email.com, noreply2@email.com, noreply3@email.com",)
"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. Скрипт разработан командой

На этом уроке мы познакомимся с функцией mail () , на примере создания формы обратной связи на PHP с последующей отправкой полученных данных на почту.

Для этого создадим два файла - forma.php и mail.php . В первом файлике будет находиться только форма с полями для ввода пользователем данных. Внутри тега form - кнопка "Отправить" и атрибут action , который ссылается на обработчик - mail.php , именно к нему обращаются данные из формы при нажатии кнопки "Отправить" . В нашем примере данные формы отправляются на веб-страницу с названием «/mail.php» . На этой странице прописан скрипт на PHP , который обрабатывает данные формы:

Данные формы отправляются методом POST (обрабатывается как $ _POST ). $ _POST - это массив переменных, переданных текущему скрипту через метод POST .

Ниже вы видите содержимое файла forma.php , поля которой заполняет сам пользователь на каком-нибудь веб-сайте. Все поля для ввода данных обязательно должны иметь атрибут name , значения мы прописываем сами, исходя из логики.

Форма обратной связи на PHP с отправкой на почту

Форма обратной связи на PHP

Оставьте сообщение:
Ваше имя:

E-mail:

Номер телефона:

Сообщение:

Текстовая область может содержать неограниченное количество символов-->

Так форма визуально выглядет в браузере.

Далее пишем код для файла mail.php . Придумываем сами имена для переменных. В PHP переменная начинается со знака $ , а затем имя переменной. Текстовое значение переменной заключается в кавычки. С помощью переменных на емайл администратора передается содержимое формы, просто подставив в квадратные скобки имя элемента формы - значение name .

Таким образом данные из массива $_POST будут переданы соответствующим переменным и отправлены на почту при помощи функции mail . Давайте заполним нашу форму и нажмем кнопку отправить. Не забудьте указать ваш е-майл. Письмо пришло моментально.

просмотров

Сохранить ВКонтакте