—»     —»   Форма быстрой обратной связи на PHP и jQuery
  Раздел: Формы   Комментариев: 1  

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



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

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

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

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>

В теле документа мы видим DIV «#feedback». Он фиксированным позиционированием приурочен к правому нижнему углу окошка, что вы сможете увидеть в следующем разделе статьи.

Внутри него находятся 5 цветных пролётов (span). Их ширина составляет по 20% от документа, и они выровнены по левой стороне. Таким образом, они заполонят всю ширину DIV’а #feedback.

И наконец, в контейнере .section, который содержит заголовок и шапку, находится кнопка и поле ввода текста.

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

CSS

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

: 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;
}

Первый элемент, который нам нужно отформатировать – это 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;
}

Во второй части таблицы стилей вы можете видеть определение кнопки подтверждения (отправки). Учтите, что у кнопки есть три положения, которые привязаны к одному и тому же фоновому изображению – submit.png, и оно отображено только когда это нужно. Положения: стандартное положение, положение при наведении курсора мыши, а также активное положение «работающее». Когда кнопка находится в рабочем положении, эффект при наведении курсора мыши отключен.

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

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');
        });
    });

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

Вторая часть 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, которая вежливо сообщает пользователю о том, что следует проверить путь к submitURL.

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

Сообщения посылаются при помощи класса PHPMailer. Он работает только с PHP5, поэтому нужно, чтобы на сервере была поддержка именно этой версии.

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

На этом мы заканчиваем разработку!

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

В завершение

Вы можете использовать данную форму для сбора отзывов от посетителей. Данной формой вы значительно облегчаете пользователям процесс написания отзывов, а многие пользователи просто не станут писать отзыв, если для этого надо еще куда-то щелкать и куда-то переходить. Вы также без труда можете оформить форму по собственному усмотрению или по шаблону веб-сайта.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, отправные формы, ajax
Опубликовал Mysterious Master   Прочитано (раз): 32538   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 12 ноября 2010 @ 02:31
Написал: Goodguy — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Подскажите как сделать у фидбека скругленный верх. feel
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930