Создание всплывающей формы подписки

Создание всплывающей формы подписки

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

План урока

    1. Подготовка к уроку.

    2. Создание формы подписки.

    3. Логика работы всплывающего окна.

    4. Закрытие формы подписки.

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

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

1. Подготовка к уроку

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

Второе, что нам потребуется – это библиотека jQuery. Напомню для тех кто может подзабыл, что jQuery – это специальная библиотека, написанная на языке javaScript, которая содержит набор различных методов по выборке и манипуляции элементами страницы Вашего сайта.

Данную библиотеку нам необходимо скачать и подключить к сайту. Поэтому давайте перейдем на официальный сайт библиотеки: http://jquery.com. А затем нажмем по кнопке Download jQuery и сохраняем в папке js в корне тестового сайта (тестовый сайт сохранен на локальном компьютере в папке lessons/forma_p). Теперь откроем индексный файл (index.php) и подключим скачанную библиотеку jQuery.

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

Теперь давайте скачаем плагин для библиотеки jQuery, который позволит нам легко работать с куками, название данного плагина — jquery.cookie. Плагины — это дополнительные библиотеки, которые расширяют функционал библиотеки jQuery.
Зачем нам нужны куки? Смотрите, когда пользователь откроет страницу сайта с формой подписки в первый раз, то данная форма будет отображена на сайте. Если же закрыть или подтвердить подписку, то при следующих визитах на данный сайт, уже не зачем ее показывать. Поэтому что бы знать просматривал ли пользователь окошко с формой подписки или нет, необходимо сохранить в куках информацию о просмотрах данной формы.

Поэтому давайте скачаем данный плагин, для этого давайте перейдем на сайт http://plugins.jquery.com/cookie/ и перейдем по ссылке Download now . Сразу же начинается скачивание данного плагина. Аналогично сохраняем в папке js/

А затем в индексном файле подключим плагин к нашему сайту (после подключения библиотеки jQuery):

<script type="text/javascript" src="js/jquery.cookie.js"></script>

И последнее – давайте создадим пустой файл script.js, в котором мы будем вести кодирование на языке javascript, сохраним его в папке js и точно также подключим к нашему сайту:

<script type="text/javascript" src="js/script.js"></script>

2. Создание формы подписки

Теперь давайте создадим саму форму подписки. Для этого в индексный файл добавим следующий код:

<div class="popup_body">
</div>
<div class="popup">
	<div class="popup_close">
		X
	</div>
			<div class="popup_form">
				<form action="" method="POST">
					<input class="popup_inp" type="text" value="Ваше имя">
					<br />
					<input class="popup_inp" type="text" value="Почта">
					<br />
					<input class="popup_submit" type="submit" value="OK">
				</form>
			</div>	
</div> 

Как Вы видите здесь все просто, вначале создаем общий контейнер с классом popup, в котором будет располагаться вся форма подписки. Затем внутри данного блока, создаем блок, с классом popup_close – данный блок будет играть роль кнопочки закрытия окна. И следующий блок с классом popup_form – для хранения текстовой формы. Текстовая форма может содержать различные поля, для примера, я добавил два текстовых поля – поле ввода имени пользователя и поле ввода его почтового адреса.

Блок с классом popup_body необходим для затемнения всего контента, когда отображается всплывающая форма подписки. Теперь давайте откроем браузер и посмотрим, что у нас получилось:

Далее давайте зададим несколько стилей для данной формы, для этого откроем файл стилей style.css и добавим следующий код (для фона блока с формой подписки, я использую изображение popup_bg.png, которое будет у Вас в исходниках к уроку):

.popup {
	width:650px;
	height:200px;
	position: fixed;
	z-index:100;
	border:1px solid #074776;
	padding:10px;
	background-image:url(../file/popup_bg.png);
	background-position:left top;
	background-repeat: no-repeat;
	background-color:#F6F6F6;
	border-radius:10px;
}
.popup_form {
	float: right;
	margin-right:10px;
	margin-top:20px;
}
.popup_inp {
	height:30px;
	border-radius:10px;
	background-color:#F1F1F1;
	border:2px solid #074776;
	text-align: center;
	margin:10px;
}

