Когда вы выпускаете веб-продукт, нет ничего более полезного, чем получить на ранних этапах отзывы от пользователей о продукте. К несчастью, многие сайты не уделяют достаточно внимания форме обратной связи. Она или примитивная или очень сложная или ее нет совсем.
Сегодня мы найдем решение этой проблемы. Инструменты для этого — jQuery, PHP и класс PHPMailer.
HTML
Давайте начнем с HTML разметки. Стили находятся в начале документа, а JavaScript файлы в конце. Это нужно, чтобы страница загружалась быстрее. Сначала загружаются все стили, а в конце функционал JavaScript.
feedback.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quick Feedback Form w/ PHP and jQuery </title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="feedback">
<!-- Five color spans, floated to the left of each other -->
<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">
<!-- The arrow span is floated to the right -->
<h6><span class="arrow up"></span>Feedback</h6>
<p class="message">Please include your contact information if you'd like to receive a reply.</p>
<textarea></textarea>
<a class="submit" href="">Submit</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. Он крепится в нижнему правому углу окна с помощью позиционирования fixed.
Внутри #feedback находятся 5 цветных элементов span.У каждого стоит ширина 20% и свойство float:left. Т.е. они полностью по ширине заполняют весь элемент div.
Кроме того, еще есть контейнер .section, в котором находятся заголовок, текстовая область и кнопка.
CSS
Переходя к стилям формы, стоит сказать пару слов о том, как структурирована таблица стилей. Как вы видите из кода ниже, каждый элемент начинается с #feedback. Этим кодом мы присваиваем все названия элементов родителю. Это нужно для того, чтобы в будущем не было конфликтов с другими наименованиями элементов на сайте.
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;
-moz-box-shadow:4px 4px 0 #8a9b8c;
-webkit-box-shadow:4px 4px 0 #8a9b8c;
box-shadow:4px 4px 0 #8a9b8c;
}
Первому элементу #feedback div присваивается фиксированное позиционирование к правом нижнему углу окна браузера. Далее назначаются стили для div .section, и пять цветных элемента span. Они различаются только цветами на заднем плане.
В конце CSS правил определяется отображение элемента textarea.
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;
}
Во второй части таблицы стилей мы назначаем стили для кнопки. Стоит обратить внимание, что у кнопки существует три состояния. Это состояние кнопки в состоянии покоя, когда на нее наводят мышкой(hover) и режим «работы», когда она нажата. Когда кнопка в таком режиме, то эффект hover дезактивируется.
jQuery
Форма обратной связи имеет два состояния: минимизирована и максимизирована. При загрузке, по умолчанию, она свернута в правом нижнем углу экрана браузера. Затем она разворачивается, если щелкнуть по заголовку мышкой. Все это построено на простых событиях и анимации, что и видно из кода, расположенного ниже.
script.js – часть 1
$(document).ready(function(){
// The relative URL of the submit.php script.
// You will probably have to change it.
var submitURL = 'submit.php';
// Caching the feedback object:
var feedback = $('#feedback');
$('#feedback h6').click(function(){
// We are storing the values of the animated
// properties in a separate object:
var anim = {
mb : 0, // Margin Bottom
pt : 25 // Padding Top
};
var el = $(this).find('.arrow');
if(el.hasClass('down')){
anim = {
mb : -270,
pt : 10
};
}
// The first animation moves the form up or down, and the second one
// moves the "Feedback" heading, so it fits in the minimized version
feedback.stop().animate({marginBottom: anim.mb});
feedback.find('.section').stop().animate(
{paddingTop:anim.pt},function(){
el.toggleClass('down up');
});
});
Чтобы оставить код чистым, мы перенесли проверку состояния наверх и создали объект anim, отвечающий за анимацию.
Вторая часть script.js содержит Ajax функционал, контактирующий с submit.php.
script.js – часть 2
$('#feedback a.submit').live('click',function(){
var button = $(this);
var textarea = feedback.find('textarea');
// We use the working class not only for styling the submit button,
// but also as kind of a "lock" to prevent multiple submissions.
if(button.hasClass('working') || textarea.val().length < 5){
return false;
}
// Locking the form and changing the button style:
button.addClass('working');
$.ajax({
url : submitURL,
type : 'post',
data : { message : textarea.val()},
complete : function(xhr){
var text = xhr.responseText;
// This will help users troubleshoot their form:
if(xhr.status == 404){
text = 'Your path to submit.php is incorrect.';
}
// Hiding the button and the textarea, after which
// we are showing the received response from 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() функции.
Например, одно из преимуществ видно в функции “complete”. Она вернет нужный статус, если будет ошибка 404 not found error. Таким образом можно вывести на экран сообщение об ошибке, напоминающее пользователю, чтобы он проверил путь submitURL.
И в конце PHP шаг.
PHP
PHP обрабатывает данные, принимает с помощью Ajax, проверяет и корректирует их и отправляет email сообщение на ваш электронный адрес.
submit.php
// Enter your email address below
$emailAddress = 'me@example.com';
// Using session to prevent flooding:
session_name('quickFeedback');
session_start();
// If the last form submit was less than 10 seconds ago,
// or the user has already sent 10 messages in the last hour
if( $_SESSION['lastSubmit'] && ( time() - $_SESSION['lastSubmit'] < 10 || $_SESSION['submitsLastHour'][date('d-m-Y-H')] > 10 )){
die('Please wait for a few minutes before sending again.');
}
$_SESSION['lastSubmit'] = time();
$_SESSION['submitsLastHour'][date('d-m-Y-H')]++;
require "phpmailer/class.phpmailer.php";
if(ini_get('magic_quotes_gpc')){
// If magic quotes are enabled, strip them
$_POST['message'] = stripslashes($_POST['message']);
}
if(mb_strlen($_POST['message'],'utf-8') < 5){
die('Your feedback body is too short.');
}
$msg = nl2br(strip_tags($_POST['message']));
// Using the PHPMailer class
$mail = new PHPMailer();
$mail->IsMail();
// Adding the receiving email address
$mail->AddAddress($emailAddress);
$mail->Subject = 'New Quick Feedback Form Submission';
$mail->MsgHTML($msg);
$mail->AddReplyTo('noreply@'.$_SERVER['HTTP_HOST'], 'Quick Feedback Form');
$mail->SetFrom('noreply@'.$_SERVER['HTTP_HOST'], 'Quick Feedback Form');
$mail->Send();
echo 'Thank you!';
С помощью PHP мы управляем сессиями, чтобы отслеживать частоту отправлений сообщений от пользователя. Если частота превышает определенный порог, то пользователю показывается сообщение об ошибке.
Email сообщения отправляются с помощью класса
PHPMailer. Он работает только на PHP5, так что вам нужно проверять версию PHP, если вы будете использовать этот скрипт.
Быстрая форма обратной связи полностью готова!