Форма обратной связи (PHP, Ajax, jQuery): пошаговое руководство

Урок посвящен созданию формы обратной связи на сайте с использованием PHP, Ajax и jQuery. Форма будет отправлять письма администратору сайта.

Создание файла и ссылки

Создадим файл kontakty.php для формы обратной связи. Добавим ссылку на этот файл в шапке (header.php) и подвале (footer.php) сайта, заменив существующие нерабочие ссылки. Добавим правило перенаправления в .htaccess: запрос к /kontakty перенаправляется на kontakty.php.

Базовая структура формы

Скопируем содержимое существующего PHP-файла в kontakty.php, удалив ненужные элементы. Заголовок страницы изменим на «Обратная связь». Описание и ключевые слова (description и keywords) заменим позже.

Используем два div блока по 50% ширины каждый. В первом разместим поля для имени и email, во втором — поле для сообщения и кнопку отправки. HTML-код:

<div class="block">
  <div style="width: 50%;">
    <input type="text" id="name" placeholder="Введите ваше имя">
    <input type="email" id="email" placeholder="Введите ваш email">
  </div>
  <div style="width: 50%;">
    <textarea id="message" placeholder="Введите ваше сообщение"></textarea>
    <input type="submit" id="send" class="button" value="Отправить">
  </div>
</div>

Стилизация формы

Добавим правило float: left; к блоку формы в main.css для корректного отображения кнопки. Уберем стандартную обводку полей фокуса, добавив outline: none; в main.css.

Создадим form.css:

.form-block {
  float: left;
  width: 76%;
  padding: 10px;
}

.form-block input[type="text"],
.form-block input[type="email"],
.form-block textarea {
  width: 100%;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 10px 5%;
  margin-bottom: 10px;
  background-color: white;
}

.form-block input[type="text"]:focus,
.form-block input[type="email"]:focus,
.form-block textarea:focus {
  border-color: #adadad;
}

.form-block textarea {
  resize: vertical;
  min-height: 70px;
  max-height: 200px;
}

.form-block input[type="submit"] {
  border: none;
  border-bottom: 1px solid #007bff;
  cursor: pointer;
  background-color: #007bff;
  /* ... другие стили кнопки ... */
}

Функциональность (Ajax и jQuery)

Добавим JavaScript-скрипт (ссылка будет в описании), обрабатывающий отправку формы с помощью Ajax и jQuery. Скрипт подключается после jQuery. Он обрабатывает отправку данных, проверяет заполнение полей, выводит сообщения об успешной отправке или ошибках, и блокирует кнопку отправки во время обработки запроса.

Обработчик PHP (ajax.php/kontakty.php)

Создадим ajax/kontakty.php для обработки данных. Скрипт проверяет заполнение всех полей, валидирует email, формирует и отправляет письмо с помощью mail(). Обработка ошибок включает проверку на пустые поля и некорректный email. При успешной отправке возвращает true, иначе — сообщение об ошибке.

<?php
// ... код обработчика ...
?>

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

Создана функциональная и стильная форма обратной связи, используя HTML, CSS, JavaScript (jQuery и Ajax), и PHP. Обработка на сервере позволяет отправлять сообщения администратору сайта, а клиентская часть обеспечивает удобство использования и обратную связь пользователю.