Как сделать форму обратной связи на html?

Форма обратной связи - используется, как не странно, для связи пользователя сайта с администратором. В ней пользователь может сообщить о каких то ошибках на сайте или спросить о чем-либо разработчика.

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

  • Способ №1. Форма обратной связи на html + css + php (функционален, расширяем, относительно сложный способ)
  • Способ №2. Форма обратной связи только на html от стороннего сервиса (простота установки, функционален)
  • Способ №3. Форма для связи, реализованная по средствам ссылки для почтового клиента. При клике по ней открывается ваша почта, в которой уже вписан нужный email для связи. (просто, но и нет ни каких функций или возможностей)

Способ №1. Форма обратной связи html + php.

Для данной формы вам потребуется:

  • Хостинг с поддержкой PHP
  • Знания HTML+ CSS
  • Знания PHP

Начнем с создания PHP файла который будет обрабатывать запросы пользователей на сервере. Он должен, проверить, все ли необходимые поля были заполнены и если все нормально, отправить сообщение.

<meta http-equiv='refresh' content='3; url=https://you-hands.ru'>
<meta charset="UTF-8" />
<?php

	if (isset($_POST['name']) && $_POST['name'] != "")//если существует атрибут NAME и он не пустой то создаем переменную для отправки сообщения
		$name = $_POST['name'];
	else die ("Не заполнено поле \"Имя\"");//если же атрибут пустой или не существует то завершаем выполнение скрипта и выдаем ошибку пользователю.

	if (isset($_POST['email']) && $_POST['email'] != "") //тут все точно так же как и в предыдущем случае
		$email = $_POST['email'];
	else die ("Не заполнено поле \"Email\"");

	if (isset($_POST['subjects']) && $_POST['subjects'] != "") 
		$sub = $_POST['subjects'];
	else die ("Не заполнено поле \"Тема\"");

	if (isset($_POST['message']) && $_POST['message'] != "") 
		$body = $_POST['message'];
	else die ("Не заполнено поле \"Сообщение\"");
	 


	$address = "[email protected]";//адрес куда будет отсылаться сообщение для администратора
	$mes  = "Имя: $name \n";	//в этих строчках мы заполняем текст сообщения. С помощью оператора .= мы просто дополняем текст в переменную
	$mes .= "E-mail: $email \n";
 	$mes .= "Тема: $sub \n";
 	$mes .= "Текст: $body"; 
	$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");//собственно сам вызов функции отправки сообщения на сервере

	if ($send) //проверяем, отправилось ли сообщение
		echo "Сообщение отправлено успешно! Перейти на <a href='https://You-hands.ru/'>you-hands.ru</a>, если вас не перенаправило вручную.";
	else 
		echo "Ошибка, сообщение не отправлено! Возможно, проблемы на сервере";
		 
?>

Далее давай те напишем HTML код формы

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Форма обратной связи</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	

	<form name="form" action="mail.php" method="post" id="form_message">
		<h2>Форма обратной связи.</h2>
		<p> <div class="titles">Ваше имя*</div> <input class="input" name="name" type="text"/> </p>
		 
		<p> <div class="titles">Электронная почта*</div> <input class="input" name="email" type="text"/> </p>
		 
		<p> <div class="titles">Тема сообщения</div> <input class="input" name="subjects" type="text"/> </p>
		 
		<p> <div class="titles">Текст сообщения:</div><textarea name="message" cols="22" rows="5" /></textarea></p>
		<p><input id="submit" value="Отправить" type="submit" /></p>
	</form>
</body>
</html>

Ну и конечно же файл CSS, что-бы все облагородить)

.titles{
	width: 140px;
	float: left;
}

#form_message{
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	border-radius: 5px;
	margin:10px;
	padding: 10px;
	width: 320px;
	height:330px;
}

#form_message input,textarea{
	border-radius: 5px;
	width: 170px;
}

#submit{
	height: 50px;
	float: right;
}

#form_message h2{
	text-align: center;
}

Скачать с Я.Диск: https://yadi.sk/d/hohX1ZdUAWX_7Q

Как сделать форму обратной связи на html?

Вот, что получилось в итоге.

Как сделать форму обратной связи на html?

Способ №2. Сервис для формы обратной связи.

Для данного способа вам понадобиться:

  • Хостинг HTML
  • Знание HTML приветствуется

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

форма обратной связи Яндекс

Я собрал вот такую форму на сервисе Яндекса.

Как сделать форму обратной связи на html?
Куча различных виджетов уже готовы и доступны для вас
Как сделать форму обратной связи на html?
Уведомления на почту

После составления формы, нужно лишь скопировать полученный по кнопке "поделиться" код и вставить в нужное место на странице вашего сайта.

Способ №3. Ссылка для отправки email.

Самый простой способ реализовать связь разработчика и пользователя. Оставить свою почту на сайте. Но мы ведь любим упрощать жизнь пользователям. Поэтому разместим не просто адрес, а ссылку адрес. Выглядит такая ссылка вот так:

<a href="mailto:[email protected]">Отправить сообщение</a>

Такую ссылку можно усложнить и задать сразу еще и тему к примеру

<a href="mailto:[email protected]?subject=YOUR_SUBJECT">Отправить сообщение с темой</a>

При клике по такой ссылке, пользователь перейдет в клиент электронной почты и сможет отправить вам сообщение.

Пока нет оценок, но вы можете быть первым!

Оцените