Форма обратной связи HTML

Это один из способов взаимодействия посетителей сайта с менеджерами или владельцем ресурса.

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

Алгоритм шагов по созданию формы обратной связи для сайта: 

  1. Код HTML – каркас формы;
  2. PHP-обработчик - осуществляет прием и обработку данных на стороне сервера;
  3. CSS стили – для оформления внешнего вида;
  4. Функция AJAX – Отправка данных к обработчику без перезагрузки страницы.

HTML структура

<div class="main-content">
	<form class="obratnuj-zvonok" autocomplete="off" action='email.php' method='post'>
		< div class = "form-zvonok" > 
			<div>
				<label>Имя<span>*</span></label>
				< input type = 'text' name = 'username' required >< /div >
			<div>
				<label>Номер телефона(с кодом)<span>*</span></label>
				<input type='text' name='usernumber' required></div>
			<div>
				<label>Сообщение</label>
				<input type='text' name='question'>
			</div>
			< input class = "bot-send-mail" type = 'submit' value = 'Послать заявку'>
		</div>

HTML структура представляет собой каркас формы обратной связи, в которой создаются поля для ввода, указываются какие из них обязательны для заполнения, и подписи к ним. 
Стили CSS отвечает за внешний вид формы и отображение данных.

Сама форма находится между тегами <form></form>. 
Классы присваиваются тегам для удобства обращения при реализации отображения через CSS стили.
У тега <form> есть два обязательных атрибута: 

  • action — ссылка на скрипт, обычно PHP, который будет обрабатывать введенные в форму данные.
  • method — метод отправки данных на сервер (GET или POST).

Атрибут autocomplete="off" — отвечает за автозаполнение формы, которое при повторном входе на страницу оставляет/обнуляет все введенные данные.

PHP-обработчик

Пример простого скрипта

$to="email@tut.by"; $subject="Тема сообщения"; $message = "Ваше имя: ".$_POST['name']." < br > "; $message .= "Номер телефона: ".$_POST['phone']."<br>"; $message .= "Сообщение: ".$_POST['message']."<br>"; $headers="Content-type: text/plain; charset=utf-8 \r\n"; mail($to,$subject,$message,$headers); ?>

$to email@tut.by – указывается почтовый ящик, на который будет отправленно сообщение.
$subject — тема сообщения, показывается почтовыми сервисами при просмотре списков писем. 
$message — собирает введенные данные и записывает в переменную. 
$headers — шапка письма, в ней указывается тип письма, а также кодировка, от кого доставлено письмо и на какой email отправлять ответ.

Оформление посредством CSS

Стили CSS для оформления формы обратной связи

.obratnuj-zvonok{
	width:100%;
	max-width:350px;
}
.form-zvonok{
	width:100%;
	display:flex;
	flex-direction:column;
	padding:0 20px;
	box-sizing:border-box;
}
.form-zvonok div{
	padding:15px 0;
}
.bot-send-mail{
	box-sizing:border-box;
	width:100%;
}
.form-zvonok label,.form-zvonok input{
display:block;
width:100%;
box-sizing:border-box;
}
.form-zvonok label{
	margin-bottom:5px;
	font-weight:bold;
}
.form-zvonok input{
	padding:10px 15px;
	margin-top:10px;
}
.form-zvonok label span{
	color:red;
}
.form-zvonok .bot-send-mail{
	padding:15px;
	margin-top:10px;
background:none;
border:none;
text-transform:uppercase;
color:#fff;
	font-weight:bold;
	background-color:#009b97;
	cursor:pointer;
	border:3px #009b97 solid;
	border-radius:5px;
}
.form-zvonok .bot-send-mail:hover{
	color:#009b97;
	background-color:#fff;
}

Вид формы после применения стилей

Нужным элементам формы обратной связи были заданы классы, по которым средствами CSS назначены стили. 

Ajax

Ajax-технология помогает увеличить быстродействие вашего сайта. Это происходит благодаря тому, что пользователь не перегружает страницу целиком, когда необходимо обновить только некоторые элементы/части вашего сайта.

Самая простая связка – это PHP + Ajax. Чтобы отправить форму без перезагрузки дополнительно понадобится:
Ajax-запрос — функция JavaScript, которая используется для асинхронной отправки введённых данных к обработчику
JQuery — библиотека для работы с JavaScript.

Примеры готовых форм обратной связи.

от простого к изумительному

Форма для тех, кто хотел написать свою, но не знает с чего начать, вот вам почти готовый пример и ничего лишнего.