.popup_submit {
	height:30px;
	width:70px;
	border-radius:10px;
	background-color:#b1b1b1;
	border:2px solid #074776;
	text-align: center;
	margin:10px;
	margin-left:45px;
}
.popup_close {
	float: right;
	border-radius:10px;
	border:1px solid red;
	width:30px;
	height:30px;
	text-align: center;
	padding-top:5px;
	cursor: pointer;
}

.popup_body {
	opacity:0.8;
	background-color:#074776;
	position:fixed;
	width:100%;
	height:100%;
	z-index:50;
}

Давайте теперь откроем браузер и посмотрим как изменилась форма подписки:

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

3. Логика работы всплывающего окна

Теперь давайте откроем файл script.js и добавим следующий код:

jQuery(document).ready(function() {
	//скрываем элементы
	$(".popup").hide();
	$(".popup_body").hide();
	
	//функция показа формы подписки
	function show_popup() {
		
		var date = new Date();
		var time_n = date.getTime();
		var time_c = $.cookie(“popup”);
		
		if(time_c == null || time_c < (time_n – 30 * 24 * 60 * 60 * 1000)) {
			var popup_w = $(“.popup”).width();
			var popup_h = $(“.popup”).height();
			
			var window_w = $(window).width();
			var window_h = $(window).height();
			
			var margin_l = parseInt((window_w/2) – (popup_w/2));
			var margin_t = parseInt((window_h/2) – (popup_h/2));
			
			$(“.popup_body”).fadeIn(100,function () {
				$(“.popup”).
					css({‘margin-left’:margin_l,’margin-top’:margin_t}).
					fadeIn(500);
			});
		}
	}
	
setTimeout(show_popup,3000)	

});

Давайте по порядку:

Первым делом скрываем блоки с классами popup и popup_body, используя метод hide(). Напомню, что метод hide(), применяется для плавного скрытия выбранных элементов, время длительности анимации передается параметром данному методу. Если же ничего не передавать, то выбранный элемент будет скрыт мгновенно.

Далее создаем функцию show_popup(), которая и будет показывать на экран форму подписки. В теле данной функции, первым делом, создаем переменную time_n, в которую записываем текущее время, в формате – количества миллисекунд прошедших с 1 января 1970 года.

Смотрите, после закрытия или отправки формы подписки мы будем записывать в куки текущее время – то есть когда именно была закрыта или отправлена форма (в том же формате – описанном выше).

И если, к примеру, пользователь уже просматривал форму подписки, то предлагаю реализовать возможность показа данной формы через определенное количество времени, к примеру, через 30 дней. Вот для этой цели нам и нужна переменная time_n, используя которую, мы можем проверить сколько времени прошло после последнего просмотра формы подписки.

Далее создаем переменную time_c и записываем в нее время, сохраненное в куках. Для этого используем метод cookie(). Данный метод входит в состав плагина jquery.cookie, и выполняет считывание, либо запись файлов куки. Если передать только имя куки (что сделано в данном случае), то будет выполнено чтение данных, записанных в куки с именем, что мы передали параметром.

Теперь формируем условие – если в куках ничего не записано или форма подписки просматривалась больше чем 30 дней назад, значит необходимо показать форму подписки.

Далее определяем ширину и высоту блока с формой подписки (блок с классом popup), для этого создаем переменные popup_w и popup_h – соответственно. Используем для этого методы width() – для получения ширины, и метод height() – для получения высоты выбранного блока.

Далее аналогично определяем ширину и высоту окна браузера пользователя и сохраняем в переменные window_w и window_h соответственно, используя все те же методы width() и height().

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

Позиционирование мы будем выполнять, задавая, левый и верхний отступ для блока с формой. Для этого создадим две переменные: margin_l – для левого внешнего отступа и margin_t – для верхнего внешнего отступа.

Теперь давайте поясню, как рассчитать левый внешний отступ. Вначале находим расстояние к центру экрана пользователя по ширине:

