Онлайн-расчёт
kwomaster7@gmail.com

Прием заявок осуществляется: Пн-Пт с 9:00 по 17:00. Сб-Вс - выходной!

8(068)95-13-385 8(050)95-13-385

Вы здесь: главная / полезное / Форма Обратной Связи На php

Василий Кулик
04.01.2020
87 просмотров
Дата обновления: 04.02.2020

Форма Обратной Связи На 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( stripslashes(strip_tags (trim($_POST['fio']))));}
  $email='';if(isset($_POST['email'])){$email=htmlspecialchars( stripslashes(strip_tags (trim($_POST['email']))));}
  $tema='';if(isset($_POST['tema'])){$tema=htmlspecialchars( stripslashes(strip_tags (trim($_POST['tema']))));}
  $mes='';if(isset($_POST['mes'])){$mes=htmlspecialchars( stripslashes(strip_tags (trim($_POST['mes']))));}
}

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

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

<?php if(count($_POST)==5){
  $fio='';if(isset($_POST['fio'])){$fio=htmlspecialchars( stripslashes(strip_tags (trim($_POST['fio']))));}
  $email='';if(isset($_POST['email'])){$email=htmlspecialchars( stripslashes(strip_tags (trim($_POST['email']))));}
  $tema='';if(isset($_POST['tema'])){$tema=htmlspecialchars( stripslashes(strip_tags (trim($_POST['tema']))));}
  $mes='';if(isset($_POST['mes'])){$mes=htmlspecialchars( stripslashes(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( stripslashes(strip_tags (trim($_POST['fio']))));}
  $email='';if(isset($_POST['email'])){$email=htmlspecialchars( stripslashes(strip_tags (trim($_POST['email']))));}
  $tema='';if(isset($_POST['tema'])){$tema=htmlspecialchars( stripslashes(strip_tags (trim($_POST['tema']))));}
  $mes='';if(isset($_POST['mes'])){$mes=htmlspecialchars( stripslashes(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 (stripslashes(strip_tags (trim($_POST['fio']))));}
  $email='';if(isset($_POST['email'])){$email=htmlspecialchars (stripslashes(strip_tags (trim($_POST['email']))));}
  $tema='';if(isset($_POST['tema'])){$tema=htmlspecialchars (stripslashes(strip_tags (trim($_POST['tema']))));}
  $mes='';if(isset($_POST['mes'])){$mes=htmlspecialchars (stripslashes(strip_tags (trim($_POST['mes']))));}
}

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

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

<?php if(count($_POST)==5){
  $fio='';if(isset($_POST['fio'])){$fio=htmlspecialchars (stripslashes(strip_tags (trim($_POST['fio']))));}
  $email='';if(isset($_POST['email'])){$email=htmlspecialchars (stripslashes(strip_tags (trim($_POST['email']))));}
  $tema='';if(isset($_POST['tema'])){$tema=htmlspecialchars (stripslashes(strip_tags (trim($_POST['tema']))));}
  $mes='';if(isset($_POST['mes'])){$mes=htmlspecialchars (stripslashes(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 (stripslashes(strip_tags (trim($_POST['fio']))));}
  $email='';if(isset($_POST['email'])){$email=htmlspecialchars (stripslashes(strip_tags (trim($_POST['email']))));}
  $tema='';if(isset($_POST['tema'])){$tema=htmlspecialchars (stripslashes(strip_tags (trim($_POST['tema']))));}
  $mes='';if(isset($_POST['mes'])){$mes=htmlspecialchars (stripslashes(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 с применением чистого кода. Созданными файлами можно манипулировать, перемещать в нужные папки (в зависимости от архитектуры проекта), только не забывайте менять пути к файлам в коде.

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

В честь нового года и Рождества я прикладываю исходник, который Вы можете скачать по ссылкам ниже:

Закрепить полученные знания онлайн

Комментарии (1):

Михаил Игнатьев
Отлично! Забераю себе это решение и буду его использовать у себя.
Публикация: 2020.01.06_18:17:42

Предложить комментарий