Создание формы обратной связи на сайте – важный элемент для взаимодействия с посетителями и получения отзывов. В этой статье мы рассмотрим процесс создания такой формы с использованием 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, который отменяет стандартное поведение отправки формы и получает значения полей. Вместо отправки данных на сервер пока выводится уведомление об успешной отправке.
Теперь вы знаете, как создать форму обратной связи на сайте! 🎉 Не забудьте настроить серверную часть для обработки данных формы и отправки их на электронную почту или другой сервис. Удачи в веб-разработке!
Добавить комментарий