Сайти, як і люди, бувають балакучими, але трапляються серед них і мовчуни. З-за своєї небалакучості такі ресурси не користуються популярністю, у них мало друзів серед користувачів і сайтів.

Тому важливо ще з малого віку навчити ресурс розмовляти зі своїми відвідувачами. Для цього на сайті повинна бути форма зворотного зв’язку.

Прародителька всіх форм

В основі всіх веб-форм лежить тег 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:

Форма зворотного звязку – засіб діалогу з користувачем

Форма не головне

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