Код простой формы обратной связи для сайта на HTML и PHP

Форма обратной связи для сайта на HTML и PHP

Рассмотрим пример легкой и быстрой формы обратной связи для сайта написанной на html и php.

Почему используется HTML и PHP?

Для CRM, таких как WordPress, Joomla и других можно найти различные плагины для установки формы обратной связи для сайта. Однако, что мне не нравится в таких плагинах, так это часто их низкая производительность и замедление сайта из-за загрузки лишнего «мусора» - ненужных стилей и скриптов. Так как эти плагины все равно выдают в результате тот же код HTML, то предлагаю использовать простую, но полноценно функциональную форму, которую можно изменить под свои нужны, например, под обратный звонок с сайта.

Форма связи на HTML просто вставляется в админке Joomla, WordPress, OpenCart, ModX, а если ваш сайт самонаписный или вы используете любой фреймворк на PHP, то использовать представленный код не составит труда и сайт будет загружаться так же быстро как и раньше.

Структура кода реализации обратной связи для сайта

Далее приведен алгоритм работы обратной связи:

  1. Код HTML формы, вставленный на страницу + CSS стили для его оформления.
  2. PHP файл, который и выполняет отправку письма или иное действие для регистрации запроса.

В коде HTML содержится содержится информация, какие поля для ввода нужно заполнять, какие из них обязательны для заполнения, и подписи к ним. Стили CSS отвечает за визуальное оформление формы и отображение данных. При нажатии на кнопку «Отправить» выполняется PHP скрипт на сервере через POST запрос, который отправляет письмо или выполняет иное действие. Скачать исходники можно в конце статьи, а подробнее исходный код формы обратной связи разберем далее.

Код формы обратной связи на HTML

Вначале приведем исходный код простой формы обратной связи для сайта на HTML:

<form class="obratnuj-zvonok" autocomplete="off" action='email.php' method='post'>
<div class="form-zvonok"> 
  <div>
    <label>Имя <span>*</span></label>
    <input type='text' name='username' required></div>
  <div>
    <label>Номер телефона (с кодом) <span>*</span></label>
    <input type='text' name='usernumber' required></div>
  <div>
    <label>Сообщение</label>
    <input type='text' name='question'>
  </div>
  <input class="bot-send-mail" type='submit' value='Послать заявку'>
</div>
</form>

Сама форма находится между HTML тегами <form></form>. Тегу <form> присвоен CSS класс class="form-zvonok" , который используется для реализации отображения через CSS стили.

Рассмотрим атрибуты формы

  • autocomplete="off" — автозаполнение формы отключено, при повторном заходе на страницу все поля ввода будут обнулены. Рекомендуется автозаполнение отключать, так как при включенном иногда возникали проблемы, что при изменении значений полей формы отправлялись на сервер старые значения.
  • Атрибут action='email.php', в нём указан адрес скрипта, в данном случае PHP, который вызывается и которому передаются данные формы после нажатия кнопки «Отправить». Если указан не полный путь к скрипту, как здесь, то обращение будет с адреса, на котором размещена форма. Например форма находится по этому адресу http://site.com/feed-back, тогда обращение будет http://site.com/feed-back/email.php. Так же это может быть любой путь, по которому обрабатывается запрос.
  • Атрибут method='post', в этом случае данные отправляются скрытно и не отображаются в адресной строке, другой метод GET отправляет данные формы через адресную строку. В этом случае после адреса строки появляется вопросительный знак «?» после которого идут название поля, его значение, что является небезопасным способом отправлять данные формы. Так, учитывая SEO оптимизацию сайта, данные формы обратной связи для сайта лучше отправлять методом POST, так как данные передаются скрытно, а в случае метода GET у сайта по сути будет доступно множество однотипных страниц, которые отличаются только несколькими параметрами после «?», что приведет к дублям страниц.

Далее внутри тега <form> находится контейнер <div> с CSS классом class="form-zvonok", он отвечает за компоновку полей ввода и подписей к ним.

Внутри этого контейнера, находятся другие div содержащие теги подписей <label></label> и полей ввода <input>. А в самом конце размещено поле <input class="bot-send-mail" type='submit' value='Послать заявку'> — кнопка «Отправить», при нажатии на которую происходит отправка данных формы браузером

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

Отправка письма PHP скриптом

Приведем код простого скрипта для отправки письма


<?php
$to = "email@tut.by";//Почтовый ящик на который будет отправленно сообщение
  $subject = "Тема сообщения";//Тема сообщения
  $message = "Message, сообщение!";//Сообщение, письмо
  $headers = "Content-type: text/plain; charset=utf-8 \r\n";//Шапка сообщения,
  //содержит определение типа письма, от кого, и кому отправить ответ на письмо
  mail ($to, $subject, $message, $headers);
?>

Чтобы отправить письмо на нужный email, замените значение переменной $to email@tut.by на необходимый адрес. Переменная $subject — тема сообщения, показывается почтовыми программами при просмотре списков писем. $message — само тело письма, это и есть само сообщение. $headers — шапка письма, в ней указывается тип письма, например HTML, а также: кодировка, от кого доставлено письмо и на какой emal отправлять ответ.

Простой скрипт обработки данных формы HTML в PHP скрипте

Приведем сначала исходный код:

<?php
$to = "email@tut.by";//Почтовый ящик на который будет отправленно сообщение
  $subject = "Тема сообщения";//Тема сообщения
  $message = "Message, сообщение!";//Сообщение, письмо
  $headers = "Content-type: text/plain; charset=utf-8 \r\n";//Шапка сообщения, 
  //содержит определение типа письма, от кого, и кому отправить ответ на письмо
