Реализуем обратный звонок для сайта - пошаговая инструкция!


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

В этой статье я подробно (по шагам) покажу пример реализации такой функции.

Сразу скажу, что не будет нечего лишнего, простые формы, простые функции - никаких наворотов!

Описание

Итак, давайте сначала составим краткое описание того, что мы хотим получить:
  1. На странице сайта будет кнопка - "Заказать обратный звонок";
  2. По клику на кнопке появится (всплывет) окно, которое будет содержать 2 поля: имя и телефон;
  3. Будет осуществляться проверка полей на пустоту, как на стороне браузера (клиента), так и на стороне сервера;
  4. Также, на форме будет иметься кнопка - "Отправить" и "Скрыть" для отправки и закрытия всплывающего окна соответственно;
  5. Если данные заполнены верно, то имя и телефон будут отправлены на ваш e-mail адрес, а окно будет скрыто, иначе, с помощью визуального эффекта, пользователю будет указано ввести данные;
 

Как выглядит

Кнопка заказа звонка выглядит так: Заказ обратного звонка Если нажать на эту кнопку, то плавно появится вот такая форма: Форма обратного звонка Приступим к реализации!

Шаг № 1. В корне вашего сайта создайте файл - index.html со следующим содержимым:
<!DOCTYPE html> 
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="callback.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

	<p id="callback">Заказать обратный звонок</p>

	<div id="callback_form">
		
		Имя: <input id="name">
		Телефон: <input id="phone">
		<p id="send">Заказать</p>
		<p id="close">Скрыть форму</p>
	
	</div>

</body>
</html>
Здесь у нас имеются 2 текстовых поля и две кнопки с соответствующими идентификаторами. Изначально блок с id "callback_form" скрыт.

Шаг № 2. Создайте файл - style.css со следующим содержимым:
#callback{
    text-align: center;
    font-size: 20px;
    color: #fff;
    background: #7883A2;
    padding: 10px 8px;
    width: 124px;
    margin: 0 auto;
    cursor: pointer;	
	margin-bottom: 20px;
}

#callback_form{
	width: 200px;
    height: 200px;
    background: #ccc;
    margin: 0 auto;
    padding: 20px;
    line-height: 30px;
    display: none;
}

#callback_form p{
    cursor: pointer;
    border: 1px solid #fff;
    text-align: center;
    color: #fff;
    background: #7883A2;	
}
Здесь мы задаем стили сначала для самой кнопки, далее для блока (формы), а после, стилизуем теги "P" в этой форме (кнопки - Заказать и Скрыть форму).

Шаг № 3. Создайте файл - callback.js со следующим содержимым:
$(document).ready(function(){
	
	//Показать форму
	$('#callback').click(function(){
		$('#callback_form').slideDown();
	});
	
	
	
	//Скрыть форму
	$('#close').click(function(){
		$('#callback_form').slideUp();	
	});
	
	
	
	//Нажали на кнопку - заказать звонок
	$('#send').click(function(){
		
		name = $('#name').val();
		phone = $('#phone').val();
		
		//Если поля заполнены, то отправляем данные
		if( name != '' && phone != '' ){

			$.post("callback.php",{
				name: name,
				phone: phone
			},function success(data){
				if( data != 0 ) $('#callback_form').html('Отправлено!').slideUp(3000);
			});
		
		}else $(this).siblings('input').animate({opacity: 0.25}, 500).animate({opacity: 1}, 500);
		
	});

});

Разберем jquery код по порядку:

  1. Пишем функцию, которая будет показывать форму по клику на кнопку заказа звонка
  2. Функция, которая будет скрывать форму
  3. Обрабатываем щелчок по кнопке - "Заказать"

Сначала мы считываем содержимое двух полей в переменные, после чего проверяем их на пустоту и если они пустые (если пользователь не заполнить все 2 поля), то к текстовым полям (к элементам, которые лежат на одном уровне с кнопками - siblings) мы дважды применяем анимацию с задержкой в 500 миллисекунд, которая сначала делаем поля почти прозрачными, а потом снова нормальными (полностью не прозрачными).

За счет этого создается красивый эффект, сигнализирующий пользователю о том, что нужно заполнить поля. Если человек заполнит 2 поля, то мы делаем POST запрос с помощью ajax, посылая данные (имя и телефон) PHP скрипту.

Если от скрипта возвратился не 0 (будем возвращать 1), значит всё прошло успешно и можно скрыть форму, написав перед этим - Отправлено.

Если же человек попытается обмануть проверку на стороне браузера и отправит пустые данные, то PHP скрипт возвратит 0 и ничего не произойдет - данные не будут отправляться, пока пользователь не заполнит поля.  

Шаг № 4. Создайте файл - callback.php со следующим содержимым:

<?
	
	//Если поступили данные..
	if( isset($_POST['name'],$_POST['phone'])){
		
		$name = trim( htmlspecialchars( substr($_POST['name'], 0, 40) ) );
		$phone = trim( htmlspecialchars( substr($_POST['phone'], 0, 40) ) );

		if( $name != '' AND $phone != '' ){
			
			$email = "Ваш E-mail";
			$domen = "Домен вашего сайта вида: site.ru";

			$message = 'Имя: '.$name.'<br>Телефон: '.$phone;
			$headers  = "Content-type: text/html; charset=utf-8 \r\n";
			$headers .= "From: ".$domen." <robot@".$domen.">\r\n";
			$subject = "Обратный звонок";
			mail($email, $subject, $message, $headers);
			echo 1;

		}else echo 0;
	}

?>

Если пришли данные (существуют нужные элементы массива POST), то производим обработку этих данных - сначала обрезаем, оставив 20 символов, потом преобразуем специальные символы в HTML сущности и убираем пробелы с обеих сторон.

После этого проверяем переменные "name" и "phone" на пустоту - если пустые, то отправляем 0 (0 обработает javascript), если заполнены, то отправляем данные на почту. На почту будет приходить письмо вида (пример):

Тема письма: Обратный звонок Имя: Сергей Телефон: какой-то телефон
Способ отправки письма взят из статьи - Как отправить письмо через php? - способ рабочий, но он не гарантирует доставляемость письма, а уж тем более не гарантирует того, что письмо не попадет в спам.

Для более высокой вероятности доставки письма необходимо использовать SMTP сервер, но об этом я расскажу как-нибудь в другой раз.

Внимание: в php коде вам необходимо инициализировать две переменные:
  • $email - здесь необходимо указать ваш e-mail, именно на него будет приходить заявка на обратный звонок.
  • $domen - здесь необходимо указать домен вашего сайта, на котором будет работать скрипт.
На этом данный урок подошел к завершению, все вопросы можно задать в комментариях, желаю вам удачи, пока!


Раздел: Программирование

Дата последнего изменения: 2015-12-08 23:20:20

Просмотров: 13410

Оставить комментарий

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*