window_w/2

Затем расстояние к центру блока с формой подписки по ширине:

popup_w/2

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

(window_w/2) - (popup_w/2)

При этом приведем величину к целочисленному типу данных (отбросим дробную часть), используя функцию parseInt().

Далее выбираем при помощи jQuery блок с классом popup_body (блок который используется для затемнения контента) и плавно показываем его, используя метод fadeIn(). Первым параметром передаем длительность анимации – то есть скорость появления данного блока. Вторым параметром описываем функцию, которая выполнится после завершения анимационных эффектов метода fadeIn (то есть когда выбранный блок полностью покажется). Внутри данной функции выбираем (при помощи библиотеки jQuery) блок с классом popup и задаем ему внешние левый и верхний отступы – те, что мы с Вами рассчитали. Для этого используем метод css() – который, применяется для задания правил css к выбранным элементам. Обратите внимание на синтаксис параметров данного метода (в фигурных скобках указываем вначале правило, затем двоеточие и затем уже значение данного параметра).

Далее, используя метод fadeIn(500), плавно показываем выбранный блок (блок с формой) со скоростью 500 миллисекунд.

Теперь осталось только вызвать данную функцию на исполнение. Я предлагаю показывать блок с формой не сразу, а, к примеру через 3 секунды после отображения сайта на экране. Поэтому для вызова функции show_popup, используем функцию setTimeout, которая вызовет данную функцию на исполнение через 3000 миллисекунд (3 секунды), что нам и нужно.

Теперь давайте перейдем в браузер и посмотрим, что у нас получилось:

Как Вы видите, все отлично отрабатывает – форма плавно появляется через 3 секунды после загрузки страницы с затемнением контента и при этом располагается строго по центру.

4. Закрытие формы подписки

Теперь осталось реализовать логику закрытия данной формы, для этого в файл script.js добавим следующий код:

$(".popup_close").click(function() {
		$(".popup").fadeOut(300, function() {
			$(".popup_body").fadeOut(100);
			
			var date = new Date();
			var time_n = date.getTime();
			$.cookie("popup",time_n);
		});
	
	});

Смотрите, при помощи jQuery выбираем блок, с классом popup_close (напомню, что данный блок играет роль кнопки закрытия окна) и вызываем обработчик события click(). Данный обработчик сработает, когда по выбранному блоку нажать левой кнопкой мыши. То есть другими словами, при клике по выбранному блоку, выполнится функция описанная в обработчике события click. В данной функции выбираем при помощи jQuery блок с классом popup, то есть форму подписки, и скрываем, используя метод fadeOut(). Скорость исчезания блока задаем 300 миллисекунд, затем описываем функцию, которая выполнится после полного исчезания данного блока. В этой функции просто скрываем блок, который затеняет весь контент сайта — блок с классом popup_body. То есть идея заключается в том, что бы скрыть в начале блок с формой, а затем блок который затеняет весь контент.

И в конце необходимо в куки записать текущую метку времени — то есть время когда была закрыта форма подписки. Для этого получаем текущее время, в формате — количество миллисекунд прошедших с 1 января 1970 года и записываем его в переменную time_n. Далее используя метод cookie(), записываем в куки с именем popup, значение хранящиеся в переменной time_n (то есть текущее время). Аналогичные действия можно проделать и для кнопки отправки формы, то есть после отправки формы Вы так же скрываете данную форму и записываете в куки текущую метку времени.

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