// Проверяем или метод запроса POST
if($_SERVER["REQUEST_METHOD"] == "POST"){
    // Поочередно проверяем или были переданные параметры формы, или они не пустые
    if(isset($_POST["username"]){
      //Если параметр есть, присваеваем ему переданое значение
      $name     =trim(strip_tags($_POST["username"]));
    }
    if(isset($_POST["usernumber"]))
    {
      $number   = trim(strip_tags($_POST["usernumber"]));
    }
    if (isset( $_POST["question"])) {
      $question   = trim(strip_tags($question));
    }
      // Формируем письмо
      $message  = "<html>";
        $message  .= "<body>";
        $message  .= "Телефон: ".$number;
        $message  .= "<br />";
        $message  .= "Имя: ".$name;
        $message  .= "<br />";
        $message  .= "Вопрос: ".$question;
        $message  .= "</body>";
      $message  .= "</html>";
      // Окончание формирования тела письма
      // Посылаем письмо
      mail ($to, $subject, $message, $headers);
}
else
{
  exit;
} 
?>

Разберем подробнее

$_SERVER["REQUEST_METHOD"] == "POST"

проверяем или используется метод POST

Далее проверяем или были высланы данные с полей ввода


if(isset($_POST["username"])
{
  //Если параметр есть, присваеваем ему переданое значение
  $name = trim(strip_tags($_POST["username"]));
}

Обратите внимание, что в конструкции $_POST["username"] название поля совпадает с именем поля username в форме <input type='text' name='username' required>. Поэтому на одной странице названия полей должны быть уникальны, иначе они будут переписывать друг друга.

Функция strip_tags() удаляет HTML и PHP теги из строки. Делается для котого что бы злоумышленники не могли запустить свой код через форму связи.

Функция trim() удаляет пробелы в начале и в конце строки. Далее формируем письмо и все что подготовили отправляем функцией mail().

Оформление формы обратного звонка для сайта CSS

Приведем код CSS оформления для формы обратной связи сайта.


.obratnuj-zvonok{
	width: 100%;
	max-width: 350px;
}
.form-zvonok{
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 20px;
	box-sizing: border-box;
}
.form-zvonok div{
	padding: 15px 0;
}
.bot-send-mail{
	box-sizing: border-box;
	width: 100%;
}
.form-zvonok label,.form-zvonok input{
	display: block;
	width: 100%;
	box-sizing: border-box;
}
.form-zvonok label{
	margin-bottom: 5px;
	font-weight: bold;
}
.form-zvonok input{
	padding: 10px 15px;
	margin-top: 10px;
}
.form-zvonok label span{
	color: red;
}
.form-zvonok .bot-send-mail{
	padding: 15px;
	margin-top: 10px;
	background: none;
	border: none;
	text-transform: uppercase;
	color: #fff;
	font-weight: bold;
	background-color: #009b97;
	cursor: pointer;
	border: 3px #009b97 solid;
	border-radius: 5px;
}
.form-zvonok .bot-send-mail:hover{
	color: #009b97;
	background-color: #fff;
}

Разберем подробнее код.

Делаем ширину дива равной ширине родительского блока и ограничиваем максимальную ширину 350px, если шире, то форма HTML выглядит растянутой:


.obratnuj-zvonok{
	width: 100%;
	max-width: 350px;
}

Что бы упорядочить поля и кнопку «Отправить», обертываем их в div, отображение ставим в flex и направление отображения столбцом column. Для красоты добавляем отступы сверху и снизу на 20px:


.form-zvonok{
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 20px;
	box-sizing: border-box;
}

Подпись и поле ввода обернуты в контейнер div:


<div><label>Имя <span>*</span></label>
<input type='text' name='username' required></div>

Для этого дива присвоим отступы сверху и снизу:

.form-zvonok div{
	padding: 15px 0;
}

Кнопке «Отправить» делаем ширину равной ширине родительского блока и box-sizing присваиваем border-box — расчет ширины по границе, что бы она не выходила за пределы родительского блока:

.bot-send-mail{
	box-sizing: border-box;
	width: 100%;
}

Аналогично для подписей и полей ввода:

.form-zvonok label,.form-zvonok input{
        display: block;
        width: 100%;
        box-sizing: border-box;
}

Настраиваем красивый внешний вид подписей и полей ввода:

.form-zvonok label{
        margin-bottom: 5px;
        font-weight: bold;
}
.form-zvonok input{
        padding: 10px 15px;
        margin-top: 10px;
}

Звездочку делаем красной:

.form-zvonok label span{
        color: red;
}

Оформляем кнопку «Отправить»:

.form-zvonok .bot-send-mail{
        padding: 15px;
        margin-top: 10px;
        background: none;
        border: none;
        text-transform: uppercase;
        color: #fff;
        font-weight: bold;
        background-color: #009b97;
        cursor: pointer;
        border: 3px #009b97 solid;
        border-radius: 5px;
}

При наведении на кнопку настраиваем изменение цвета:

.form-zvonok .bot-send-mail:hover{
        color: #009b97;
        background-color: #fff;
}

Обратите внимание, что иногда эти стили могут быть переопределены другими, которые имеют больший приоритет. Что бы усилить приоритет, просто присвойте форме имя через id, например id="obratnuj-zvonok" и в CSS файлах тогда обращение идет не через точку, как к классам, а через решетку #, например #obratnuj-zvonok. Тогда достаточно добавить к селекторам в CSS файлах в начало #obratnuj-zvonok, что бы повысить приоритет правил.

Скачать исходный код формы обратной связи

Для обучения вы можете скачать здесь исходные файлы примеров приведенные выше. Этот пример скорее для изучения и понимания как работает форма обратной связи на HTML в связке с PHP, а полноценный, рабочий пример будет выложен позже в другой статье.