Обратный звонок для сайта. Часть 2

Обратный звонок для сайта

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

скачать исходникискачать урок

Для привлечения внимания посетителей, к кнопке показа формы обратной связи, мы с Вами в стилях CSS определили две покадровые анимации, с псевдонимами shadow и pulse. При этом мы задали параметры анимационных эффектов, но не указали, что именно будет выполняться при работе анимации. А значит, давайте сформируем параметры анимации pulse (в файл стилей style.css добавим следующие строки).

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

@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, который должен затенять абсолютно весь контент, когда форма обратного звонка будет показана на экран.

.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 и изначально он скрыт. Затем добавим правила, для оформления основного контейнера формы:

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

После этого стилизуем кнопку закрытия окна с формой.

.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>, текстовой области формы, а так же кнопки отправки данных формы.

.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 добавим логику появления формы обратного звонка.

var p = $('.window_wrap');
	$('.telButton').click(function() {
		p.css({'display':'block'}).hide().fadeIn(1000);
	});

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

При этом пока, закрыть данную форму мы с Вами не можем, так как логика закрытия формы еще не прописана, а значит давайте, это исправим. При этом условимся, что модальное окно будет закрываться при двух условиях: первое – клик мышью по кнопке закрытия окна, второе – клик мышью по любой произвольной области отличной от контейнера формы обратного звонка. А значит, опишем логику закрытия модального окна, используя кнопку закрытия.

$('.window_close').click(function() {
		p.css({'display':'none'});
	});

И второе условие.

p.click(function(event) {
		if(event.target == this) {
			$(this).css({'display':'none'});
		}
	});

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

Напомню, что работая с функцией обработчиком события, мы получаем доступ к свойству this, в котором содержится объект выбранного элемента. При этом в свойстве target, объекта event, который передается в качестве первого аргумента при вызове функции обработчика, содержится объект элемента, для которого сработало событие. И если оба вышеупомянутых объекта совпадут – значит, модальное окно следует закрыть. Теперь давайте опишем код отправки данных, добавленных в форму, обратного звонка.

$('#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().

<?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 и для этого выполняем в консоли, следующую команду.

composer require swiftmailer/swiftmailer

После этого подключаем библиотеку к нашему проекту.

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

$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() – формирует содержимое письма.

Далее необходимо определить драйвер отправки сообщения, так называемый транспорт.

$transport = Swift_MailTransport::newInstance();

Мы используем драйвер, который в своей работе задействует стандартную функцию PHP mail(). Далее создаем объект глобального объекта библиотеки и при этом передаем объект используемого драйвера:

$mailer = Swift_Mailer::newInstance($transport); 

И наконец, отправляем созданное сообщение и заканчиваем работу данного скрипта (полный код файла srv.php).

<?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();

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

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

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Сергей

    Спасибо за статью, сейчас пользуюсь обратным звонком CallCons

  2. Александр

    Здравствуйте.Большое спасибо за ваши уроки и статьи.Я не особо шарю в программировании.Просто интересна тема создания сайтов.По мере возможности изучаю.Ну и другу помогаю с сайтом.Вот решил попробовать сделать такую кнопку.Пока только на первом этапе.Возник нюанс.Стили к кнопке применились, а вот скрипт не работает.Сам скрипт я добавил в папку шаблона сайта.Да,кстати сайт на Джумле и библиотека jQuery там подключена по умолчанию,поэтому библиотеку я не добавлял.Только стили и скрипт.Скрипт подключил в файле idex.php.
    $doc->addScriptVersion($this->baseurl . '/templates/' . $this->template . '/js/script.js');
    Буду благодарен,если подскажете решение задачи.В интернете находил вариант с заменой $ на jQuery . Не помогло.

    • Александр

      Со скриптом разобрался.Я все функции добавил в Джумловский скрипт.Всё отлично работает.Но есть ещё один вопрос.Как можно по клику данной кнопки вызывать модуль Джумлы? Дело в том что на сайте есть некий модуль для обратной связи,который тоже вызывается при нажатии кнопки меню.Там выводятся данные о графике работы магазина и есть отправка письма с сообщением через стандартную отправку почты в Джумле через smtp. Вот и хотелось бы с помощью данной кнопки вызывать данный модуль.Сейчас он вызывается через пункт меню с помощью сласса css. Может быть подскажете.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree