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

Фор­ма обрат­ной свя­зи — древ­ней­шее про­грам­мист­ское искус­ство. Тут есть всё: фор­ма с про­вер­кой, при­ём запро­са, обра­бот­ка, без­опас­ность, хра­не­ние и ответ. Это как Hello World, толь­ко для самых крутых.

В сего­дняш­ней вер­сии про­грам­мы — толь­ко самые осно­вы это­го упраж­не­ния. В сле­ду­ю­щих частях мы про­ка­ча­ем систему.

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

Что­бы сде­лать у себя на сай­те такое, нам понадобится:

  • сер­вер, кото­рый уме­ет рабо­тать с PHP-скриптами,
  • стра­ни­ца, где раз­ме­стим форму,
  • скрипт на PHP — он будет отве­чать за отправ­ку сообщения.

Сервер для PHP

Для того, что­бы PHP-код испол­нял­ся, нужен какой-то компьютер-исполнитель. Мы назы­ва­ем его сер­ве­ром — то есть «раз­да­ю­щим». На сер­ве­ре долж­на рабо­тать про­грам­ма для PHP, кото­рое отве­ча­ет за пра­виль­ную обра­бот­ку таких файлов.

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

Когда мы дела­ли про­ект «Пуб­ли­ку­ем свою стра­ни­цу в интер­не­те», то уже исполь­зо­ва­ли сер­вер (эту услу­гу нам предо­ста­ви­ла хостин­го­вая ком­па­ния SpaceWeb). Этот же сер­вер мы можем исполь­зо­вать для нашей сего­дняш­ней зада­чи, пото­му что он тоже уме­ет рабо­тать с PHP-файлами:

Если такое есть у ваше­го хостин­га, то вы тоже смо­же­те исполь­зо­вать все воз­мож­но­сти PHP. 

Готовим страницу с формой

Возь­мём стан­дарт­ный шаб­лон стра­ни­цы и напол­ним его сти­ля­ми и кодом для формы.

Шаблон страницы

<!DOCTYPE html>
<html>
<!-- Служебная часть -->

<head>
  <!-- Заголовок страницы -->
  <title>Заголовок</title>
  <!-- Настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    /* Тут будут стили */
  </style>
  <!-- Закрываем служебную часть страницы -->
</head>

<body>
  <!-- Тут будет наша страница -->
</body>
<!-- Конец всей страницы -->

</html>

Про­пи­шем CSS-стили, что­бы наша стра­ни­ца выгля­де­ла опрят­но. Забе­жим немно­го впе­рёд и исполь­зу­ем в сти­лях раз­де­лы input и textarea:

/*Задаём общие параметры для всей страницы: шрифт и отступы*/
body {
  /*text-align: center;*/
  margin: 10;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}
/* Настраиваем внешний вид полей ввода*/
input {
  display: inline-block;
  margin: 10px auto;
  border: 2px solid #eee;
  padding: 10px 20px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}
textarea {
  display: inline-block;
  margin: 10px auto;
  border: 2px solid #eee;
  padding: 10px 20px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}

Что­бы сде­лать фор­му на стра­ни­це, мы будем исполь­зо­вать такие теги:

<input> — для вво­да име­ни, почты для свя­зи и темы пись­ма. Они зани­ма­ют одну стро­ку, нам это­го достаточно.

<textarea> — здесь будут писать само сооб­ще­ние, поэто­му нуж­но будет сде­лать это поле поболь­ше и пошире.

Ещё мы вос­поль­зу­ем­ся тегом <form> — он мыс­лен­но соби­ра­ет наши поля в одну фор­му и помо­га­ет управ­лять ими из одно­го места. У каж­дой фор­мы есть свой метод, по кото­ро­му она рабо­та­ет с дан­ны­ми. Фор­ма может или отправ­лять дан­ные (post), или полу­чать их (get). Так как нам надо отпра­вить сооб­ще­ние в PHP-скрипт, будем исполь­зо­вать метод post. Сра­зу про­пи­шем путь к скрип­ту на сер­ве­ре — по это­му адре­су мы зальём нуж­ный файл на сле­ду­ю­щем эта­пе. Этот скрипт, кото­рый мы поз­же напи­шем, и есть обра­бот­чик формы.

Офор­мим всё в виде кода:

<!-- Создаём форму и указываем её обработчик и метод -->
<form action="http://mihailmaximov.ru/projects/mail/post.php" method="post" name="form">
  <!-- Поле ввода имени -->
  <input name="name" type="text" placeholder="Ваше имя" />
  <br>
  <!-- Поле ввода почты  -->
  <input name="email" type="text" placeholder="Ваша почта" />
  <br>
  <!-- Поле ввода для темы сообщения -->
  <input size="30" name="header" type="text" placeholder="Тема" />
  <br>
  <!-- Текстовое поле для самого сообщения -->
  <textarea cols="32" name="message" rows="5"> Текст сообщения
  </textarea>
  <br>
  <!-- Кнопка с надписью «Отправить», которая запускает обработчик формы -->
  <input type="submit" value="Отправить" />
</form>
У нас уже есть фор­ма, но она пока не рабо­та­ет. Сей­час это исправим. 

Пишем обработчик формы на PHP

