Форма Обратной Связи На php

Пришло время поделиться с Вами опытом в написании формы обратной связи на php, с применением чистого кода.

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

План урока:

Реализовать форму обратной связи с перезагрузкой страницы
Реализовать форму обратной связи без перезагрузки страницы (Ajax)

Алгоритм действий (план № 1):

Написать HTML-код формы обратной связи
Придать внешний вид форме, используя CSS
Прием данных из формы
Реализовать проверку полей формы на PHP
Вывод ошибок и отправка формы на E-mail админу

Ход плана:

Шаг № 1: HTML-код формы

Файл: index.php

<!DOCTYPE html>
<html lang="ru">
<head>

	 <title>Форма обратной связи на php | Василий Кулик</title>
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	 <meta name="viewport" content="width=device-width, initial-scale=1">
	 <meta name="keywords" content="">
	 <meta name="description" content="">
	
	 <link rel="stylesheet" href="style.css">
	 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
	 <h1>Напишите нам сообщение с сайта</h1>
	
	 <div id="forma">
		<form name="myform" action="index.php" method="post">
			<p><input type="text" name="fio" placeholder="Ваши ИФО *"></p>
			<p><input type="text" name="email" placeholder="Ваш e-mail *"></p>
			<p><input type="text" name="tema" placeholder="Тема письма *"></p>
			<p><textarea name="mes" placeholder="Сообщение *"></p>
			<p><input type="submit" name="sends" value="Отправить"></p>
		</form>
	 </div>
</body>
</html>

Шаг № 2: CSS-код (стилизация, внешний вид)

Файл: style.css

@charset "utf-8";
html,body{height:100%; margin:0;padding:0;}
body{font-family:Arial, Helvetica,sans-serif;}

