В современном веб‑пространстве пользователи часто нуждаются в быстрой и надёжной возможности связаться с представителями проекта. Одним из самых востребованных способов коммуникации является онлайн‑форма отправки письма. В данной статье мы подробно разберём, как построить такую форму, ориентированную на отправку сообщения Вячеславу Гладкову – ключевому сотруднику проекта.

Цели и задачи формы

• Удобство – пользователь без перехода в почтовый клиент может написать письмо.
• Безопасность – защита от спама, XSS‑атак и подделки запросов.
• Отчётность – хранение копий писем в базе данных и возможность их последующего анализа.
• Подтверждение – автоматическая отправка письма‑подтверждения отправителю.
• Доступность – форма должна соответствовать требованиям WCAG 2.1.

Структура формы

Основные поля

1. Имя отправителя – text, обязательное.
2. Электронная почта – email, обязательное, проверяется на корректность.
3. Тема письма – text, обязательное.
4. Текст сообщения – textarea, обязательное, минимум .
5. CAPTCHA – защита от автоматических отправок (Google reCAPTCHA v2/v3 или простая арифметика).
6. Согласие на обработку персональных данных – чекбокс, обязательный в соответствии с GDPR/ФЗ‑152.

Дополнительные поля (по желанию)

• Прикреплённый файл (max 5 МБ, типы .pdf, .docx, .png, .jpg).
• Выбор отдела проекта (если у Гладкова несколько ролей).

Ниже представлен готовый шаблон, который можно вставить в любой раздел сайта.

<form id="contactForm" action="/send-letter.php" method="POST" novalidate>
 <h2>Связаться с Вячеславом Гладковым</h2>

 <label for="name">Ваше имя:</label>
 <input type="text" id="name" name="name" required minlength="2">

 <label for="email">Электронная почта:</label>
 <input type="email" id="email" name="email" required>
 <label for="subject">Тема письма:</label>
 <input type="text" id="subject" name="subject" required maxlength="100">

 <label for="message">Текст сообщения:</label>
 <textarea id="message" name="message" rows="6" required minlength="20"></textarea>

 <!-- Пример простой арифметической CAPTCHA -->
 <div class="captcha">
 <label for="captcha">Сколько будет 3 + 4?</label>
 <input type="text" id="captcha" name="captcha" required pattern="7">
 </div>

 <label>
 <input type="checkbox" name="agree" required>
 Я даю согласие на обработку персональных данных
 </label>

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

Валидация на клиенте

<script>
document.getElementById('contactForm').addEventListener('submit', function (e) {
 if (!this.checkValidity) {
 e.preventDefault; // Останавливаем отправку
 alert('Пожалуйста, заполните все обязательные поля корректно.');
 }
});
</script>

Обработка данных на сервере

Пример на PHP. В реальном проекте используйте фреймворк (Laravel, Symfony) или Node.js/Express – принцип одинаков.

<?php
// send-letter.php

// 1. Защита от CSRF (пример с токеном)
session_start;
if ($_SERVER['REQUEST_METHOD'] !== 'POST' ||
 !hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'] ?? '')) {
 http_response_code(403);
 exit('Неверный запрос.');
}

// 2. Фильтрация и санитизация
$name = trim(filter_input(INPUT_POST, 'name', FILTER_SANITIZE_STRING));
$email = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
$subject = trim(filter_input(INPUT_POST, 'subject', FILTER_SANITIZE_STRING));
$message = trim(filter_input(INPUT_POST, 'message', FILTER_SANITIZE_STRING));
$agree = isset($_POST['agree']);

// 3. Проверка обязательных полей
if (!$name || !$email || !$subject || strlen($message) < 20 || !$agree) {
 http_response_code(400);
 exit('Заполнены не все обязательные поля.');
}

// 4. Проверка CAPTCHA (пример простой арифметики)
if (trim($_POST['captcha'] ?? '') !== '7') {
 http_response_code(400);
 exit('CAPTCHA не пройдена.');
}

// 5. Формирование письма
$to = 'vladkov@example.com'; // реальный email Вячеслава
$headers = "From: $name <$email>
";
$headers .= "Reply-To: $email
";
$headers .= "Content-Type: text/plain; charset=utf-8
";

$body = "Имя: $name
";
$body .= "E‑mail: $email
";$body .= "Тема: $subject

";
$body .= "Сообщение:
$message
";