HTML: 

 <form method="POST" id="feedback-form">
    <input type="text" name="nameFF" required placeholder="Имя" x-autocompletetype="name">
    <input type="email" name="contactFF" required placeholder="E-mail" x-autocompletetype="email">
    <textarea name="messageFF" required rows="5"></textarea>
    <input type="submit" value="отправить">
  </form>
CSS:

form {
	width:300px;
}
form input, form textarea {
	width:100%;
}

Форма обратной связи с эффектами анимации полей

Для корректного отображения текста, поместите код ниже между тегами <head>.

 <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Skranji:400,700|Oxygen:400,700">
HTML:

<div id="w">
    <h1>Написать письмо !</h1>
    <form id="contactform" name="contact" method="post" action="#">
      <p class="note"><span class="req">*</span> Поля со звездочкой обязательны для заполнения</p>
      <div class="row">
        <label for="name">Ваше Имя <span class="req">*</span></label>
        <input type="text" name="name" id="name" class="txt" tabindex="1" placeholder="Стив Джобс" required>
      </div>
	  
      <div class="row">
        <label for="email">E-mail Адрес <span class="req">*</span></label>
        <input type="email" name="email" id="email" class="txt" tabindex="2" placeholder="address@mail.ru" required>
      </div>
      
      <div class="row">
        <label for="subject">Тема <span class="req">*</span></label>
        <input type="text" name="subject" id="subject" class="txt" tabindex="3" placeholder="Тема письма" required>
      </div>
      
      <div class="row">
        <label for="message">Сообщение <span class="req">*</span></label>
        <textarea name="message" id="message" class="txtarea" tabindex="4" required></textarea>
      </div>
      
      <div class="center">
        <input type="submit" id="submitbtn" name="submitbtn" tabindex="5" value="Отправить Сообщение">
      </div>
    </form>
  </div>
CSS:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
  outline:none;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
html{ height:101%; }
body{ 
  font-family:'Oxygen', Arial, Helvetica, sans-serif; 
  font-size:62.5%; 
  line-height:1; 
  padding-bottom:85px;
  background:#b1eeee;
}

