Эта статья описывает создание формы обратной связи с использованием Bootstrap 4, JavaScript, Ajax и PHP. Процесс разработки включает создание разметки, отправку данных на сервер и обработку на стороне PHP.
Необходимые инструменты
Для реализации проекта потребуются:
- Текстовый редактор (например, Atom).
- Локальный сервер (например, MAMP).
- Хостинг-провайдер (например, Timeweb).
Запустите локальный сервер перед началом работы. Файлы проекта следует хранить в папке htdocs. Создайте в ней папку feedback и файл index.html внутри неё.
HTML-разметка формы
Добавьте следующий код в index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Обратная связь</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>Обратная связь</h1>
<form id="mailForm">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Введите email">
</div>
<div class="form-group">
<label for="name">Имя</label>
<input type="text" class="form-control" id="name" placeholder="Введите имя">
</div>
<div class="form-group">
<label for="phone">Телефон</label>
<input type="tel" class="form-control" id="phone" placeholder="Введите телефон">
</div>
<div class="form-group">
<label for="message">Сообщение</label>
<textarea class="form-control" id="message" rows="5" placeholder="Введите сообщение"></textarea>
</div>
<button type="button" id="sendMail" class="btn btn-primary">Отправить</button>
</form>
<div id="errorMessage"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/formMail.js"></script>
</body>
</html>
Bootstrap 4 используется для стилизации. Класс container обеспечивает адаптивность. Каждый элемент ввода (input, textarea) оформлен с помощью класса form-control.
JavaScript-код для обработки формы и Ajax-запроса
Добавьте следующий код в formMail.js:
$(document).ready(function() {
$('#sendMail').click(function() {
let email = $.trim($('#email').val());
let name = $.trim($('#name').val());
let phone = $.trim($('#phone').val());
let message = $.trim($('#message').val());
let errorMessage = $('#errorMessage');
errorMessage.text('');
if (email === '') {
errorMessage.text('Введите email');
return;
}
if (name === '') {
errorMessage.text('Введите имя');
return;
}
if (phone === '') {
errorMessage.text('Введите телефон');
return;
}
if (message.length < 5) {
errorMessage.text('Сообщение не менее 5 символов');
return;
}
$.ajax({
url: 'ajax/mail.php',
type: 'POST',
data: { email: email, name: name, phone: phone, message: message },
dataType: 'html',
beforeSend: function() {
$('#sendMail').prop('disabled', true);
},
success: function(data) {
$('#sendMail').prop('disabled', false);
alert(data);
$('#mailForm').trigger('reset');
},
error: function() {
$('#sendMail').prop('disabled', false);
alert('Произошли ошибки. Сообщение не отправлено.');
}
});
});
});
Этот код обрабатывает клик по кнопке «Отправить», выполняет валидацию и отправляет данные на сервер с помощью Ajax. Функции beforeSend и success обеспечивают обратную связь.
Обработка данных на стороне сервера (PHP)
Добавьте следующий код в mail.php:
<?php
$emailTo = 'admin@itproger.com';
$subject = 'Сообщение с сайта';
$email = $_POST['email'];
$name = $_POST['name'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$headers = "From: " . $email . "r\n" .
"Reply-To: " . $email . "r\n" .
"Content-type: text/html; charset=utf-8";
$success = mail($emailTo, $subject, $message, $headers);
if (!$success) {
echo "Произошли ошибки. Сообщение не отправлено.";
} else {
echo "Сообщение отправлено!";
}
?>
Этот код принимает данные из Ajax-запроса, формирует заголовок письма и отправляет его с помощью функции mail(). Возвращает сообщение об успехе или ошибке.
Размещение на удаленном сервере
Инструкция по размещению на удаленном сервере (например, Timeweb) предполагает создание сервера, пополнение баланса, настройку DNS через панель управления и копирование файлов проекта на сервер с помощью FTP-клиента.
Данная статья описывает создание функциональной формы обратной связи с использованием Ajax для асинхронной отправки данных. Валидация на стороне клиента и обработка на стороне сервера обеспечивают надежность. Размещение на удаленном сервере гарантирует доступность формы.