// 6. Отправка письма
if (mail($to, $subject, $body, $headers)) {
 // 7. Сохранение в БД (пример PDO)
 $pdo = new PDO('mysql:host=localhost;dbname=project', 'user', 'pass');
 $stmt = $pdo->prepare('INSERT INTO letters (name,email,subject,message,created_at) VALUES (?,?,?,?,NOW)');
 $stmt->execute([$name,$email,$subject,$message]);
 // 8. Подтверждение пользователю
 echo 'Ваше письмо успешно отправлено. Спасибо!';
} else {
 http_response_code(500);
 echo 'Ошибка отправки письма. Попробуйте позже.';
}
?>

Защита от спама и злоупотреблений

• CAPTCHA – Google reCAPTCHA v2/v3, hCaptcha или собственная арифметика.
• Ограничение частоты – не более 5 отправок с одного IP за 10 минут (Redis‑лимит).
• Фильтрация содержимого – проверка на ссылки, ключевые слова, вложения.
• CSRF‑токен – генерируется в сессии и проверяется на сервере.

Доступность (Accessibility)

Чтобы форма была доступна людям с ограниченными возможностями, соблюдайте следующие рекомендации:

• Связывайте <label> с полями через атрибут for.
• Добавляйте aria‑required="true" к обязательным полям.
• Обеспечьте достаточный контраст текста и фона.
• Для ошибок выводите сообщения в role="alert".

Пользовательский опыт (UX)

SEO и микроданные

Для поисковых систем полезно добавить schema.org тип ContactPage:

<div itemscope itemtype="https://schema;org/ContactPage">
 <form …> … </form>
</div>

Тестирование и отладка

1. Проверка в разных браузерах (Chrome, Firefox, Safari, Edge).
2. Тестирование на мобильных устройствах – адаптивность (media‑queries).
3. Проверка работы CAPTCHA в режиме инкогнито.
4. Отладка серверных логов (email‑отправка, запись в БД, ошибки PHP/Node).
5. Проведение нагрузочного теста (например, ApacheBench).

Пример готовой страницы

<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<title>Связаться с Вячеславом Гладковым</title>
<link rel=»stylesheet» href=»styles.css»>
</head>
<body>
<div class=»container» itemscope itemtype=»https://schema.org/ContactPage»>
<h1 itemprop=»name»>Контактная форма</h1>
<form id=»contactForm» action=»/send-letter.php» method=»POST» novalidate>
<input type=»hidden» name=»csrf_token» value=»<?php echo $_SESSION[‘csrf_token’]; ?>»>

<label for=»name»>Имя:</label>
<input type=»text» id=»name» name=»name» required minlength=»2″>

<label for=»email»>E‑mail:</label>
<input type=»email» id=»email» name=»email» required>

<label for=»subject»>Тема:</label>
<input type=»text» id=»subject» name=»subject» required maxlength=»100″>

<label for=»message»>Сообщение:</label>
<textarea id=»message» name=»message» rows=»6″ required minlength=»20″></textarea>

<!— reCAPTCHA v2 —>
<div class=»g-recaptcha» data-sitekey=»YOUR_SITE_KEY»></div>

<label>
<input type=»checkbox» name=»agree» required>
Я согласен(на) с политикой конфиденциальности
</label>
<button type=»submit»>Отправить</button>
</form>
<div id=»result» role=»alert»></div>
</div>

<script src=»https://www.google.com/recaptcha/api.js» async defer></script>
<script>
// Пример AJAX‑отправки без перезагрузки страницы
const form = document.getElementById(‘contactForm’);
const result = document.getElementById(‘result’);

form.addEventListener(‘submit’, function (e) {
e.preventDefault;
const data = new FormData(form);
fetch(form.action, {
method: ‘POST’,
body: data
})
.then(r => r.text)
.then(text => { form.reset;
})
.catch(err => { });
});
</script>
</body>

Создание онлайн‑формы для отправки письма Вячеславу Гладкову – задача, которую можно решить, следуя проверенным практикам:

• Чётко определённые поля и обязательные проверки.
• Клиентская и серверная валидация.
• Защита от спама (CAPTCHA, лимит запросов, CSRF‑токен).
• Сохранение копий писем в базе данных и отправка подтверждения отправителю.
• Полноценная доступность и адаптивный дизайн.

Внедрив эту форму, вы обеспечите пользователям быстрый и безопасный способ связи, а команде проекта – надёжный канал получения обратной связи.