Створення екранної форми підписки

15

Від автора: хороша база передплатників є запорукою успіху кожного інфобізнесмена. Але як же привернути увагу відвідувачів і тим більше зробити так, щоб вони підписувалися на Вашу розсилку. Звичайно, для цього необхідно створити дуже цікавий і якісний інформаційний продукт, а також розташувати в зручному, а головне, на видному місці форму підписки. Тому в даному уроці ми з Вами навчимося створювати екранну форму підписки, яка буде з’являтися на сайті, через деякий час після входу, і розташовуватися строго по центру над всім контентом. Тим самим Вашу унікальну пропозицію відразу буде перед очима користувача.

Створення екранної форми підпискиСтворення екранної форми підписки

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

Отже, давайте визначимося, що нам буде потрібно для уроку. Насамперед необхідний будь тестовий сайт, або проста html-сторінка для тестування спливаючого вікна форми підписки. У мене для цих цілей є невеликий сайтик, який виводить статей зберігаються в базі даних – його ми і використовуємо. Вихідні файли даного сайту, я наведу у вихідних матеріалах до уроку. Ось його вигляд в браузері:

Створення екранної форми підписки

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

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

Тепер давайте завантажити плагін для бібліотеки jQuery, який дозволить нам легко працювати з куками, назва даного плагіна — jquery.cookie. Плагіни — це додаткові бібліотеки, які розширюють функціонал бібліотеки jQuery.
Навіщо нам потрібні cookie? Дивіться, коли користувач відкриває сторінку сайту з формою підписки у перший раз, то дана форма буде відображена на сайті. Якщо ж закрити або підтвердити підписку, то при наступних візитах на даний сайт, вже не навіщо її показувати. Тому що б знати переглядав користувач віконце з формою підписки чи ні, необхідно зберегти в куках інформацію про переглядах даної форми.

Тому давайте завантажити даний плагін, для цього давайте перейдемо на сайт http://plugins.jquery.com/cookie/ і перейдіть за посиланням Download now . Відразу ж починається скачування даного плагіна. Аналогічно зберігаємо в папці js/

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

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

2. Створення форми підписки

Тепер давайте створимо саму форму підписки. Для цього в індексний файл додамо наступний код:

X

Як Ви бачите тут все просто, спочатку створюємо загальний контейнер з класом 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 (тобто поточний час). Аналогічні дії можна виконати і для кнопки відправки форми, тобто після відправки форми Ви приховуєте дану форму і записуєте в кукі поточну мітку часу.

Ось і все-тепер, давайте перейдемо в браузер і подивимося, що вийшло. Як Ви бачите все відмінно відпрацьовує, форма підписки як показується так і ховається по натисненню на кнопку Закрити.

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