А на этом будем прощаться. Всего Вам доброго и до новых встреч!!!

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

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

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

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

  1. Александр

    Супер! респект

  2. Гульнара

    Спасибо большое за четкий, подробный урок. Буду применять полученное знание на своих сайтах.

    • Виктор Гавриленко

      Пожалуйста! Мы всегда стараемся предоставлять Вам только интересные и полезные уроки.

  3. Pocherk

    Спасибо! Как раз делаю проект, для которого всплывающая форма очень актуальна.

  4. Виктор Гавриленко

    Пожалуйста!!

  5. Сергей

    Здравствуйте, Виктор!

    Замечательный урок!
    Вот только у меня в файле script.js выдает синтаксическую ошибку в 11-й строке, вот в этой

    var time_c = $.cookie(“popup”);

    И продвинуться дальше не могу.

    Не поможете?

    • Сергей

      Проблема решилась.

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

      • Виктор Гавриленко

        Что бы ответить на данный вопрос, нужно смотреть исходный код. Создайте тему на нашем форуме и опишите детально проблему(прикрепите исходный код) и будем разбираться.

  6. Ольга

    Здравствуйте, Виктор!
    У меня два вопроса:
    1. Как переделать так, чтобы окно всплывало не через 3 сек после открытия, а в тот момент, когда посетитель ведет мышку наверх, чтобы закрыть вкладку?
    2. Как наложить звуковое сопровождение, любой звук типа «упс!», как прописать это?
    Заранее спасибо, если ответите.

  7. Виктор Гавриленко

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

  8. Сергей

    Добрый вечер!
    Нужна подсказка по интеграции на Вордпресс
    1) Протестировал все на компе — работает
    2) Вставил файлы в шаблон ВП на сайте, залил скрипты на хост, короче все как нужно сделал! — НЕ РАБОТАЕТ!
    Хотя, как ни странно в коде страницы все нужные строчки присутствуют… Может подскажете что это такое? (временно код убрал со страницы)

    • Виктор Гавриленко

      Здравствуйте,Сергей! Посмотрите может возникают какие либо ошибки в коде javaScript? Так сложно сказать почему не работает не видя сайта, и кода.

  9. Андрей

    Добрый день!

    Спасибо за отличную статью! Но я немного не понял: а где будут хранится записанные данные (имена и почтовые адреса).

  10. Виктор

    Эту проблему уже выше описывали вкратце напишу — на компьютере всё работает,закачал файлы в шаблон WP на сайте,залил скрипты на хост,вроде всё как нужно сделал! — А НЕ РАБОТАЕТ!
    В коде страницы все нужные строчки присутствуют,не могли объяснить почему,и есть ещё вопрос,не могли бы помочь вот с чем.Есть база отелей мира, но как вытащить отлеи на страницу сайта ,как сделать поиск … не знаю, я вообще не пишу скрипты, поэтому вопрос,Вы бы не могли написать скрипт,естественно за оплату. Спасибо.

    • Виктор Гавриленко

      Здравствуйте!
      Сложно сказать, не видя кода. Посмотрите возможно есть ошибки javaScript, к примеру используя консоль плагина firebug браузера mozilla firefox.
      По поводу второй части вопроса — созданием скриптов на заказ я в данный момент не занимаюсь, но напишите об этом на нашем форуме в соответствующей теме, возможно кто то и возьмется. А вообще это задача не сложная и думаю Вы вполне смогли бы решить ее сами, правда придется затратить время на обучение.

  11. Наталья

    Что-то не получилось

  12. Andrey

    Добрый день.
    Урок классный, только я не понимаю, а куда данные то передаются? То что пользователю в куки уходит это ясно, но я так понимаю контакт человека должен куда то в базу сайта писаться, для последующих рассылок. Можно тут по подробнее?

    • Виктор Гавриленко

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

  13. Николай

    Здравствуйте , спасибо за подробный и нужный урок!
    Протестил в разных браузерах , у меня не работает в hrome и opere,
    можете подсказать как сделать чтоб работало .

  14. Qetuo

    Здраствуйте Виктор
    Отличный урок.
    Всё работает также, как и у Вас.
    Но есть небольшая проблемка.
    Если вначале, ошибочно, вместо крестика для закрытия окна, нажата кнопка OK,
    то всплывающее окно периодически появляется.
    И если после этого его закрыть — оно закрывается, но при обновлении страницы
    постоянно требует заново отправить форму (пустую).
    Боюсь это могут использовать для дос атак.
    Сможете проверить, пожалуйста.
    Спасибо заранее.

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

Ваш 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