Форма обратной связи – средство диалога с пользователем

2014-10-31

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

Поэтому важно еще с малого возраста научить ресурс разговаривать со своими посетителями. Для этого на сайте должна быть форма обратной связи.

Прародительница всех форм

Прародительница всех форм

В основе всех веб-форм лежит тег html <form>. Он является составным и служит каркасом для остальных второстепенных элементов. Все они образованы тегом type. Каждый из них задается атрибутом тега type. Возможные значения атрибута, чаще всего применяемые в форме обратной связи для сайта:

«button» - обычная кнопка;
«text» - поле для ввода текста;
«password» - поле для ввода пароля (вводимые знаки отображаются в виде звездочек);
«radio» - переключатель;
«submit» - кнопка для отправки данных формы;
«reset» - кнопка для сброса данных всех полей формы:

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

С выходом <b>html 5</b> количество возможных вариантов этого атрибута увеличилось еще на 10 значений.

Значение обратной связи для сайта

Наличие в интерфейсе сайта раздела, где пользователь может выразить свое мнение или задать вопрос, является обязательным для любого современного ресурса. Это важно, прежде всего, для самого сайта.

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

Форма обратной связи с обработчиком на основе php

Приведенная в примере форма является полностью рабочей. В нее включен обработчик на основе php и javascript. Также реализовано несколько проверок правильности заполнения полей:

Вот скрипт этой формы обратной связи:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Untitled Document</title>
<style type="text/css">
#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);
}
</style>

</head>

<body>
<form method="POST" id="feedback-form">
Как к Вам обращаться:
<input type="text" name="nameFF" required placeholder="фамилия имя отчество" x-autocompletetype="name">
Email для связи:
<input type="email" name="contactFF" required placeholder="адрес электронной почты" x-autocompletetype="email">
Ваше сообщение:
<textarea name="messageFF" required rows="5"></textarea>
<input type="submit" value="отправить">
</form>
<script language="javascript">
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 + ', Ваше сообщение получено.nНаши специалисты ответят Вам в течение 2-х дней.n Благодарим за интерес к нашей фирме!');

    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
  return false;
}
</script>
</body>
Код файла contacts.php:
<?php
if (array_key_exists('messageFF', $_POST)) {
  mail ("свой@yandex.ru",
        "заполнена контактная форма с ".$_SERVER['HTTP_REFERER'],
        "Имя: ".$_POST['nameFF']."nEmail: ".$_POST['contactFF']."nСообщение: ".$_POST['messageFF']);
  echo $_POST['nameFF'];
}
?>

Всплывающая форма обратной связи

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

Такое решение позволяет компактно разместить все элементы пользовательского интерфейса на странице. А также сделать дизайн сайта более интересным для восприятия.

Вот код этой формы:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script>
    $(document).ready(function(){
        //Скрыть PopUp при загрузке страницы    
        PopUpHide();
    });
    //Функция отображения PopUp
    function PopUpShow(){
        $("#popup1").show();
    }
    //Функция скрытия PopUp
    function PopUpHide(){
        $("#popup1").hide();
    }
</script>
<style type="text/css">
*{
    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;
}

</style>
</head>

<body>
<div class="b-container">
    Обратная связь
    <a href="javascript:PopUpShow()">Оставить вопрос или отзыв</a>
</div>
<div class="b-popup" id="popup1">
    <div class="b-popup-content">
        <div class="one"/>
<h2> Форма обратной связи </h2>
<form name="callback" method="post" action="1.php">
</br>
Ваше имя:
</br> 
<input type="text" alt="Ваше имя" maxlength="20"/>
</br>
Ваша фамилия:
</br>
<input type="text" alt="Ваша фамилия" maxlength="20"/>
</br>
Ваш пол:
</br>
М<input type="radio" checked="checked" />
Ж<input type="radio" />
</br>
Ваш email:
</br>
<input type="text" alt="Ваш email" maxlength="20"/>
</br>
Введите пароль:
</br>
<input type="password" maxlength="10"/>
</br>
Введите сообщение:
</br>
<input type="text" alt="Ваше сообщение" size="30" maxlength="120"/>
</br>
</br>
<input type="submit" alt="Отправить"/>
</form>
</div>
    <a href="javascript:PopUpHide()">Скрыть форму</a>
    </div>
</div>
</body>

В данный код интегрирован скрипт jquery и классы стилей css. При желании все эти элементы можно разнести по разным файлам.

Всплытие и скрытие окна формы в нашем примере достигается с помощью двух функций библиотеки jquery show() и hide(), примененных к вложенному блоку <div>. Стилевые решения всех элементов реализованы с помощью классов css. Подобные формы обратной связи кроме полей для заполнения могут включать в себя и средства защиты от спама (капчи).

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

Конструкторы форм

Но не обязательно самостоятельно заниматься написанием форм. Для этого можно воспользоваться конструктором форм обратной связи. Они представляют собой интернет-сервисы, функционал которых позволяет создавать формы онлайн. Одним из таких сервисов является formdesigner.ru:

На ресурсе доступны несколько тарифных планов. Бесплатный аккаунт позволяет создать в графическом конструкторе всего 3 формы:

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

На скриншоте представлен интерфейс русскоязычного генератора форм web-apps.ru:

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

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