Категории
Форма обратной связи для сайта на php
26.07.2025 15:31 | коды из категории: Создание сайтовПример кода формы обратной связи на сайт. Формат обратной связи на сайте (или контактная форма) - это элемент веб-страницы, предназначенный для сбора данных от пользователей и отправки их на сервер для обработки. Он обычно выглядит как форма с полями для ввода информации (например, имя, email, сообщение) и кнопкой отправки. Этот формат обеспечивает удобный способ общения пользователей с администрацией сайта или получения от них информации.
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Форма обратной связи</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.feedback-form {
background: #f9f9f9;
padding: 25px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
textarea {
height: 150px;
resize: vertical;
}
.captcha-container {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.captcha-image {
background: #f0f0f0;
padding: 5px 10px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 18px;
letter-spacing: 3px;
user-select: none;
}
.honeypot {
position: absolute;
left: -9999px;
}
.submit-btn {
background: #3498db;
color: white;
border: none;
padding: 12px 20px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
width: 100%;
transition: background 0.3s;
}
.submit-btn:hover {
background: #2980b9;
}
.status-message {
margin-top: 20px;
padding: 10px;
border-radius: 4px;
display: none;
}
.success {
background: #d4edda;
color: #155724;
display: block;
}
.error {
background: #f8d7da;
color: #721c24;
display: block;
}
</style>
</head>
<body>
<article class="feedback-section">
<h1>Форма обратной связи</h1>
<div class="feedback-form" id="feedbackForm">
<form id="contactForm" action="process_feedback.php" method="POST">
<!-- Honeypot поле для защиты от ботов -->
<input type="text" name="fullname" class="honeypot" tabindex="-1" autocomplete="off">
<div class="form-group">
<label for="name">Ваше имя*</label>
<input type="text" id="name" name="name" required minlength="2">
</div>
<div class="form-group">
<label for="email">Email*</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Сообщение*</label>
<textarea id="message" name="message" required></textarea>
</div>
<!-- Капча -->
<div class="form-group">
<label>Подтвердите, что вы не робот*</label>
<div class="captcha-container">
<div class="captcha-image" id="captchaText">7G4H9</div>
<button type="button" id="refreshCaptcha" aria-label="Обновить капчу">↻</button>
</div>
<input type="text" id="captcha" name="captcha" placeholder="Введите текст с картинки" required>
<input type="hidden" id="captchaHash" name="captchaHash" value="">
</div>
<div class="form-group">
<button type="submit" class="submit-btn">Отправить сообщение</button>
</div>
</form>
<div id="statusMessage" class="status-message"></div>
</div>
</article>
<script>
// Генерация капчи
function generateCaptcha() {
const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let captcha = "";
for(let i = 0; i < 5; i++) {
captcha += chars.charAt(Math.floor(Math.random() * chars.length));
}
// Хешируем капчу для проверки на сервере
const captchaHash = CryptoJS.MD5(captcha + "your_secret_salt").toString();
document.getElementById('captchaText').textContent = captcha;
document.getElementById('captchaHash').value = captchaHash;
document.getElementById('captcha').value = "";
}
// Обновление капчи
document.getElementById('refreshCaptcha').addEventListener('click', generateCaptcha);
// Обработка формы
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
const statusElement = document.getElementById('statusMessage');
statusElement.style.display = 'none';
// Проверка honeypot поля
if(document.querySelector('.honeypot').value !== '') {
statusElement.textContent = "Обнаружена подозрительная активность";
statusElement.className = "status-message error";
statusElement.style.display = 'block';
return;
}
// Отправка формы через AJAX
const formData = new FormData(this);
fetch(this.action, {
method: 'POST',
body: formData,
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
if(data.success) {
statusElement.textContent = "Сообщение успешно отправлено!";
statusElement.className = "status-message success";
this.reset();
generateCaptcha();
} else {
statusElement.textContent = data.message || "Произошла ошибка при отправке";
statusElement.className = "status-message error";
}
statusElement.style.display = 'block';
})
.catch(error => {
statusElement.textContent = "Ошибка сети. Попробуйте позже.";
statusElement.className = "status-message error";
statusElement.style.display = 'block';
});
});
// Инициализация капчи при загрузке
generateCaptcha();
</script>
<!-- Подключаем CryptoJS для хеширования капчи -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</body>
</html>PHP
<?php
header('Content-Type: application/json');
// Проверка honeypot поля
if (!empty($_POST['fullname'])) {
die(json_encode(['success' => false, 'message' => 'Bot detected']));
}
// Проверка капчи
$captcha = strtoupper(trim($_POST['captcha']));
$captchaHash = $_POST['captchaHash'];
$expectedHash = md5($captcha . 'your_secret_salt');
if ($captchaHash !== $expectedHash) {
die(json_encode(['success' => false, 'message' => 'Неверная капча']));
}
// Валидация данных
$name = trim($_POST['name']);
$email = filter_var(trim($_POST['email']), FILTER_VALIDATE_EMAIL);
$message = trim($_POST['message']);
if (empty($name) || empty($email) || empty($message)) {
die(json_encode(['success' => false, 'message' => 'Заполните все обязательные поля']));
}
if (strlen($name) < 2) {
die(json_encode(['success' => false, 'message' => 'Имя слишком короткое']));
}
if (strlen($message) < 10) {
die(json_encode(['success' => false, 'message' => 'Сообщение слишком короткое']));
}
// Защита от XSS
$name = htmlspecialchars($name);
$message = htmlspecialchars($message);
// Отправка email (пример)
$to = 'your@email.com';
$subject = 'Новое сообщение с сайта';
$headers = "From: $email\r\n";
$headers .= "Content-Type: text/plain; charset=utf-8\r\n";
$emailBody = "Имя: $name\nEmail: $email\n\nСообщение:\n$message";
if (mail($to, $subject, $emailBody, $headers)) {
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false, 'message' => 'Ошибка при отправке письма']);
}
Особенности этой формы:
Honeypot поле - ловушка для ботов
Капча - с автоматической генерацией и проверкой
AJAX отправка - без перезагрузки страницы
Валидация на стороне клиента и сервера
Защита от XSS - экранирование специальных символов
Адаптивный дизайн - работает на всех устройствах
Как установить:
Создайте файл process_feedback.php с приведенным выше кодом
Замените your@email.com на свой реальный email
Измените your_secret_salt на свою уникальную строку
Вставьте HTML-код формы в нужное место вашего блога
Форма готова к использованию и обеспечивает хороший уровень защиты от спама!
Комментарии
Пока нет комментариев. Будьте первым!