Для развития веб проекта очень важно получать обратную связь от посетителей. К сожалению, на многих веб сайтах возможность отправить сообщение разработчикам либо вообще не предоставляется, либо связана с достаточно серьезными трудностями.
Сегодня мы сделаем простое решение данной задаче. Используя jQuery, PHP и класс PHPMailer форма посылает предложение пользователя прямо в ваш почтовый ящик.
HTML
Начнем с разметки HTML. Стили включаются вверху документа, а файлы JavaScript - внизу. Таким образом оптимизируется процесс загрузки страницы, так скрипты грузятся последними, позволяя пользователю увидеть содержание страницы.
demo.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Форма обратной связи с использованием PHP и jQuery | Демонстрация для сайта RUSELLER.COM</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="feedback">
<!-- Пять цветных элементов span, смещенных влево один к другому -->
<span class="color color-1"></span>
<span class="color color-2"></span>
<span class="color color-3"></span>
<span class="color color-4"></span>
<span class="color color-5"></span>
<div class="section">
<!-- Элемент span стрелки смещается вправо -->
<h6><span class="arrow up"></span>Обратная связь</h6>
<p class="message">Пожалуйста, включите контактную информацию, если вы хотите получить ответ.</p>
<textarea></textarea>
<a class="submit" href="">Отправить</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Внутри 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 = $('<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'][date('d-m-Y-H')] > 10 )){
die('Пожалуста, подождите несколько минут, прежде чем отправить сообщение снова.');
}
$_SESSION['lastSubmit'] = time();
$_SESSION['submitsLastHour'][date('d-m-Y-H')]++;
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() добавляет адрес получателя (вы можете добавить более одного получателя с помощью дополнительных вызовов данного метода). После добавления темы письма и текста указывается адрес для ответов и производится отправка сообщения.
Готово!
Заключение
Вы можете использовать данную форму для организации быстрой обратной связи с посетителем вашего сайта. Очень низкий барьер перед отправкой - нужно просто заполнить текстовове поле и нажать кнопку - создаст отличные условия для того, чтобы посетители ваших страниц начали делиться своими идеями. Скрипт также хорошо структурирован и прост в настройке, что поможет вам с минимальными усилиями использовать его на своем сайте.