::selection{ background:#d2bef5; }
::-moz-selection{ background:#d2bef5; }
::-webkit-selection{ background:#d2bef5; }

br{display:block; line-height:2.2em;} 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
ol, ul{list-style:none;}

blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:“ ”; content:none;}
strong{font-weight:bold;} 

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

h1 {
  font-family: 'Skranji', 'Trebuchet MS', sans-serif;
  font-weight: bold;
  font-size: 3.75em;
  line-height: 1.7em;
  margin-bottom: 7px;
  color: #5b5463;
  text-shadow: 0 2px white, 1px 3px #666; 
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid #bbb;
}



/* positioning */
#w { 
  display: block;
  width: 660px;
  margin: 0 auto;
  margin-top: 25px;
  padding: 35px 15px;
  background: #fff;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-box-shadow: 2px 3px 4px -2px rgba(0,0,0,0.55);
  -moz-box-shadow: 2px 3px 4px -2px rgba(0,0,0,0.55);
  box-shadow: 2px 3px 4px -2px rgba(0,0,0,0.55);
}



/* form styles */
form .row { 
  display: block;
  padding: 7px 8px;
  margin-bottom: 7px;
}
form .row:hover {
  background: #f1f7fa;
}

form label {
  display: inline-block;
  font-size: 1.2em;
  font-weight: bold;
  width: 120px;
  padding: 6px 0;
  color: #464646;
  vertical-align: top;
}
form .req { color: #ca5354; }

form .note { 
  font-size: 1.2em;
  line-height: 1.33em;
  font-weight: normal;
  padding: 2px 7px;
  margin-bottom: 10px;
}

form input:focus, form textarea:focus { outline: none; }

/* placeholder styles*/
::-webkit-input-placeholder { color: #aaafbd; font-style: italic; } /* WebKit */
:-moz-placeholder { color: #aaafbd; font-style: italic; }           /* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #aaafbd; font-style: italic; }          /* Mozilla Firefox 19+ */ 
:-ms-input-placeholder { color: #aaafbd; font-style: italic; }      /* Internet Explorer 10+ */

form .txt {
  display: inline-block;
  padding: 8px 9px;
  padding-right: 30px;
  width: 240px;
  font-family: 'Oxygen', sans-serif;
  font-size: 1.35em;
  font-weight: normal;
  color: #898989;
  background-color: #f0f0f0;
  background-position: 110% center;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;
  -moz-box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;
  box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

form .txtarea {
  display: inline-block;
  padding: 8px 11px;
  padding-right: 30px;
  width: 320px;
  height: 120px;
  font-family: 'Oxygen', sans-serif;
  font-size: 1.35em;
  font-weight: normal;
  color: #898989;
  background-color: #f0f0f0;
  background-position: 110% 4%;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset;
  -moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset;
  box-shadow: 0 1px 4px -1px #a8a8a8 inset;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

form .txt:focus, form .txtarea:focus {
  width: 300px;
  color: #545454;
  background-color: #fff;
  background-position: 110% center;
  background-repeat: no-repeat;
  border-color: #059;
  -webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(70, 100, 200, 0.7);
  -moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(70, 100, 200, 0.7); 
  box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(70, 100, 200, 0.7); 
}
form .txtarea:focus { 
  width: 375px; 
  background-position: 110% 4%;
}

form .txt:valid {
  background-color: #deecda;
  background-position: 98% center;
  background-repeat: no-repeat;
  color: #7d996e;
  border: 1px solid #95bc7d;
}
form .txtarea:valid {
  background-color: #deecda;
  background-position: 98% 4%;
  background-repeat: no-repeat;
  color: #7d996e;
  border: 1px solid #95bc7d;
}
form .txt:focus:valid, form .txtarea:focus:valid {
  -webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(120, 200, 70, 0.7);
  -moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(120, 200, 70, 0.7); 
  box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(120, 200, 70, 0.7);  
}

form .center {
  margin-top: 25px;
  text-align: center;
}

#submitbtn{
height:70px;
width:275px;
padding:0;
cursor:pointer;
font-family:'Oxygen', Arial, sans-serif;
font-size:2.0em;
color:#0a528f;
text-shadow:1px 1px 0 rgba(255,255,255,0.65);
border-width:1px;
border-style:solid;
border-color:#317bd6 #3784e3 #2d74d5 #3774e3;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
background-color:#4581e5;
background-image:-webkit-gradient(linear,left top,left bottom,from(#6faefd),to(#4581e5));
background-image:-webkit-linear-gradient(top,#6faefd,#4581e5);
background-image:-moz-linear-gradient(top,#6faefd,#4581e5);
background-image:-ms-linear-gradient(top,#6faefd,#4581e5);
background-image:-o-linear-gradient(top,#6faefd,#4581e5);
background-image:linear-gradient(top,#6faefd,#4581e5);
-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
box-shadow:1px 1px 3px rgba(0,0,0,0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
transition:all 0.3s linear;
}
#submitbtn:hover, #submitbtn:focus{
 -webkit-box-shadow: 0 0 15px rgba(70, 100, 200, 0.9);
 -moz-box-shadow: 0 0 15px rgba(70, 100, 200, 0.9);
 box-shadow: 0 0 15px rgba(70, 100, 200, 0.9);
}

#submitbtn:active {
  -webkit-box-shadow:0 0 15px rgba(70, 100, 200, 0.9), 0 1px 3px rgba(0,0,0,0.4) inset;
  -moz-box-shadow: 0 0 15px rgba(70, 100, 200, 0.9), 0 1px 3px rgba(0,0,0,0.4) inset;
  box-shadow:0 0 15px rgba(70, 100, 200, 0.9), 0 1px 3px rgba(0,0,0,0.4) inset;
}

Использование HTML кода формы из QForm

Сервис QForm предоставляет возможность просмотреть HTML код формы обратной связи, который был создан при помощи констуктора. Использовав его, получим не очень красивый каркас, без стилей и привязки к бэкенду сервиса. Конструктор генерирует красивый структурированный код формы, к которому можно самостоятельно привязать обработчик, оформить внешний вид стилями CSS и получить рабочую форму обратной связи. 

Создадим форму с асинхронной отправкой данных (без перезагрузки страницы) через AJax и JQuery

Для начала необходимо создать форму

Переходим в режим “Конструктор” добавляем нужные поля.

Открываем вкладку HTML, копируем сгенерированный код и вставляем в редактор кода.

После вставки кода созданная форма будет выглядеть так.

Прежде всего подключаем JQuery — вставляем строку в конце перед закрывающимся тегом </head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Собираем Java-Script. Его можно добавить вместе с HTML кодом выше или загрузить отдельным файлом без первой или отдельной строки.

Теперь подключим специальный PHP скрипт, который будет отвечать за обработку данных, введенных пользователем. Он будет определять, что, куда и в каком виде пересылать, после того, как будет нажата кнопка отправки сообщения. Создайте отдельный файл feedback_form.php.

<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') //проверка на асинхронность
	{
    if (isset($_POST["name_2"]) && isset($_POST["email"]) ) 
	{ 
    if ($_POST['name_2'] == '') 
    {
        echo 'Не заполнено поле Имя';
        return; //проверяем наличие обязательных полей
    }
    if ($_POST['email'] == '') 
    {
        echo 'Не заполнено поле E-mail';
        return;
    } 
    $name = $_POST['name_2'];
    $email = $_POST['email'];
 mail ("your@email", "Заявка с сайта", "Имя:" .$name. "E-mail:" .$email, "From: your@email \r\n");  // собираем информацию и отправляем на указанный адрес электронной почты. не забудьте поменять оба адреса
        echo 'Заявка отправлена!';
    	return; //возвращаем сообщение пользователю
    }
    }
?>

В результате получится форма на JQuery без перезагрузки страницы. После заполнения всех полей и отправки, заявки будут приходить на указанный email. Останется только стилизовать ее средствами CSS.

Настройка и установка формы обратной связи

Опишем установку и настройку одной из вышеописанных форм (код HTML и CSS уже приведен выше, поэтому заново их расписывать не будем).

Установите форму в нужное место на сайте.
В структуре HTML элементам заданы классы и ID, чтобы оперировать ими.
У тегов <label> имеется тег <span class="req">*</span> - это означает, что поле обязательно для заполнения (при необходимости можете убрать эти критерий).

Подключаем JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

В теге <form> добавляем атрибуты:
autocomplete="off" - отключает автозаполнение и при повторном заходе на страницу все поля ввода будут обнулены
onsubmit="call()" - вызов JavaScript события
Собираем Javascript

<script type="text/javascript">
	function call() {
	  var msg   = $('#contactform).serialize();
       $.ajax({
         type: 'POST',
         url: 'feedback_form.php', //обращаемся к обработчику
         data: msg,
        success: function(data) {  //в случае успеха выводим результаты в div "results"
            $('#contactform).remove(); //скрываем форму после отправки 
            $('#results').html(data); //показываем сообщение об успехе вместо неё 
         },
         error:  function(xhr, str){ //ошибка выводит соответствующее сообщение 
	    alert('Возникла ошибка: ' + xhr.responseCode);
         }
       });
   }
</script>

Далее создаем отдельный файл с названием “feedback_form” - будет отвечать за отправку и обработку письма.

<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') //проверка на асинхронность
	{
    if (isset($_POST["name"]) && isset($_POST["email"]) ) 
	{ 
    if ($_POST['name'] == '') 
    {
        echo 'Не заполнено поле Имя';
        return; //проверяем наличие обязательных полей
    }
    if ($_POST['email'] == '') 
    {
        echo 'Не заполнено поле E-mail';
        return;
    }
    $name = $_POST['name'];
    $email = $_POST['email'];
mail("redline2307@yandex.ru", "Заявка с сайта", "Имя: ".$name. "\nE-mail: ".$email ,"From: redline2307@yandex.ru \r\n"); //здесь делаем отправку заявки на почту. Не забудьте поменять оба адреса
        echo 'Заявка отправлена!';
    	return; //возвращаем сообщение пользователю
    }
    }
?>

После отправки сообщения на почту будут приходить заявки в соответствии с заданными требованиями.

Ссылка на подробную статью по созданию формы вручную

Использовать ручной способ написания кода только для отстройки формы обратной связи не совсем целесообразно. Сделать каркас, оформить его и подключить обработчик далеко не все, что потребуется сделать. Если Вам нужна крутая и красивая форма, в дальнейшем необходимы будут:

  • Асинхронная отправка (отправка без перезагрузки страницы), чтобы снизить нагрузку на сервер и не дезориентировать пользователя ненужной перезагрузкой страницы или редиректом;
  • Настройка скрытия отправленной формы;
  • Показ сообщений об успехе/отказе;
  • Проверка валидации полей, маски полей;
  • Интеграция с CRM;
  • Отправке достижения целей в метрику и настройка капчи.

Зато всё это делается в нашем конструкторе форм буквально в пару кликов. С помощью интуитивно понятного интерфейса можно собрать практически любую форму. 

Использование сервиса даст вам широкий круг возможностей. А именно:

  • Конструктор полей с функцией drag-n-drop;
  • Настройки дизайна;
  • Создание групп и распределение прав доступа;
  • Видеовиджет;
  • Собственный CSS;
  • Уведомления на почту и мессенджеры;
  • Внутренняя CRM;
  • Внешние интеграции;
  • Использование капчи.

Опишем процесс создания на QForm формы обратной связи и вставки ее на сайт.

Вставка формы QForm на сайт

Добавьте сайт
Создайте форму
Добавьте поля путем перетаскивания или клика на значок “+”
Выберите тип оформления и настройки отображения
Скопируйте DIV для установки формы и скрипт для ее вызова
Код DIV вставьте в место сайта, где форма должна быть сгенерирована
Скрипт вставьте в раздел <head>
Понравилась статья? Поделись!!