Сайти, як і люди, бувають балакучими, але трапляються серед них і мовчуни. З-за своєї небалакучості такі ресурси не користуються популярністю, у них мало друзів серед користувачів і сайтів.
Тому важливо ще з малого віку навчити ресурс розмовляти зі своїми відвідувачами. Для цього на сайті повинна бути форма зворотного зв’язку.
Прародителька всіх форм
В основі всіх веб-форм лежить тег html . Він є складовим і служить каркасом для інших другорядних елементів. Всі вони утворені тегом type. Кожен з них задається атрибутом тегу type. Можливі значення атрибута, найчастіше застосовуються у формі зворотного зв’язку для сайту:
- «button» — звичайна кнопка;
- «text» — поле для введення тексту;
- «password» — поле для введення пароля (символи відображаються у вигляді зірочок);
- «radio» — перемикач;
- «submit» — кнопка для відправки даних форми;
- «reset» — кнопка для скидання даних всіх полів форми:
На наведеному вище скріншоті показано, як може виглядати поле форми при різних значеннях атрибуту type.
З виходом html 5 кількість можливих варіантів цього атрибута збільшилася ще на 10 значень.
Значення зворотного зв’язку для сайту
Наявність в інтерфейсі сайту розділу, де користувач може висловити свою думку або задати питання, є обов’язковим для будь-якого сучасного ресурсу. Це важливо, насамперед, для самого сайту.
Для відвідувача важливо бути почутим, а не виступати в ролі німого глядача. Можливість залишити повідомлення робить його учасником житті сайту. Завдяки реалізації самої ідеї спілкування всі соціальні мережі користуються високою популярністю серед користувачів.
Форма зворотного зв’язку з обробником на основі php
Наведена в прикладі форма є повністю робоча. В неї включений обробник на основі php і javascript. Також реалізовано кілька перевірок правильності заповнення полів:
Ось скрипт цієї форми зворотного зв’язку:
Untitled Document
#feedback-form {
max-width: 400px;
padding: 2%;
border-radius: 3px;
background: #f1f1f1;
}
#feedback-form [required] {
width: 100%;
box-sizing: border-box;
margin: 2px 0 2% 0;
padding: 2%;
border: 1px solid rgba(0,0,0,.1);
border-radius: 3px;
box-shadow: 0 1px 2px -1px rgba(0,0,0,.2) inset, 0 0 transparent;
}
#feedback-form [required]:hover {
border-color: #7eb4ea;
box-shadow: 0 1px 2px -1px rgba(0,0,0,.2) inset, 0 0 transparent;
}
#feedback-form [required]:focus {
outline: none;
border-color: #7eb4ea;
box-shadow: 0 1px 2px -1px rgba(0,0,0,.2) inset, 0 0 4px rgba(35,146,243,.5);
transition: .2s linear;
}
#feedback-form [type=»submit»] {
padding: 2%;
border: none;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
background: #669acc;
color: #fff;
}
#feedback-form [type=»submit»]:hover {
background: #5c90c2;
}
#feedback-form [type=»submit»]:focus {
box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
}
Як до Вас звертатися:
E-mail для зв’язку:
Ваше повідомлення:
document.getElementById(‘feedback-form’).onsubmit = function(){
var http = new XMLHttpRequest();
http.open(«POST», «contacts.php», true);
http.setRequestHeader(«Content-Type», «application/x-www-form-urlencoded»);
http.send(«nameFF=» + this.nameFF.value + «&contactFF=» + this.contactFF.value + «&messageFF=» + this.messageFF.value);
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
alert(http.responseText + ‘, Ваше повідомлення отримано.пнаші фахівці дадуть Вам відповідь протягом 2-х днів.n Дякуємо за інтерес до нашої фірми!’);
}
}
http.onerror = function() {
alert(‘Вибачте, дані були передані’);
}
return false;
}
Код файлу contacts.php:
Спливаюча форма зворотнього зв’язку
Але іноді хочеться приховати вікно зворотного зв’язку, зробивши його спливаючим. Це можна здійснити за допомогою jquery. Тоді звичайна форма на основі html набуває ось такий вигляд:
Таке рішення дозволяє компактно розмістити всі елементи користувальницького інтерфейсу на сторінці. А також зробити дизайн сайту більш цікавим для сприйняття.
Ось код цієї форми:
Untitled Document
$(document).ready(function(){
//Приховати PopUp при завантаженні сторінки
PopUpHide();
});
//Функція відображення PopUp
function PopUpShow(){
$(«#popup1»).show();
}
//Функція приховування PopUp
function PopUpHide(){
$(«#popup1»).hide();
}
*{
font-family: Areal;
}
.b-container{
width:200px;
height:150px;
background-color: #ccc;
margin:0px auto;
padding:10px;
font-size:30px;
color: #fff;
}
.b-popup{
width:100%;
min-height:100%;
background-color: rgba(0,0,0,0.5);
overflow:hidden;
position:fixed;
top:0px;
}
.b-popup .b-popup-content{
margin:40px auto 0px auto;
width:300px;
height: 400px;
padding:10px;
background-color: #c5c5c5;
border-radius:5px;
box-shadow: 0px 0px 10px #000;
}
.one{
background-color: #c5c5c5;
width: 250px;
height: 350px;
}
Зворотний зв’язок
Залишити запитання або відгук
Форма зворотнього зв’язку
Ваше ім’я:
Ваше прізвище:
Ваша стать:
М
Ж
Ваш email:
Введіть пароль:
Введіть повідомлення:
Сховати форму
В даний код інтегрований скрипт jquery і класи стилів css. При бажанні всі ці елементи можна рознести по різних файлах.
Спливання і приховування вікна форми у нашому прикладі це досягається за допомогою двох функцій бібліотеки jquery show() і hide(), застосованих до вкладеного блоку
. Стильові рішення всіх елементів реалізовані за допомогою класів css. Подібні форми зворотного зв’язку крім полів для заповнення можуть включати в себе і засоби захисту від спаму (капчі).
Капча являє собою одну з картинок масиву невеликих малюнків, на яких зображені символи. Щоб відправити введені дані на обробку, користувач повинен правильно ввести символи з картинки в спеціальне поле. Таким чином, блокується діяльність різних програмних ботів, імітують дії реальних користувачів.
Конструктори форм
Але не обов’язково самостійно займатися написанням форм. Для цього можна скористатися конструктором форм зворотного зв’язку. Вони являють собою інтернет-сервісів, функціонал яких дозволяє створювати форми онлайн. Одним з таких сервісів є formdesigner.ru:
На ресурсі доступні кілька тарифних планів. Безкоштовний аккаунт дозволяє створити в графічному режимі конструктора всього 3 форми:
Більш зручними у використанні є генератори форм зворотного зв’язку. Їх функціонал дозволяє не тільки створити візуальний дизайн майбутньої форми, але і завантажити її згенерований код.
На скріншоті представлений інтерфейс російськомовного генератора форм web-apps.ru:
Форма не головне
Звичайно, наявність на сайті форми зворотного зв’язку є позитивним моментом. Але ще важливіше не забувати відповідати на всі запитання та відгуки відвідувачів. Адже основою будь-якої взаємовигідної співпраці є повага до свого співрозмовника (відвідувачеві сайту).