Создание базовой формы обратной связи на PHP, HTML и JS

0 17 февраля 2026

Форма обратной связи - базовый элемент любого сайта. Она позволяет пользователю отправить сообщение администратору или владельцу ресурса. Минимальная реализация включает три уровня: интерфейс (HTML), клиентскую логику (jаvascript) и серверную обработку (PHP). Ниже приведён полный рабочий пример.

1. Создание формы (HTML)

HTML отвечает за отображение формы и сбор данных.

Пример файла index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Обратная связь</title>
</head>
<body>

<h2>Форма обратной связи</h2>

<form id="contactForm" method="POST" action="send.php">
    <input type="text" name="name" placeholder="Имя" required>
    <br><br>

    <input type="email" name="email" placeholder="Email" required>
    <br><br>

    <textarea name="message" placeholder="Сообщение" required></textarea>
    <br><br>

    <button type="submit">Отправить</button>
</form>

<div id="result"></div>

<script src="script.js"></script>

</body>
</html>

Разбор:

method="POST" указывает способ передачи данных.
action="send.php" задаёт обработчик.
required выполняет базовую проверку в браузере.

HTML лишь собирает данные. Проверка на клиенте не является защитой.

2. Серверная обработка (PHP)

Сервер обязан проверить данные независимо от клиента.

Пример файла send.php:

<?php

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    exit('Метод не разрешён');
}

$name = trim($_POST['name'] ?? '');
$email = trim($_POST['email'] ?? '');
$message = trim($_POST['message'] ?? '');

if ($name === '' || $email === '' || $message === '') {
    http_response_code(400);
    exit('Заполните все поля');
}

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    http_response_code(400);
    exit('Некорректный email');
}

$name = htmlspecialchars($name, ENT_QUOTES, 'UTF-8');
$message = htmlspecialchars($message, ENT_QUOTES, 'UTF-8');

$to = "you@example.com";
$subject = "Сообщение с сайта";
$body = "Имя: $name\nEmail: $email\n\nСообщение:\n$message";

if (mail($to, $subject, $body)) {
    echo "Сообщение отправлено";
} else {
    http_response_code(500);
    echo "Ошибка отправки";
}

Разбор:

Проверяет метод запроса.
Очищает входные данные.
Валидирует email.
Формирует письмо.
Возвращает ответ клиенту.

Без серверной валидации форма уязвима.

3. Отправка без перезагрузки (jаvascript)

Чтобы страница не перезагружалась после отправки, используем fetch.

Пример файла script.js:

document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const formData = new FormData(this);

    fetch('send.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        document.getElementById('result').innerHTML = data;
        this.reset();
    })
    .catch(() => {
        document.getElementById('result').innerHTML = 'Ошибка соединения';
    });
});

Разбор:

e.preventDefault() отключает стандартную отправку.
FormData собирает данные формы.
fetch отправляет POST-запрос.
Ответ сервера выводится в блок result.

jаvascript отвечает за удобство, но не за безопасность.

Минимальная структура:

/project
│
├── index.html
├── script.js
└── send.php

Файлы размещаются в одной директории для упрощения примера.

Итог

HTML — интерфейс и сбор данных.
jаvascript — управление отправкой и обработкой ответа.
PHP — проверка, очистка и обработка данных.

Клиентская проверка повышает удобство. Серверная проверка обеспечивает безопасность. Базовая форма может быть реализована в трёх файлах без использования сторонних библиотек.