От автора: приветствую Вас дорогой друг. В данном уроке мы продолжаем работать над скриптом форма обратного звонка для сайта. Напомню, что кнопка показа формы обратного звонка, уже реализована и причем появляется она, на странице с достаточно эффектной анимацией, а так же данный элемент отслеживает размеры окна браузера и перемещение ползунка скролла. Теперь нам предстоит описать покадровую анимацию для кнопки, стилизовать модальное всплывающее окошко с формой и написать код серверной части, которая непосредственно отправит электронное сообщение с запросом на обратный звонок.
Для привлечения внимания посетителей, к кнопке показа формы обратной связи, мы с Вами в стилях CSS определили две покадровые анимации, с псевдонимами shadow и pulse. При этом мы задали параметры анимационных эффектов, но не указали, что именно будет выполняться при работе анимации. А значит, давайте сформируем параметры анимации pulse (в файл стилей style.css добавим следующие строки).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@keyframes pulse { 0% { width:60px; height:60px; top:0px; left:0px } 5% { width:66px; height:66px; top:-3px; left:-3px } 10% { width:60px; height:60px; top:0px; left:0px } 15% { width:66px; height:66px; top:-3px; left:-3px } 20% { width:60px; height:60px; top:0px; left:0px } 25% { width:66px; height:66px; top:-3px; left:-3px } 30% { width:60px; height:60px; top:0px; left:0px } 59% { transform:rotate(0deg); } 60% { transform:rotate(10deg); } 65% { transform:rotate(-10deg); } 70% { transform:rotate(10deg); } 75% { transform:rotate(-10deg); } 80% { transform:rotate(10deg); } 85% { transform:rotate(-10deg); } 90% { transform:rotate(0deg); } 100% { width:60px; height:60px; top:0px; left:0px } } |
Правило @keyframes – позволяет описать анимацию CSS свойств, выбранного элемента в виде перечня состояний элемента в определенные моменты времени. Обратите внимание, что метки времени указываются в виде определенного процента от общего времени выполнения анимации. Каждая метка времени, задает конкретное состояние элемента, то есть значения свойств CSS – размеры, позиция, поворот и т.д. В соответствии с этим для начала, мы добавим пульсацию кнопки, то есть ее поочередное увеличение и уменьшение, а затем сделаем несколько поворотов на 10 градусов в обе стороны. Далее опишем очень простые параметры анимации shadow:
|
1 2 3 4 |
@keyframes shadow { 0% {top:0px; left:0px; width: 56px; height: 56px} 100% {top:-22px; left:-22px; width: 96px; height: 96px} } |
Здесь в течении всего времени анимации, мы плавно будем увеличивать блок с классом .telButton_border, то есть рамку кнопки.
На этом работа с кнопкой, что касается CSS, закончена. Теперь давайте стилизуем форму обратного звонка. Первым делом определим правила для блока с классом window_wrap, который должен затенять абсолютно весь контент, когда форма обратного звонка будет показана на экран.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.window_wrap { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.7); text-align: center; z-index: 5005 } .window_wrap:after { display: inline-block; height: 100%; width: 0; vertical-align: middle; content: '' } |
При этом ширина и высота данного блока указана как 100%, прозрачность 0.7 и изначально он скрыт. Затем добавим правила, для оформления основного контейнера формы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.window { display: inline-block; position: relative; max-width: 80%; padding: 20px; border-radius: 15px; border:3px solid #088789; background: #fff; vertical-align: middle; background: #38833e none repeat scroll 0 0; height: 136px; } |
После этого стилизуем кнопку закрытия окна с формой.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.window_close { display: block; position: absolute; top: -18px; right: 10px; width: 12px; height: 12px; padding: 8px; border-radius: 50%; cursor: pointer; background: #088789; text-align: center; font-size: 12px; line-height: 12px; color: #fff; text-decoration: none; font-weight: bold; cursor:pointer; box-sizing: content-box !important; } .window_close:hover { background: #ff6600; } |
И напоследок, добавляем правила, для тега <p>, текстовой области формы, а так же кнопки отправки данных формы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.window p { color: #fff; font-family: "Arial",sans-serif; font-size: 16px; font-weight: bold; line-height: 24px; text-align: center; text-transform: uppercase; } #telForm { background: #fafafa none repeat scroll 0 0; border: medium none; border-radius: 5px 0 0 5px; float: left; height: 35px; text-align: center; width: 58%; } #telButton { background: #e03f58 none repeat scroll 0 0; border: medium none; border-radius: 0 5px 5px 0; color: #fff; cursor: pointer; float: right; height: 37px; transition: all 0.6s ease 0s; width: 40%; } |
Конечно, пока результат нашей работы мы не увидим, так как форма скрыта, поэтому давайте в файл script.js добавим логику появления формы обратного звонка.
|
1 2 3 4 |
var p = $('.window_wrap'); $('.telButton').click(function() { p.css({'display':'block'}).hide().fadeIn(1000); }); |
То есть при помощи библиотеки jQuery, выбираем блок с классом telButton и регистрируем функцию обработчик события клик мышью. То есть, как только пользователь кликнет мышью по кнопке, мы отобразим на экран окошко с формой обратной связи.
При этом пока, закрыть данную форму мы с Вами не можем, так как логика закрытия формы еще не прописана, а значит давайте, это исправим. При этом условимся, что модальное окно будет закрываться при двух условиях: первое – клик мышью по кнопке закрытия окна, второе – клик мышью по любой произвольной области отличной от контейнера формы обратного звонка. А значит, опишем логику закрытия модального окна, используя кнопку закрытия.
|
1 2 3 |
$('.window_close').click(function() { p.css({'display':'none'}); }); |
И второе условие.
|
1 2 3 4 5 |
p.click(function(event) { if(event.target == this) { $(this).css({'display':'none'}); } }); |
Обратите внимание, что в данном варианте нам нужно проверять, по какому именно элементу кликнул пользователь, ведь если он кликнули по блоку с формой, модальное окно не должно закрываться.
Напомню, что работая с функцией обработчиком события, мы получаем доступ к свойству this, в котором содержится объект выбранного элемента. При этом в свойстве target, объекта event, который передается в качестве первого аргумента при вызове функции обработчика, содержится объект элемента, для которого сработало событие. И если оба вышеупомянутых объекта совпадут – значит, модальное окно следует закрыть. Теперь давайте опишем код отправки данных, добавленных в форму, обратного звонка.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
$('#telButton').click(function(event) { event.preventDefault(); var tel = $('#telForm').val(); $('#backPhone').fadeOut(500,function() { $('<p>Отправка!</p>').appendTo($('.window')).hide().fadeIn(300,function() { $.ajax({ type: 'POST', url: 'srv.php', data: 'tel=' + tel, dataType: 'json', success : function (json) { if(json.error) { $('.window p').last().remove(); $('#backPhone').fadeIn(300, function() { alert(json.error); }); } else { $('.window p').last().fadeOut(300, function() { $(this).text('Заявка принята!').fadeIn(300, function () { $('.window_wrap').delay(1500).fadeOut(300); }); }); } } }); }); }); }); |
Данные будут отправляться с использованием метода AJAX, а значит необходимо выбрать при помощи библиотеки jQuery кнопку отправки формы и зарегистрировать функцию обработчик события клик.
В коде функции, первым делом отменяем стандартное поведение выбранного элемента (исключив тем самым перезагрузку страницы). Далее получаем номер телефона, который пользователь, возможно, добавил в текстовую область. Здесь так же можно проверить, добавил ли посетитель номер телефона, но я это реализую на серверной стороне.
Затем скрываем форму, используя анимационный эффект fadeout, и обращаемся к методу jQuery ajax(), для асинхронной отправки данных на сервер. При этом данные, в виде параметра tel, будут направляться в файл srv.php, который необходимо создать в корне нашего проекта. Выше указанный файл в качестве ответа, будет возвращать данные в формате строки JSON, а значит указываем это в параметре dataType. При этом в функцию обработчик свойства success, будет передана переменная json, в которую автоматически будет помещен объект, после декодирования строки ответа.
При этом если в текущем объекте, присутствует свойство error, значит на стороне сервера возникла ошибка. В этом случае форма обратной связи будет повторно показана на экране и отображено сообщение о ошибке, с использованием alert().
Если же ошибок нет, на экран покажется сообщение “Заявка принята!” и модальное окно будет скрыто. Теперь открываем файл srv.php и опишем логику серверной стороны.
Для начала проверим – пришли ли данные методом POST и если это так, получим содержимое, отправленное в запросе, предварительно обработав его функцией strip_tags().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php if($_SERVER['REQUEST_METHOD'] == 'POST') { $tel = strip_tags($_POST['tel']); $res = array(); if(empty($tel)) { $res['error'] = "Нужно добавить номер телефона!"; echo json_encode($res); exit(); } |
При этом, если в переменной $tel, будет храниться пустое значение, соответственно пользователь не указал номер телефона, а значит нет смысла далее выполнять какие либо действия. То есть формируем ответ – массив с ячейкой error, кодируем его в строку JSON, отображаем на экране и завершаем работу приложения.
Если вышеуказанное условие на срабатывает значит, мы можем отправить сообщение на определенный электронный ящик, с запросом обратного звонка. Для этого мы используем достаточно известную библиотеку Swiftmailer.
Для ее установки воспользуемся инструментом Composer и для этого выполняем в консоли, следующую команду.
|
1 |
composer require swiftmailer/swiftmailer |
После этого подключаем библиотеку к нашему проекту.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php if($_SERVER['REQUEST_METHOD'] == 'POST') { $tel = strip_tags($_POST['tel']); $res = array(); if(empty($tel)) { $res['error'] = "Нужно добавить номер телефона!"; echo json_encode($res); exit(); } require 'vendor/autoload.php'; |
Затем формируем сообщение, создав объект класса Swift_Message:
|
1 2 3 4 5 6 7 8 9 |
$message = Swift_Message::newInstance(); $message->setSubject('Обратный звонок'); $message->setFrom(array('shop@mail.ru' => 'Shop')); $message->setTo(array('admin@mail.ru')); $message->setBody('Перезвоните мне по номеру - '. $tel); |
При этом используются следующие методы:
setSubject() – задет тему будущего сообщения;
setFrom() – определяет отправителя;
setTo() – задает адрес на который будет отправлено письмо;
setBody() – формирует содержимое письма.
Далее необходимо определить драйвер отправки сообщения, так называемый транспорт.
|
1 |
$transport = Swift_MailTransport::newInstance(); |
Мы используем драйвер, который в своей работе задействует стандартную функцию PHP mail(). Далее создаем объект глобального объекта библиотеки и при этом передаем объект используемого драйвера:
|
1 |
$mailer = Swift_Mailer::newInstance($transport); |
И наконец, отправляем созданное сообщение и заканчиваем работу данного скрипта (полный код файла srv.php).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php if($_SERVER['REQUEST_METHOD'] == 'POST') { $tel = strip_tags($_POST['tel']); $res = array(); if(empty($tel)) { $res['error'] = "Нужно добавить номер телефона!"; echo json_encode($res); exit(); } require 'vendor/autoload.php'; $message = Swift_Message::newInstance(); $message->setSubject('Обратный звонок'); $message->setFrom(array('shop@mail.ru' => 'Shop')); $message->setTo(array('admin@mail.ru')); $message->setBody('Перезвоните мне по номеру - '. $tel); $transport = Swift_MailTransport::newInstance(); $mailer = Swift_Mailer::newInstance($transport); $mailer->send($message); exit(json_encode($res)); } exit(); |
Если протестировать работу приложения в целом – мы увидим, что вот такое сообщение будет отправлено на электронный ящик.
Вот собственно и все о чем я хотел рассказать Вам в данном уроке, сервис обратный звонок реализован а значит Вы можете использовать его на своих страницах. Всего Вам доброго и удачного кодирования!!!
Комментарии (5)