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

Почему формы обратной связи — это важно? 🤔

Форма обратной связи — это мостик между вами и пользователем. Без неё посетители просто уйдут с сайта, не оставив контактов, вопросов или отзывов.

Сегодня мы создадим функциональную форму, которая:

✅ Собирает данные
✅ Проверяет ввод
✅ Стильно выглядит

Готовы? Поехали! 💻

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

Начнём с базовой разметки. Вот каркас нашей формы:

<form action="/submit-form" method="POST" class="feedback-form">
  <h2>Свяжитесь с нами</h2>

  <div class="form-group">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name" required>
  </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" rows="5" required></textarea>
  </div>

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

Разберём ключевые элементы:

<form> — контейнер для всех полей
action — куда отправлять данные
method="POST" — безопасная передача данных
required — обязательное поле
<label> — подписи для полей (улучшают доступность)

Добавляем стилизацию 🎨

Без CSS форма выглядит скучно. Давайте оживим её!

.feedback-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.submit-btn {
  background: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn:hover {
  background: #45a049;
}

Что мы улучшили:

Адаптивная ширина формы
Приятные отступы и тени
Интерактивная кнопка (меняет цвет при наведении)
Чёткие подписи полей

Валидация данных на клиенте 🔍

Проверяем данные до отправки — это экономит время пользователя:

<form onsubmit="return validateForm()">
  <!-- Поля формы -->
</form>

<script>
function validateForm() {
  const email = document.getElementById('email').value;
  if (!email.includes('@')) {
    alert('Пожалуйста, введите корректный email!');
    return false;
  }
  return true;
}
</script>

Альтернативный способ — HTML5-валидация:

<input type="email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required>

Отправка данных на сервер (PHP-пример) 📡

Добавим обработчик для формы (файл submit-form.php):

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = htmlspecialchars($_POST['name']);
  $email = htmlspecialchars($_POST['email']);
  $message = htmlspecialchars($_POST['message']);

  // Здесь можно добавить отправку на почту
  // или сохранение в базу данных

  echo "Спасибо, $name! Ваше сообщение отправлено.";
}
?>

Продвинутые фишки для профи 💪

1. AJAX-отправка — страница не перезагружается:

document.querySelector('.feedback-form').addEventListener('submit', function(e) {
  e.preventDefault();
  fetch('/submit-form', {
    method: 'POST',
    body: new FormData(this)
  }).then(response => alert('Успешно отправлено!'));
});

2. Капча — защита от спама:

<div class="form-group">
  <div class="g-recaptcha" data-sitekey="ВАШ_КЛЮЧ"></div>
</div>
<script src="https://www.google.com/recaptcha/api.js"></script>

3. Модальное окно после отправки — улучшаем UX!

Главные ошибки новичков 🚨

❌ Нет проверки данных (открыт для спама)
❌ Слишком много полей (утомляет пользователя)
❌ Неадаптивный дизайн (ломается на телефонах)
❌ Нет подтверждения отправки (пользователь в неведении)

Избегайте этих ловушек — и ваша форма будет идеальной!

Для более глубокого погружения в HTML/CSS рекомендую канал Данилы Бежина: https://www.youtube.com/@DanilaBezhin. Там есть отличные разборы сложных тем!

Теперь ваша очередь — создайте форму и поделитесь результатом! 🔥