—»     —»   Разрабатываем скользящую форму обратной связи при помощи jQuery
  Раздел: Формы   Комментариев: 2  

Разрабатываем скользящую форму обратной связи при помощи jQuery



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

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

Скользящая форма – это отличный метод сбора отзывов посетителей, так как она не мешает пользователям, не отвлекает их внимание, и очень удобна и пригодна в случае, когда посетитель целенаправленно хочет связаться с вами.

Сегодня мы будем использовать jQuery и PHP. jQuery понадобится для создания эффекта скольжения, приуроченного к событию on-click, а затем все это будет напичкано PHP для реализации возможности отослать письмо прямо с сайта. То есть, здесь мы будем спрашивать у посетителей лишь их мнение, никаких имен и адресов.

Создание формы обратной связи

Разрабатываем скользящую форму обратной связи при помощи jQuery

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

HTML-код будет представлять собой лишь небольшой кусочек верстки.

* сначала создаем div с заданным классом feedback.
* создаем якорный тэг внутри div’а с id feedback_button, вписываем якорный текст Feedback.
* далее создаем div для формы обратной связи с классом form.
* внутри div’а с формой добавляем заголовок, используя тэг h2.
* добавляем span для статуса.
* добавляем текстовое поле и кнопку для ввода и отправки сообщения на электронный адрес.

<div class="feedback">
<a id="feedback_button">Feedback</a>

<div class="form">
<h2>Please Send Us Your Feedback</h2>
<span class="status"></span>
<textarea id="feedback_text"></textarea>
<input type="button" value="Send" id="submit_form" />
</div>
</div>

Расположение кнопки обратной связи

Теперь мы разработали CSS-код, нужный нам для правильного расположения кнопки и для ее оформления. Теперь форма правильно отображается посетителям.

* для начала нам нужно позиционировать блок обратной связи.

* мы размещаем кнопку обратной связи в левом нижнем углу экрана. Используем следующий код CSS:

.feedback{
position:absolute;
left:0;
bottom:0;
}

Теперь, когда форма находится в левом нижнем углу страницы, мы можем оформить элементы внутри div’а.

* нам нужно стилизовать кнопку обратной связи, которая будет использоваться в скользящей форме. Эта кнопка должна выделяться на странице, и быть достаточно большой для того, чтобы ее заметили.

Используем следующий CSS-код для стилизации ссылки открытия формы обратной связи.

.feedback a {
display:block;
height:20px;
width:100px;
text-align:center;
background:red;
border:2px solid #fff;
outline:1px solid #a1a1a1;
padding:5px;
float:left;
cursor:pointer;

/*Font*/
color:#FFF;
font-weight:bold;
font-size:18px;
}

* теперь, когда у нас есть кнопка, мы можем создать стиль и для формы.

Начнем с формы и добавим высоты и ширины, чтобы места было достаточно для текстового поля и кнопки подтверждения.

Используйте следующий CSS-код к вашей форме. Убедитесь, что вы добавили параметр display:none к форме, чтобы изначально она была скрытой.

.feedback .form{
clear:both;
height:300px;
width:450px;
border:1px solid #000;
background:#fff;
padding:15px;
display: none;
}
.feedback .form textarea{
height:170px;
width:400px;
padding:5px;
}
.feedback .status{
font-size:16px;
}

Разрабатываем эффект скольжения

Теперь мы уже закончили работу над формой, и нам нужно посредством jQuery создать сам эффект скольжения. Важно то, что jQuery по умолчанию оснащен несколькими эффектами, которыми можно воспользоваться.

Один из этих эффектов в функции slideToggle(), поможет нам выдвигать форму в противоположном направлении от исходной позиции. То есть, менять местами форму с пустой областью, и обратно. Так что, если div спрятан, то он будет отображен, и если он на данный момент отображен, то при нажатии он будет спрятан. Это как раз тот эффект, который нам потребуется.

Нам нужно добавить событие click к ссылке, которая будет выдвигать форму.

$("#feedback_button").click(function(){
$('.form').slideToggle();
});

Отсылка сообщения посредством AJAX

Теперь у нас есть и форма и эффект скольжения, осталось только прикрутить начинку, которая за счет функционала AJAX будет отправлять запрос на сервер. Нам нужно отослать введенный в текстовое поле текст, так что мы можем воспользоваться технологией PHP.

Создайте новую функцию, которая будет подтверждать форму при событие click, совершенному по кнопке подтверждения. Далее будет осуществлена проверка на наличие в текстовом поле данных, и если не возникнет нестыковок, письмо будет отправлено в файл process_email.

Если вся операция прошла успешно, нам следует как-то оповестить об этом пользователя. Если же операция была неудачная, пользователь увидит сообщение о незавершенной операции.

send_feedback: function(){
$('#submit_form').click(function(){
if($('#feedback_text').val() != ""){

$('.status').text("");

$.ajax({
type: "POST",
url: "./process_email.php",
data: 'feedback=' + $('#feedback_text').val(),
success: function(result,status) {
//email sent successfully displays a success message
if(result == 'Message Sent'){
$('.status').text("Feedback Sent");
} else {
$('.status').text("Feedback Failed to Send");
}
},
error: function(result,status){
$('.status').text("Feedback Failed to Send");
}
});
}
});
}

Отсылка сообщения на электронный ящик администратора

Это позволит нам отослать сообщение посредством PHP-скрипта. Теперь мы можем использовать встроенную PHP-функцию mail() для отсылки писем администратору веб-сайта.

Для получения сообщения из обратной связи посредством запроса POST, нам нужно использовать глобальную переменную $_POST.

  $to = "admin@email.com<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l=document.getElementById("__cf_email__");a=l.className;if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script>";
$subject = "Feedback Form";
$message = $_POST['feedback'];

if(mail($to,$subject,$message))
{
echo "Message Sent";
}
else
{
echo "Message Not Sent";
}

Если письмо было отправлено успешно, пользователю будет отображено сообщение об успешной отправке – это можно настроить в функционале jQuery. Если же сообщение не было отослано, пользователь также будет оповещен об этом, что также настраивается в jQuery.

Ранее были опубликованы статьи, посвященные разработке страниц типа «Скоро открытие», где использовалась примерно такая же функция отправки сообщения посредством PHP+jQuery.

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

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

Ключевые тэги: ajax, PHP, jQuery, отправные формы
Опубликовал Design FactoRy   Прочитано (раз): 12365   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 17 февраля 2012 @ 12:55
Написал: Арчи — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
нужная вещь
Комментарий #2: 1 апреля 2012 @ 16:45
Написал: Андрей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо вам большое) Пригодиться в одном из проектов fellow
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


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


















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