Быстрая форма обратной связи на PHP и jQuery

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

Сегодня мы найдем решение этой проблемы. Инструменты для этого — jQuery, PHP и класс PHPMailer.

ПримерСкачать исходники

HTML

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

feedback.html

<!DOCTYPE html>

<html>

<head>

<title>Quick Feedback Form w/ PHP and jQuery </title>

</head>

<body>

<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>

<a class="submit" href="">Submit</a>

</div>

</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, если вы будете использовать этот скрипт.

Быстрая форма обратной связи полностью готова!