/*Придаем стили форме*/
h1{text-align:center;}
input,textarea{width:100%; padding:0 3%;box-sizing:border-box; border:1px solid #c7bebe; outline:none;}
input:focus, textarea:focus{border:1px solid #135424;}

#forma{width:700px; margin:0 auto;}
#forma input[type=text]{height:35px;}
#forma textarea{height:130px;padding:10px 3%; resize:none;}
#forma input[type=submit]{height:38px;cursor:pointer; background:#257d3c;color:#fff;font-size:17px; text-transform:uppercase;transition:.2s ease;}
#forma input[type=submit]:hover{ background:#135424;}

.mes_ok,.mes_err{font-size:17px;padding:5px; text-align:center;}
.mes_err{color:#a51e1e;}
.mes_ok{color:#33a51e;}

Шаг № 3: прием данных из формы

Для приема данных в первую очередь, что нужно сделать - это написать условие: если существует POST-отправка формы (кнопка "отправить" нажата) - подключить файл со скриптом, принимающий форму.

Файл: index.php

<!DOCTYPE html>
<html lang="ru">
<head>
	 <title>Форма обратной связи на php | Василий Кулик</title>
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	 <meta name="viewport" content="width=device-width, initial-scale=1">
	 <meta name="keywords" content="">
	 <meta name="description" content="">
	
	 <link rel="stylesheet" href="style.css">
	 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
	 <h1>Напишите нам сообщение с сайта</h1>
	
	 <div id="forma">
		<?php if(isset($_POST['sends'])){include 'send_form.php';}?>
		<form name="myform" action="index.php" method="post">
			<p><input type="text" name="fio" placeholder="Ваши ИФО *"></p>
			<p><input type="text" name="email" placeholder="Ваш e-mail *"></p>
			<p><input type="text" name="tema" placeholder="Тема письма *"></p>
			<p><textarea name="mes" placeholder="Сообщение *"></p>
			<p><input type="submit" name="sends" value="Отправить"></p>
		</form>
	 </div>
</body>
</html>

Условие написано. Теперь создаем файл: send_form.php:

<?php
if(count($_POST)==5){
	$fio='';if(isset($_POST['fio'])){$fio=htmlspecialchars(strip_tags (trim($_POST['fio'])));}
	$email='';if(isset($_POST['email'])){$email=htmlspecialchars(strip_tags (trim($_POST['email'])));}
	$tema='';if(isset($_POST['tema'])){$tema=htmlspecialchars(strip_tags (trim($_POST['tema'])));}
	$mes='';if(isset($_POST['mes'])){$mes=htmlspecialchars(strip_tags (trim($_POST['mes'])));}
}

Логика такова: наша форма содержит 5 полей. Если по каким-то причинам, отправлено будет менее, или более 5-ти полей POST-запросом - мы ничего не делаем. Это подозрение на вредительство, а мы этого опасаемся.

Шаг № 4: проверка полей формы на PHP

<?php
if(count($_POST)==5){
	$fio='';if(isset($_POST['fio'])){$fio=htmlspecialchars(strip_tags (trim($_POST['fio'])));}
	$email='';if(isset($_POST['email'])){$email=htmlspecialchars(strip_tags (trim($_POST['email'])));}
	$tema='';if(isset($_POST['tema'])){$tema=htmlspecialchars(strip_tags (trim($_POST['tema'])));}
	$mes='';if(isset($_POST['mes'])){$mes=htmlspecialchars(strip_tags (trim($_POST['mes'])));}
	
	//Проверка полей
	$err=array();//Массив для ошибок
	if(empty($fio) || mb_strlen($fio,'UTF-8')>40){$err[]='Некорректное ИФО (более 40 символов)';}
	if(!preg_match("/^[a-z0-9][a-z0-9\.-_]*[a-z0-9]*@([a-z0-9]+([a-z0-9-]*[a-z0-9]+)*\.)+[a-z]+/i",$email)){$err[]='Некорректный E-mail';}
	if(empty($tema) || mb_strlen($tema,'UTF-8')>30){$err[]='Некорректная тема (более 30 символов)';}
	if(empty($mes) || mb_strlen($mes,'UTF-8')>350){$err[]='Некорректное сообщение (более 350 символов)';}
}

Шаг № 5: Вывод ошибок и отправка формы на E-mail админу

<?php
if(count($_POST)==5){
	$fio='';if(isset($_POST['fio'])){$fio=htmlspecialchars(strip_tags (trim($_POST['fio'])));}
	$email='';if(isset($_POST['email'])){$email=htmlspecialchars(strip_tags (trim($_POST['email'])));}
	$tema='';if(isset($_POST['tema'])){$tema=htmlspecialchars(strip_tags (trim($_POST['tema'])));}
	$mes='';if(isset($_POST['mes'])){$mes=htmlspecialchars(strip_tags (trim($_POST['mes'])));}
	
	//Проверка полей
	$err=array();//Массив для ошибок
	if(empty($fio) || mb_strlen($fio,'UTF-8')>40){ $err[]='Некорректное ИФО (более 40 символов)';}
	if(!preg_match( "/^[a-z0-9][a-z0-9\.-_]*[a-z0-9] * @([a-z0-9]+([a-z0-9-]*[a-z0-9]+)*\.)+[a-z]+/i",$email)){$err[]='Некорректный E-mail';}
	if(empty($tema) || mb_strlen($tema,'UTF-8')>30){$err[]=' Некорректная тема (более 30 символов)';}
	if(empty($mes) || mb_strlen($mes,'UTF-8')>350){$err[]=' Некорректное сообщение (более 350 символов)';}
	
	if(count($err)>0){//Количество ел. в массиве больше 0 (есть ошибки)
		echo '<p class="mes_err"><b> Исправьте следующие ошибки:</b></p>';
		$i=0;$c=count($err);while($i<$c){
			echo '<p class="mes_err">- '.$err[$i].'</p>';
		$i++;}

	}else{//если нет ошибок - отправляем сообщением админу

		$from="=?utf-8?B?".base64_encode(' kwo-master.com')."?="." ";
		$headers="From: ". $from."\r\nReply-To: ".$from."\r\nContent-type: text/html; charset=utf-8\r\n";
		$subject="=?utf-8?B?".base64_encode($tema)."?=";
		if(mail('kwomaster7@gmail.com', $subject,$mes, $headers)){echo '<p class="mes_ok">Сообщение отправлено!</p>';}
	}

}

Алгоритм действий (план № 2)

Написать HTML-код формы обратной связи
Придать внешний вид формы, используя CSS
Прием данных из формы на JavaScript
проверка полей на JavaScript
Формирование массива, для отправки POST-запросом через Ajax
Вывод ошибок и отправка формы по Ajax на сервер
Прием данных из формы на PHP
Проверка полей на PHP
Отправка формы на E-mail админу

Ход плана:

Шаг № 1: HTML-код формы

Файл: index.php

<!DOCTYPE html>
<html lang="ru">
<head>
	 <title>Форма обратной связи на php | Василий Кулик</title>
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	 <meta name="viewport" content="width=device-width, initial-scale=1">
	 <meta name="keywords" content="">
	 <meta name="description" content="">
	
	 <link rel="stylesheet" href="style.css">
	 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body><
	 <div id="ajax"></div>
	 <h1>Напишите нам сообщение с сайта</h1>

	
	 <div id="forma">
		<form name="myform" id="form_1">
			<p><input type="text" name="fio" placeholder="Ваши ИФО *"></p>
			<p><input type="text" name="email" placeholder="Ваш e-mail *"></p>
			<p><input type="text" name="tema" placeholder="Тема письма *"></p>
			<p><textarea name="mes" placeholder="Сообщение *"></p>
			<p><input type="button" name="sends" value="Отправить" onclick="valid_form( document.getElementById('form_1'));"></p>
		</form>
	 </div>
	<script src="forms.js" defer></script>
</body>
</html>

Шаг № 2: CSS-код (стилизация, внешний вид)

Файл: style.css

@charset "utf-8";
html,body{height:100%; margin:0;padding:0;}
body{font-family:Arial, Helvetica,sans-serif;}

/*Придаем стили форме*/
h1{text-align:center;}
input,textarea{width:100%;padding:0 3%; box-sizing:border-box; border:1px solid #c7bebe; outline:none;}
input:focus,textarea:focus{ border:1px solid #135424;}

#forma{width:700px;margin:0 auto;}
#forma input[type=text]{height:35px;}
#forma textarea{height:130px; padding:10px 3%;resize:none;}
#forma input[type=button]{height:38px;cursor:pointer; background:#257d3c;color:#fff; font-size:17px; text-transform:uppercase; transition:.2s ease;}
#forma input[type=button]:hover{ background:#135424;}

Шаг № 3: Прием данных из формы на JavaScript

Файл: forms.js

function valid_form(id){
	//Прием полей
	var fio=id.fio.value,
	email=id.email.value,
	tema=id.tema.value,
	mes=id.mes.value,
	err=new Array();
}

Шаг № 4: проверка полей на JavaScript

function valid_form(id){
	//Прием полей
	var fio=id.fio.value,
	email=id.email.value,
	tema=id.tema.value,
	mes=id.mes.value,
	err=new Array();
	
	//Проверка полей
	var pattern =/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
	if(!pattern.test(email) || email.length>150){err+='- Некорректный E-mail\n';}
	
	if(fio.length<7 || fio.length>30){err+='- Некорректное ФИО\n';}
	if(tema.length<7 || tema.length>30){err+='- Некорректная тема\n';}
	if(mes.length<10 || mes.length>350){err+='- Некорректное сообщение\n';}
}

Шаг № 5: Формирование массива, для отправки POST-запросом через Ajax и вывод ошибок

function valid_form(id){
	//Прием полей
	var fio=id.fio.value,
	email=id.email.value,
	tema=id.tema.value,
	mes=id.mes.value,
	err=new Array();
	
	//Проверка полей
	var pattern =/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
	if(!pattern.test(email) || email.length>150){err+='- Некорректный E-mail\n';}
	
	if(fio.length<7 || fio.length>30){err+='- Некорректное ФИО\n';}
	if(tema.length<7 || tema.length>30){err+='- Некорректная тема\n';}
	if(mes.length<10 || mes.length>350){err+='- Некорректное сообщение\n';}
	
	if(err.length>0){alert('Исправьте ошибки: \n'+err);}
	else{
		// Передача GET и POST-переменных
		var formData=new FormData();
		formData.append('fio',fio);
		formData.append('email',email);
		formData.append('tema',tema);
		formData.append('mes',mes);
	}
}

Шаг № 6: отправка формы по Ajax на сервер

function valid_form(id){
	//Прием полей
	var fio=id.fio.value,
	email=id.email.value,
	tema=id.tema.value,
	mes=id.mes.value,
	err=new Array();
	
	//Проверка полей
	var pattern =/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
	if(!pattern.test(email) || email.length>150){err+='- Некорректный E-mail\n';}
	
	if(fio.length<7 || fio.length>30){err+='- Некорректное ФИО\n';}
	if(tema.length<7 || tema.length>30){err+='- Некорректная тема\n';}
	if(mes.length<10 || mes.length>350){err+='- Некорректное сообщение\n';}
	
	if(err.length>0){alert('Исправьте ошибки: \n'+err);}

	else{
		// Передача GET и POST-переменных
		var formData=new FormData();
		formData.append('fio',fio);
		formData.append('email',email);
		formData.append('tema',tema);
		formData.append('mes',mes);
		
		var xmlhttp=new XMLHttpRequest();
		xmlhttp.onreadystatechange= function(){
			 if(xmlhttp.readyState==4 && xmlhttp.status==200){
				var rpz_TXT= xmlhttp.responseText;
				
				var bl= document.getElementById('ajax');
				bl.innerHTML=rpz_TXT;
			 }
		}
		xmlhttp.open("POST", 'send_form.php',true);
		xmlhttp.send(formData);
	}
}

Шаг № 7: Прием данных из формы на PHP

Файл: send_form.php:

<?php
if(count($_POST)==5){
	$fio='';if(isset($_POST['fio'])){$fio=htmlspecialchars (strip_tags (trim($_POST['fio'])));}
	$email='';if(isset($_POST['email'])){$email=htmlspecialchars (strip_tags (trim($_POST['email'])));}
	$tema='';if(isset($_POST['tema'])){$tema=htmlspecialchars (strip_tags (trim($_POST['tema'])));}
	$mes='';if(isset($_POST['mes'])){$mes=htmlspecialchars (strip_tags (trim($_POST['mes'])));}
}

Шаг № 8: Проверка полей на PHP

Проверка полей здесь отличается от первого способа, ведь основной проверкой занимается JavaScript-сценарий. Если юзер задумает хитрить, отключит JS, искусственно обойдет проверку - нас подстрахует финальная проверка на стороне сервера.

<?php
if(count($_POST)==5){
	$fio='';if(isset($_POST['fio'])){$fio=htmlspecialchars (strip_tags (trim($_POST['fio'])));}
	$email='';if(isset($_POST['email'])){$email=htmlspecialchars (strip_tags (trim($_POST['email'])));}
	$tema='';if(isset($_POST['tema'])){$tema=htmlspecialchars (strip_tags (trim($_POST['tema'])));}
	$mes='';if(isset($_POST['mes'])){$mes=htmlspecialchars (strip_tags (trim($_POST['mes'])));}
	
	//Проверка полей
	$err=array();//Массив для ошибок
	if(empty($fio) || mb_strlen($fio,'UTF-8')>40
	||!preg_match("/^[a-z0-9][a-z0-9\.-_] * [a-z0-9]*@([a-z0-9]+([a-z0-9-]*[a-z0-9]+)*\.)+[a-z]+/i",$email)
	||empty($tema) || mb_strlen($tema,'UTF-8')>30
	||empty($mes) || mb_strlen($mes,'UTF-8')>350){exit;}
}

Шаг № 5: Отправка формы на E-mail админу

<?php
if(count($_POST)==5){
	$fio='';if(isset($_POST['fio'])){$fio=htmlspecialchars (strip_tags (trim($_POST['fio'])));}
	$email='';if(isset($_POST['email'])){$email=htmlspecialchars (strip_tags (trim($_POST['email'])));}
	$tema='';if(isset($_POST['tema'])){$tema=htmlspecialchars (strip_tags (trim($_POST['tema'])));}
	$mes='';if(isset($_POST['mes'])){$mes=htmlspecialchars (strip_tags (trim($_POST['mes'])));}
	
	//Проверка полей
	$err=array();//Массив для ошибок
	if(empty($fio) || mb_strlen($fio,'UTF-8')>40
	||!preg_match("/^[a-z0-9][a-z0-9\.-_] * [a-z0-9]*@([a-z0-9]+([a-z0-9-]*[a-z0-9]+)*\.)+[a-z]+/i",$email)
	||empty($tema) || mb_strlen($tema,'UTF-8')>30
	||empty($mes) || mb_strlen($mes,'UTF-8')>350){exit;}
	
	//Отправка
	$from="=?utf-8?B?". base64_encode('kwo-master.com') ."?="." ";
	$headers="From: ".$from."\r\nReply-To: ". $from."\r\nContent-type: text/html; charset=utf-8\r\n";
	$subject="=?utf-8?B?".base64_encode($tema)."?=";
	if(mail('kwomaster7@gmail.com', $subject, $mes, $headers)){echo '<p class="mes_ok">Сообщение отправлено!</p>';}
}

Совершилось! Форма готова и работает. Вот и подошёл к конку урок по созданию формы обратной связи на PHP, JavaScript, Ajax с применением чистого кода. Созданными файлами можно манипулировать, перемещать в нужные папки (в зависимости от архитектуры проекта), только не забывайте менять пути к файлам в коде.

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

Прикладываю исходник, который доступен для скачивания по ссылкам ниже: