Форма обратной связи с помощью HTML и PHP

Форма обратной связи с помощью HTML и PHP

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

И так! Сегодня у нас на повестке дня форма обратной связи с помощью HTML и PHP. Ни для кого не секрет что, данный компонент, необходим практически всегда и на любом сайте. Тем более, если ресурс предусматривает активную обратную связь с посетителем.


С чего же состоит форма и как она работает?

Для приёма данных (имени, email, телефона, текста и т. д.), существует клиентская (front-end) часть. Клиентская часть включает в себя визуальную составляющую, верстка шаблона или блока с помощью HTML и CSS, а так же первоначальную обработку вводимых данных пользователем, с помощью языка программирования JavaScript или в нашем случае средствами HTML5.

Для обработки данных и дальнейшими манипуляциями над ними, существует серверная (back-end) часть. Серверная часть может реализовываться на различных языках программирования. Пример над которым мы работаем будет реализован на языке программирования PHP.

Задача серверной части — принимать данные от пользователя, обрабатывать их и производить с ними какие-либо действия (запись в БД, формирование ответа пользователю, отправление сообщения на почту и т. д.)

Наша форма будет иметь четыре поля для заполнения, это «Имя», «Email», «Номер телефона» и «Текстовое сообщение», все они будут обязательны для заполнения. Для полей «Email» и «Номер телефона», мы сделаем проверку на корректность вводимых данных.

И так приступим.


Верстка формы с помощью HTML

Создадим файл index.html, с этого файла начинается каждый сайт. И при этом опишем вот такую структуру:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<title>Форма обратной связи</title>
</head>
<body>
<div id="feedback-form">
	<h2 class="header">Заполните форму</h2>
	<div>
		<form class="contact_form" action="form.php" method="post">
			<p>
				<label id="name">Имя:</label>
				<input type="text" name="name" placeholder="Введите ваше имя" required>
			</p>
			<p>
				<label id="email">Email:</label>
				<input type="email" name="email" placeholder="Введите электронный адрес" required/>
				<span class="form_hint">Правильный формат "name@something.com"</span>
			</p>
			<p>
				<label id="tel">Телефон:</label>
				<input type="tel" name="tel" placeholder="Введите номер телефона" required/>
				<span class="form_hint">Правильный формат "+7-123-4567890"</span>
			</p>
			<p>
				<label id="message">Текст сообщения:</label>
				<textarea name="message" cols="40" rows="6" required></textarea>
			</p>
			<input name="bezspama" type="text" style="display:none" value=""/>
			<p>
				<button class="submit" type="submit">Отправить сообщение</button>
			</p>
		</form>
	</div>
</div>
</body>
</html>

Давайте же рассмотрим из чего состоит макет нашей формы и какие атрибуты используются.

Атрибуты id и class (class=»contact-form», id=»feedback-form» и т. д.), указываются для того чтобы, можно было стилизовать блоки и элементы которым они были присвоены.

Атрибуты type (type=»text», type=»email» и т. д.), определяют тип вводимых данных (числовые, текстовые, пароль, email). В HTML5 при указании типа данных, проводится валидация вводимых данных соответственно типу или же можно указать свой паттерн, по которому будет проводиться проверка ввода.

Атрибут name (name=»name», name=»email» и т. д.), указывается специально для того, чтоб скрипт мог идентифицировать, из какого поля данные он получает. Для каждого поля необходимо указывать уникальный name, желательно соответствующий названию поля.

Атрибут action=»form.php», в теге <form>, указывает нам, каким файлом-обработчиком, будут обработаны данные из нашей формы.

Атрибут pattern проверяет, соответствуют ли вводимые в поле ввода символы, указанному в атрибуте регулярному выражению.

Placeholder — выводит в поле ввода текст-подсказку для пользователя.

Required — атрибут который определяет поле ввода как, обязательное для заполнения. Если, поле будет пропущено, всплывет соответствующее сообщение и кнопка отправки будет заблокирована для нажатия.


Стили CSS

Чтоб наша форма имела презентабельный вид, создадим файл style.css и подключим его в шапке index.html, вот так:

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

Для начала, в style.css, опишем общие стили блока, в который помещена форма и стили самой формы с полями ввода:

* {
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100%;
	background-image: url("slight-blue-gridius-2.png");
}

#feedback-form {
	width: 480px;
	margin: 100px auto;
	background-color: #fcfcfc;
	padding: 20px 50px 40px;
	box-shadow: 1px 4px 10px 1px #aaa;
	font-family: sans-serif;
}

#feedback-form * {
	box-sizing: border-box;
}

#feedback-form h2 {
	text-align: center;
	margin-bottom: 30px;
}

#feedback-form input {
	margin-bottom: 15px;
}

#feedback-form input[type=text],
#feedback-form input[type=email],
#feedback-form input[type=tel],
#feedback-form input[type=url] {
	display: block;
	height: 32px;
	padding: 6px 16px;
	width: 100%;
	border: none;
	background-color: #f3f3f3;
}

#feedback-form textarea {
	display: block;
	padding: 6px 16px;
	width: 100%;
	border: none;
	background-color: #f3f3f3;
}

#feedback-form label {
	color: #777;
	font-size: 0.8em;
}

