falbar Делаем форму обратной связи на PHP

Делаем форму обратной связи на PHP

8 ноября 2014 30626 3

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

Реклама

Итак, давайте приступим, первым делом мы разметим страницу и пропишем для неё стили. Разметка будет включать в себя обычную форму обратной связи с двумя input (телефон, почта) и одной текстовой областью, куда, по нашей задумке, пользователь будет вводить своё сообщение. Обработчик формы разместим на отдельной странице.

<div id="feedback-form">
  <h2>Форма обратной связи</h2>
   <form action="feedbackHandler.php" method="post">
     <p>
           Введите телефон:
        </p>
      <input name="number" type="text" required />
      <p>
           Ваша почта:
     </p>
      <input name="email" type="text" required />
       <p>
           Ваш вопрос:
     </p>
      <textarea name="question" required></textarea>
        <br />
        <input type="submit" value="отправить" />
 </form>
</div>

Пропишем стили:

html,
body{
    height: 100%;
   margin: 0;
}
 html{
       background-color: #fff;
     color: #333;
        font: 12px/14px Verdana, Tahoma, sans-serif;
        cursor: default;
    }

       #feedback-form{
         background-color: #ececec;
          margin: 50px auto 0;
            text-align: center;
         width: 430px;
           padding: 15px;
      }
           #feedback-form h2{
              margin-bottom: 25px;
            }
           #feedback-form input[type=text],
            #feedback-form textarea{
                background-color: #fff;
             border: 1px solid #A9A9A9;
              padding: 1px 5px;
               width: 90%;
         }
           #feedback-form input[type=text]{
                height: 26px;
           }
           #feedback-form textarea{
                height: 75px;
               padding-top: 5px;
           }
           #feedback-form input[type=submit]{
              margin-top: 15px;
               background-color: #0B7BB5;
              border: 1px solid #CCCCCC;
              color: #FFFFFF;
             font-weight: bold;
              height: 40px;
               line-height: 40px;
              text-transform: uppercase;
              width: 225px;
               cursor: pointer;
            }

В результате всех этих действий получится вот такая форма:

html-forma-dlya-obratnoj-svyazi

Теперь пришло время заняться сервером. Наш скрипт будет включать в себя несколько частей:

  • Настройка;
  • Вспомогательные функции;
  • Обработка пришедших данных;
  • Вывод сообщений.

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

Настройка

На этом этапе мы создадим три переменные: $my_email (почтовый ящик на который отправляются данные), $path_log (путь до файла логов) и $time_back (время возвращение пользователя обратно на сайт).

// Указываем свой почтовый ящик
$my_email = "test@mail.ru";
// Указываем где будут храниться логи
$path_log = "log.txt";
// Время возвращения пользователя на сайт (сек)
$time_back = 3;

Вспомогательные функции

Здесь опишем пять функций, которые упростят обработку данных.

Шаблоны вывода сообщений:

function error_msg($message){

  $message = "<h2 style='color: red; font-size: 25px; margin-top: 120px;'>".$message."</h2>";
   return $message;
}

function success_msg($message){

    $message = "<h2 style='color: green; font-size: 25px; margin-top: 120px;'>".$message."</h2>";
 return $message;
}

Очистка данных пришедших с формы:

function clear_data($var){

  return trim(strip_tags($var));
}

Отправка письма:

function send_mail($email, $subj, $text, $from){

   $headers  = "From: ".$from." \r\n";
   $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=utf-8 \r\n";

  $result = mail($email, $subj, $text, $headers);

 if(!$result){

       return false;
   }

   return true;
}

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

function check_format($data, $type){

    switch($type){

      case "email":
         $pattern = "/^[a-z0-9_][a-z0-9\._-]*@([a-z0-9]+([a-z0-9-]*[a-z0-9]+)*\.)+[a-z]+$/i";
            if(preg_match($pattern, $data)){

                return true;
            }
           break;

      case "phone":
         $pattern = "/^(\+?\d+)?\s*(\(\d+\))?[\s-]*([\d-]*)$/";
            if(preg_match($pattern, $data)){

                return true;
            }
           break;
  }

   return false;
}

Как видите все написанные нами функции небольшого размера. Можно было их не выносить за приделы обработки данных, но, когда вам потребуется что-то изменить или расширить, например check_format(), это будет гораздо проще и удобнее.

Обработка пришедших данных

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

// Узнаем предыдущую страницу
$prev_page = $_SERVER["HTTP_REFERER"];
// Наши сообщения
$msg = "";
// Статус письма
$status_email = "";

