Форма быстрой обратной связи на PHP,jQuery и CSS3

Ноя 14, 2010 HTML5 & CSS3, JQuery, PHP

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

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

HTML.

Давайте начнем с создания HTML. В начале документа расположено стилевое оформление, а файлы 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 | Tutorialzine Demo</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>

В текстовом сообщении вы увидите раздел #feedback (обратная связь). Он расположен с правой стороны внизу окна и имеет зафиксированное положение, о чем будет написано в следующем разделе.
Он разделен на пяти-цветные промежутки с шириной в 20% и размещен слева. В этом случае он займет точную ширину раздела #обратной связи.
В конце обратим внимание на .section, в котором содержатся заголовок, место для текста и кнопок.

Форма быстрого отзыва (PHP & jQuery)

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;

-moz-box-shadow:4px 4px 0 #8a9b8c; -webkit-box-shadow:4px 4px 0 #8a9b8c; box-shadow:4px 4px 0 #8a9b8c; }

Сначала оформляется компонент раздела #feedback. Для этого необходимо установить точное положение и соединить с браузерным окном. После этого определяемся с разделом .section и пятью цветовыми промежутками. Данные промежутки отличаются только по цвету фона, которые устанавливаются отдельно для каждого ряда.
В конце необходимо выполнить 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; }

Во второй части стилевого оформления мы разберемся с кнопкой submit (подтвердить). Обратите внимание, что 3 положения кнопок, содержащиеся в одном фоновом изображении — submit.png — и всплывающие только при необходимости. Кнопки работают в трех режимах — по умолчанию, режим наводки курсора, и «рабочий» режим. Когда кнопка находится в «рабочем» положении, режим наводки курсора отключается.

Отправка AJAX запроса.

jQuery.
Форма обратной связи имеет два режима работы — минимальный и максимальный. При загрузке по умолчанию, включается уменьшенный режим с правой стороны внизу экрана. Максимальный режим 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'); }); });

Для сохранения кода точным, я переместил все утверждения «если» наверх и создал анимационный объект, который содержит предоставляемые для анимационного метода значения. В зависимости от того, имеется ли ‘нижний‘ под-разряд на стрелке, мы увеличиваем или уменьшаем саму форму.
Вторая часть 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; }); });

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

Один из плюсов данного метода заключается в видимости функции «полноценной» обратной связи, которая дает возможность проверки статуса доставки на отсутствие ошибки 404, а также предоставление пользователю сообщения об ошибке с напоминанием проверки путей отправки URL.

Теперь давайте перейдем к заключительной части нашей инструкции — раздел PHP.

PHP
PHP предназначен для обработки данных, удовлетворяющий требованиям AJAX, делает данные приемлимыми, и отправляет электронное сообщение на ваш электронный адрес.

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 для выявления количества раз, которое пользователь предоставил в течение последнего часа, и точное время последней отправки формы. Если разница между текущей и последней отправкой заполненной формы меньше десяти секунд, или если пользователь отправил более 10 сообщений в час, в доставке сообщения будет отказано.

Электронная почта отправляется с помощью группы PHPMailer. Она совместима только с PHP5, поэтому для использования данной формы вам необходимо работать только с этой версией PHP.

Некоторые из методов отправки PHP писем используются для конфигурации исходящих писем. Посредством функции IsMail() группе передается команда использования PHP функции внутренних писем. Функция AddAddress() добавляет адреса к отправляемым письмам (вы можете ввести более одного получателя с помощью данной функции). После ввода текста и темы, мы выбираем «ответить» и отправляем письмо.

На этом наша форма быстрой обратной связи готова!

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

Источник

Popularity: 65% [?]

Теги: css3, JQuery, PHP