Когда мы запол­ним и отпра­вим фор­му на нашей стра­ни­це, про­изой­дёт следующее:

  1. Бра­у­зер собе­рёт вве­дён­ные нами дан­ные и ском­по­ну­ет таким обра­зом, что­бы их мож­но было пере­дать в про­грам­му на PHP. Как бы упа­ку­ет в посылку.
  2. В нашей PHP-программе мы смо­жем полу­чить доступ к этим дан­ным, как бы засо­сать их в память и хра­нить в пере­мен­ных. Мож­но пред­ста­вить, что мы рас­па­ку­ем посыл­ку и смо­жем поль­зо­вать­ся её содержимым.
  3. Скрипт PHP что-то сде­ла­ет с полу­чен­ны­ми дан­ны­ми, а потом выплю­нет поль­зо­ва­те­лю какой-то ответ. Этот ответ будет отоб­ра­жён в виде веб-страницы в браузере.

Логи­ка рабо­ты PHP-программы будет такая:

  • полу­ча­ем зна­че­ния пере­мен­ных из тех дан­ных, кото­рые полу­чил обработчик;
  • гото­вим сооб­ще­ние, где ука­жем все поля в форме;
  • отправ­ля­ем это сооб­ще­ние и смот­рим на резуль­тат выпол­не­ния функ­ции отправки;
  • если пись­мо ушло по нуж­но­му адре­су — пишем, что всё хоро­шо, если нет — гово­рим, что что-то не так;
  • через 10 секунд после выво­да сооб­ще­ния авто­ма­ти­че­ски пере­хо­дим на сайт «Кода» 🙂

Мы спе­ци­аль­но дела­ем так, что­бы фор­ма отсы­ла­ла пись­ма на тот же адрес, кото­рый одно­вре­мен­но и адрес отпра­ви­те­ля. Это сде­ла­но для того, что­бы вы полу­ча­ли эти пись­ма, когда буде­те тести­ро­вать сер­вис. В рабо­чем про­ек­те заме­ни­те пере­мен­ную $email в функ­ции send() на свой насто­я­щий адрес, что­бы самим полу­чать пись­ма из формы. 
<!-- Через 10 секунд после появления сообщения об отправке или ошибке — отправляемся на сайт Кода :) -->
<meta http-equiv='refresh' content='10; url=http://thecode.local/'>
<meta charset="UTF-8" />
<!-- Начался блок PHP -->
<?php
// Получаем значения переменных из пришедших данных
$name = $_POST['name'];
$email = $_POST['email'];
$header = $_POST['header'];
$message = $_POST['message'];
// Формируем сообщение для отправки, в нём мы соберём всё, что ввели в форме
$mes = "Имя: $name \nE-mail: $email \nТема: $header \nТекст: $message";
// Пытаемся отправить письмо по заданному адресу
// Если нужно, чтобы письма всё время уходили на ваш адрес — замените первую переменную $email на свой адрес электронной почты
$send = mail($email, $header, $mes, "Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
// Если отправка прошла успешно — так и пишем
if ($send == 'true') {echo "Сообщение отправлено";}
// Если письмо не ушло — выводим сообщение об ошибке
else {echo "Ой, что-то пошло не так";}
?>

Отправляем PHP-скрипт на сервер

Послед­нее, что оста­лось сде­лать — загру­зить файл скрип­та на сер­вер. Для это­го сохра­ним его как post.php и загру­зим по адре­су mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет сво­е­го сер­ве­ра, може­те исполь­зо­вать этот скрипт для тести­ро­ва­ния фор­мы обрат­ной связи.

Как загру­жать фай­лы, мы рас­ска­зы­ва­ли в ста­тье про пуб­ли­ка­цию сай­та в Сети, поэто­му про­сто сде­ла­ем всё по той инструкции:

Теперь, когда мы обно­вим HTML-страницу, запол­ним все поля и нажмём «Отпра­вить», на ука­зан­ную почту при­дёт пись­мо с нашим сооб­ще­ни­ем. Это зна­чит, что фор­ма рабо­та­ет, а мы с вами сде­ла­ли оче­ред­ной полез­ный проект!

Что дальше

Даль­ше как обыч­но — улучшаем.

  1. Напри­мер, сей­час, если не запол­нить поле с темой или адре­сом, то будет ошиб­ка и пись­мо не уйдёт. При этом поль­зо­ва­тель не будет знать, что же имен­но он сде­лал не так. Мож­но орга­ни­зо­вать про­вер­ку на запол­не­ние полей и выво­дить нуж­ные сооб­ще­ния, если что-то не заполнено.
  2. Все­гда мож­но улуч­шить без­опас­ность и защи­тить скрипт от мно­го­крат­ных запро­сов — что­бы никто не абью­зил сер­вис и не делал из нас спамеров.
  3. А ещё при отправ­ке мы пере­хо­дим на стра­ни­цу обра­бот­чи­ка, а потом вооб­ще на дру­гой сайт. Что­бы сде­лать как у всех, что­бы фор­ма отправ­ля­лась без пере­за­груз­ки стра­ни­цы, мож­но исполь­зо­вать Ajax. Когда-нибудь добе­рём­ся и до него. Под­пи­сы­вай­тесь, что­бы не пропустить.