Теперь, чтобы не возникло проблем с кодировкой, указываем её при помощи заголовка.

header("Content-Type: text/html; charset=utf-8");

Далее пишем сам код обработки данных.

if($_SERVER["REQUEST_METHOD"] == "POST"){

 if(isset($_POST["number"], $_POST["email"], $_POST["question"])){

     $number     = clear_data($_POST["number"]);
       $email      = clear_data($_POST["email"]);
        $question   = clear_data($_POST["question"]);

     if(check_format($number, "phone") && check_format($email, "email") && !empty($question)){

           // Формируем письмо
         $e_title = "Новое сообщение";
         $e_body  = "<html>";
                $e_body  .= "<body>";
               $e_body  .= "Телефон: ".$number;
              $e_body  .= "<br />";
               $e_body  .= "Почта: ".$email;
             $e_body  .= "<br />";
               $e_body  .= "Вопрос: ".$question;
             $e_body  .= "</body>";
          $e_body  .= "</html>";
          // END Формируем письмо

         if(send_mail($my_email, $e_title, $e_body, $prev_page)){
                $status_email = "success";
                $msg  = success_msg("Спасибо за ваш вопрос.<br />Мы ответим вам в ближайшее время.");
           }else{
              $status_email = "error";
              $msg  = error_msg("При отправке письма произошла ошибка.");
           }

           // Записываем в файл
            $str  = "Время: ".date("d-m-Y G:i:s")."\n\r";
           $str .= "Телефон: ".$number."\n\r";
           $str .= "Почта: ".$email."\n\r";
          $str .= "Вопрос: ".$question."\n\r";
          $str .= "Письмо: ".$status_email."\n\r";
          $str .= "==========================\n\r";
           file_put_contents($path_log, $str, FILE_APPEND);

        }else{

          $msg = error_msg("Заполните форму правельно!");
       }

   }else{

      $msg = error_msg("Произошла ошибка!");
    }
}else{

 exit;
}

В написанном коде мы определяем, была ли отправлена форма, в противном случае закрываем этот файл при помощи функции exit. Далее проверяем наличие в массиве POST ячеек с нашими данными, если они пришли, чистим их от возможного мусора. После очистки проверяем форматы почты и телефона, а также наличие текста в переменной вопроса. Далее формируем письмо, отправляем и пишем логии, где, помимо данных, сохраняем статус отправки письма. Так мы сможем отследить работу функции mail() и одновременно не потерять данные.

Вывод сообщений

Нам осталось только оповестить пользователя об успешной или «не очень» выполненной операции и вернуть его обратно на сайт с формой. Для этого мы используем разметку с включениями PHP скрипта.

Для перенаправления пользователя обратно на сайт, мы воспользуемся метатегом refresh, где делаем вставки PHP кода уже с созданными переменными. Ещё нам потребуются немного использовать JavaScript, чтобы сделать страницу чуть динамичней. Пишем функцию timeBack(), которая будет в обратном порядке считать секунды до перенаправления.

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8" />
    <meta http-equiv="refresh" content="<?php echo($time_back);?>; url=<?php echo($prev_page);?>" />
  <title>Обработчик формы обратной связи</title>
  <script type="text/javascript">
     function timeBack(){

            var time       = document.getElementById("time-back");
            time.innerText = parseInt(time.innerText) - 1;
          setTimeout("timeBack()", 1000);
       };
  </script>
</head>
<body>
    <div style="text-align: center;">
       <?php if($msg):?>
         <?php echo($msg);?>
       <?php endif;?>
        <p>
           Вы будете возвращены на страницу <b><?php echo($prev_page);?></b> через
       </p>
      <p id="time-back">
          <?php echo($time_back + 1);?>
     </p>
      <script type="text/javascript">timeBack();</script>
   </div>
</body>
</html>

Вот и всё, форма обратной связи готова.

Реклама
Никита Клюев
11 мая 2019
А как сделать чтобы данные заносились в базу MySQL?
Антон Кулешов
14 мая 2019
Приветствую, для этого нужно:
1. В месте, где происходит сохранение в файл добавить подключение к базе и сделать запись в неё)
2. Как это реализуется можно найти в документации PHP в разделе работы с БД.
Никита Клюев
21 мая 2019
Пытался, но что-то не получается. Кстати еще вопросик я залил свой сайт на хост с использование вашей формой, но проблема в том, что когда я ввожу данные мне пишет, что "При отправке письма произошла ошибка."
Не понимаю в чем дело.
no_avatar