В этом моменте мы описываем стили всплывающей подсказки для полей «Email» и «Телефон». Данная подсказка всплывает, если оба поля в фокусе и при вводе правильных данных меняет свой цвет.

.form-hint {
	background: #d45252;
	border-radius: 3px 3px 3px 3px;
	color: white;
	padding: 1px 6px;
	z-index: 999;
	position: absolute;
	display: none;
}

.contact-form input:focus + .form-hint {
	display: inline;
}

.contact-form input:required:valid + .form-hint {
	background: #28921f;
}

.contact-form input:required:valid + .form-hint::before {
	color: #28921f;
}

Для отправки сообщения мы реализовали красиво стилизованную кнопку, внешний вид которой описан в этих стилях:

#feedback-form button.submit {
	display: block;
	margin: 20px auto 0;
	width: 150px;
	height: 40px;
	border-radius: 25px;
	border: none;
	color: #eee;
	padding: 6px 20px;
	text-align: center;
	font-weight: 700;
	box-shadow: 1px 4px 10px 1px #aaa;
	background: #207cca; /* Old browsers */
	background: -moz-linear-gradient(left, #207cca 0%, #9f58a3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #207cca 0%, #9f58a3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #207cca 0%, #9f58a3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#207cca', endColorstr='#9f58a3', GradientType=1); /* IE6-9 */
}

button.submit:hover {
	opacity: .85;
	cursor: pointer;
}

button.submit:focus {
	outline: none;
}

Обработка данных формы с помощью PHP

Вёрстка и оформление формы готовы, значит наступило время заставить её работать и выполнять необходимые нам функции. Обработка данных из формы, в нашем случае и как говорилось ранее, будет выполняться на сервере с помощью языка программирования PHP.

В теге <form> мы указали, что форма будет обрабатываться в файле form.php, так давайте же создадим его.

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

<?php

/* Функция очистки получаемых из формы значений */
function clean( $value = "" ) {
	$value = trim( $value );
	$value = stripslashes( $value );
	$value = strip_tags( $value );
	$value = htmlspecialchars( $value );

	return $value;
}

Далее берём данные из полей ввода и помещаем в переменные, предварительно пропустив их через нашу функцию-чистильщика. В переменную $address вписываем email, на который должно приходить письмо (Ваш email). Так же, в переменной $sub можете указать свой текст темы сообщения или же можно добавить это поле в форму, чтоб пользователь сам добавил свой текст.

/* Задаем переменные */
$name    = clean( $_POST["name"] );
$email   = clean( $_POST["email"] );
$tel     = clean( $_POST["tel"] );
$message = clean( $_POST["message"] );
$hidden  = clean( $_POST["hidden"] );

/* Ваш адрес и тема сообщения */
$address = "mail@example.com";
$sub     = "Сообщение с сайта sait";

В переменную $mes поместим данные нашего письма, в таком формате, в каком хотим чтоб оно выводилось у получателя.

/* Формат письма */
$mes = "Сообщение с сайта sait.\n
Имя отправителя: $name 
Электронный адрес отправителя: $email
Телефон отправителя: $tel
Текст сообщения: $message";

Для отправки письма со всеми данными получателю, мы создадим условие. В условии мы проверяем, не пусты ли все наши поля, была ли нажата кнопка «Отправить сообщение» и не заполнено ли скрытое поле ввода. Последняя проверка делается для роботов-спамеров. Если все условия соблюдены, то с помощью функции mail() совершим отправку данных.

if ( ! empty( $name ) &amp;&amp; ! empty( $email ) &amp;&amp; ! empty( $tel ) &amp;&amp; ! empty( $message ) &amp;&amp; isset( $_POST['submit'] ) &amp;&amp; empty( $hidden ) ) {
	/* Отправляем сообщение, используя mail() функцию */
	$from = "Reply-To: $email \r\n";
	if ( mail( $address, $sub, $mes, $from ) ) {
		header( 'Refresh: 5; /index.html' );
		echo '<h3>Письмо отправлено!</h3>
				<h3>Вы будете автоматически перенаправлены на сайт, если этого не произошло перейдите по 
				<a href="/index.html">ссылке</a></h3>';
	} else {
		echo '<h3>Письмо не отправлено, вернуться на <a href="/index.html">сайт</a> и повторить отправку.</h3>';
	}
}
exit;
?>

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

Вот и всё! Форма готова и работает. Скачать архив со всеми файлами можно по этой ссылке.


При разработке на локальном сервере сообщения не будут отправляться на указанный вами адрес, так как функция mail() не поддерживает SMPT, для его реализации можно воспользоваться PEAR mail или PHPMailer. И всё же на локальном сервере Open Server есть возможность провести настройку SMPT используя любой популярный почтовый сервис. О такой настройке мы поговорим в другой статье. Проверить работоспособность формы можно посмотрев логи сервера

или же папку с текстовыми файлами почты, находящиеся по ссылке: E:\ospanel\userdata\temp\email

изображение текстовых файлов почты в папке open server

На этом всё.

Обратная связь приветствуется, любые замечания или вопросы пишите в комментарии или на почту через форму обратной связи на странице Контакты. Если вам понравилась форма обратной связи с помощью HTML и PHP, поделитесь ссылкой на неё в соцсетях или на своём ресурсе.