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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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. Подобные формы обратной связи кроме полей для заполнения могут включать в себя и средства защиты от спама (капчи).

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

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

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

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

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

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

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

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

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

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

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

АРАлиса Рукинаавтор