Главная / Блог / Форма Обратной Связи На php

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

139

04.01.2020

Обновлено: 04.02.2020

Время прочтения: 8 минут

Василий Кулик программист

Кулик Василий

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

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

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

План урока:

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

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

  1. Написать HTML-код формы обратной связи
  2. Придать внешний вид форме, используя CSS
  3. Прием данных из формы
  4. Реализовать проверку полей формы на PHP
  5. Вывод ошибок и отправка формы на 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)

  1. Написать HTML-код формы обратной связи
  2. Придать внешний вид формы, используя CSS
  3. Прием данных из формы на JavaScript
  4. проверка полей на JavaScript
  5. Формирование массива, для отправки POST-запросом через Ajax
  6. Вывод ошибок и отправка формы по Ajax на сервер
  7. Прием данных из формы на PHP
  8. Проверка полей на PHP
  9. Отправка формы на 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 с применением чистого кода. Созданными файлами можно манипулировать, перемещать в нужные папки (в зависимости от архитектуры проекта), только не забывайте менять пути к файлам в коде.

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

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

Что-то не понятно?
Спросите у нас и мы обязательно Вам поможем!

Отправляя форму, Вы подтверждаете указание своего e-mail адреса.

Рекомендуемые статьи этой категории

Как выбрать хостинг

Выбор хостинга, виртуального сервера(VPS), физичесского сервера, для Вашего проекта с ориентировкой на цену, посещаемость и безопасность. Современный и проверенный алгоритм выбора хостинга и сервера, чтобы Ваш сайт попал гарантированно в ТОП!

Подробнее
Ошибки в верстке новичков и опытных

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

Подробнее
Оптимизация верстки + 10 трендовых фишек

Узнайте о фишках оптимизации вашей верстки HTML+CSS и ваши сайты станут еще быстрее, лучше и с высокой оценкой качества. Вы узнаете о легком способе оптимизации изображений, шрифтов, текста и кода.

Подробнее
Как реально сэкономить на SEO-продвижении и кто может сделать качественный сайт

Работающий и проверенный способ экономиии на продвижении сайтов в поиске, с гарантиями качества от Google. Возможность самого качественного сайта.

Подробнее

Оставить заявку