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

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

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

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

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

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

Сервер для PHP

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

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

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


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

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

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

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

    
language: HTML
<!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:

    
language: CSS
/*Задаём общие параметры для всей страницы: шрифт и отступы*/

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. Сра­зу про­пи­шем путь к скрип­ту на сер­ве­ре — по это­му адре­су мы зальём нуж­ный файл на сле­ду­ю­щем эта­пе. Этот скрипт, кото­рый мы поз­же напи­шем, и есть обра­бот­чик фор­мы.

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

    
language: HTML
<!-- Создаём форму и указываем её обработчик и метод -->

<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() на свой насто­я­щий адрес, что­бы самим полу­чать пись­ма из фор­мы.
    
language: PHP
<!-- Через 10 секунд после появления сообщения об отправке или ошибке — отправляемся на сайт Кода :) -->

<meta http-equiv='refresh' content='10; url=https://thecode.media/'>

<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. Когда-нибудь добе­рём­ся и до него. Под­пи­сы­вай­тесь, что­бы не про­пу­стить.