Как создать форму обратной связи на сайте

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

Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.

1. Создание HTML-структуры

Для начала создадим основную структуру формы с помощью HTML-тегов. Воспользуемся тегом <form> и добавим внутрь необходимые поля для ввода информации.

<form id="feedbackForm">
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Сообщение:</label>
  <textarea id="message" name="message" required></textarea>

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

В примере выше создана форма с 3 полями: имя, email и сообщение. Также добавлен обязательный атрибут required, который указывает на то, что поле должно быть заполнено перед отправкой формы.

2. Стилизация формы с помощью CSS

Теперь добавим стили, чтобы форма выглядела привлекательнее. Создадим CSS-файл и применим стили к элементам формы.

form {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  margin: 0 auto;
}

label {
  font-weight: bold;
  margin-top: 10px;
}

input, textarea {
  padding: 5px;
  margin-top: 5px;
  border: 1px solid #ccc;
  resize: none;
}

button {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #007bff;
  border: none;
  color: #fff;
  cursor: pointer;
}

В результате, форма обратной связи стала более стильной и удобной для восприятия. 😊

Освойте Java на курсе онлайн-университета Skypro. Учебе нужно будет уделять всего 10 часов в неделю: сможете совмещать с работой и личными делами. Вас ждут 440 часов теории и практики, мастер-классы с реальными рабочими задачами, опытные преподаватели, кураторы и наставники. За время обучения сделаете два полноценных проекта для портфолио и множество домашних заданий, чтобы отработать навыки.

3. Добавление функциональности с помощью JavaScript

Чтобы форма обратной связи работала, необходимо добавить функциональность для обработки отправки данных. Создадим JavaScript-файл и добавим обработчик события отправки формы.

document.getElementById('feedbackForm').addEventListener('submit', function(event) {
  event.preventDefault();

  var name = document.getElementById('name').value;
  var email = document.getElementById('email').value;
  var message = document.getElementById('message').value;

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

  alert('Сообщение отправлено!');
  this.reset();
});

В примере выше добавлен обработчик события submit, который отменяет стандартное поведение отправки формы и получает значения полей. Вместо отправки данных на сервер пока выводится уведомление об успешной отправке.

Теперь вы знаете, как создать форму обратной связи на сайте! 🎉 Не забудьте настроить серверную часть для обработки данных формы и отправки их на электронную почту или другой сервис. Удачи в веб-разработке!