Мы уже делали форму обратной связи с помощью PHP-скрипта. Эта форма собирала данные пользователя — имя, почту, сообщение — и отправляла их администратору сайта. Сегодня сделаем форму заказа обратного звонка — с нуля, включая создание страницы и настройку скрипта для отправки данных. Форма будет простая:
Что делаем
Задача формы обратного звонка — отправить данные на сервер, чтобы система показала менеджеру уведомление о том, что клиенту нужно позвонить. Для полноценной настройки этого её нужно прикручивать к настоящей CRM, но мы пока сделаем проще:
- пользователь заполняет поля имени и телефона;
- нажимает кнопку «Отправить» и видит сообщение об успешной отправке;
- администратор сайта получает письмо с данными, которые указал пользователь.
Самое важное поле в нашей форме — это номер телефона. Мы добавим в скрипт несложную валидацию номера: если пользователь введёт что-то отличное от цифр, то страница попросит ввести корректный номер в числовом формате.
Для всего этого нам понадобятся:
- HTML-страница с формой;
- стили для страницы;
- скрипт на PHP;
Ещё нам понадобится хостинг, который поддерживает работу PHP, чтобы скрипт мог выполняться на сервере. С этим умеют работать не все хостинги — иногда они просто позволяют хранить файлы, а запускать скрипты не умеют. Поэтому перед запуском проверьте, что ваш хостинг поддерживает PHP-скрипты и корректно их запускает.
Делаем страницу с формой
Создадим HTML-страницу с базовой разметкой:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Заказ обратного звонка</title>
</head>
<body>
<h1>Заказ обратного звонка</h1>
<!-- В эту часть мы добавим форму -->
</body>
</html>У нас получилась такая страница с заголовком:
Теперь добавим код самой формы:
<form action="send_email.php" method="post">
<input type="text" id="name" name="name" placeholder="Ваше имя" required><br>
<input type="tel" id="phone" name="phone" placeholder="Ваш телефон" required><br>
<input type="submit" value="Отправить" />
</form>Разберём, что мы сделали:
- Создали форму с помощью тега
<form>. - Задали форме атрибут
action, в котором указали адрес, куда введённые данные будут отправляться для обработки. В нашем случае это скрипт send_email.php. Его пока у нас нет, но мы сразу пропишем в форме нужное имя файла. - Задали форме атрибут
method, который определяет, как данные будут отправлены. Мы используем методpost, который скрывает данные в заголовках HTTP-запроса: они не отображаются напрямую в адресной строке браузера. - Создали поля для ввода с помощью тега
<input>. - Задали первому полю атрибут
type, чтобы указать, что оно будет для текста. - Присвоили первому полю идентификатор
nameи имяname. Идентификатор мы привяжем к скрипту, а имя поля будет использоваться для отправки данных. - Задали второму полю атрибут
input type="tel", чтобы указать, что оно будет для номера телефона. - Присвоили второму полю идентификатор
phoneи имяphone— их мы также привяжем к скрипту и используем для отправки. - Указали в атрибутах
placeholderтекст «Ваше имя» и «Ваш телефон», которые будут отображаться внутри полей, пока пользователь не начнёт вводить данные. - Задали обоим полям атрибут
required, чтобы указать, что они обязательны для заполнения.
После этого на странице появилась форма — простая и пока без дизайна:
Настраиваем стили
Чтобы форма выглядела аккуратнее, настроим стили. Для этого создадим файл со стилями css-form.css, который потом подключим к странице. Всё, что нам сейчас нужно, — это настроить шрифты, отступы и внешний вид полей ввода:
/*Задаём общие параметры для всей страницы: шрифт и отступы*/
body {
/*text-align: center;*/
margin: 10;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
}
/* Настраиваем внешний вид полей ввода*/
input {
display: inline-block;
margin: 10px auto;
border: 2px solid #eee;
padding: 10px 20px;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
}Собираем всё вместе: сохраняем файл, подключаем стили к странице и видим результат:
Пишем скрипт на PHP
Логика работы нашего скрипта будет такой:
- Берём значения переменных из данных, полученных обработчиком формы.
- Если пользователь ввёл в поле «Телефон» нечисловые символы, выводим сообщение «Номер телефона должен содержать только цифры».
- После получения всех данных формируем сообщение для администратора.
- Пытаемся отправить письмо на заданный адрес.
- Если письмо успешно отправлено, выводим сообщение «Спасибо, мы вам перезвоним!» и завершаем выполнение скрипта.
- Если при отправке письма произошла ошибка, выводим сообщение «Что-то пошло не так. Попробуйте ещё раз».
Создаём файл send_email.php и открываем скрипт:
<?php
Проверяем метод запроса на странице и извлекаем данные из полей name и phone:
if($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$phone = $_POST['phone'];Затем смотрим, в поле phone находятся только цифры или там есть что-то ещё. Если там не только цифры — выводим сообщение об ошибке:
if (!ctype_digit($phone)) {
// Если введены не цифры, выводим сообщение об ошибке
echo "Номер телефона должен содержать только цифры";
exit;Можно применить более сложную логику, например задать формат ввода +7 9хх ххх хх хх. Для этого используют регулярные выражения, но это уже следующий шаг. Сейчас достаточно убедиться, что пользователь ввёл в поле только цифры.
Создадим переменные, которые потом используем для отправки сообщения администратору сайта. Не забудьте заменить «вашу_почту» на реальный адрес электронной почты:
$to = 'ваша_почта';
$subject = 'Новый заказ обратного звонка';
$message = "Имя: $name\nТелефон: $phone";Переменная $subject отвечает за тему письма, а $message — за содержимое сообщения.
Теперь добавим код для отправки письма и вывода сообщений статуса и закроем скрипт:
if (mail($to, $subject, $message)) {
// Если письмо успешно отправлено, выводим сообщение
echo "Спасибо, мы вам перезвоним!";
exit; // Завершаем выполнение скрипта после вывода сообщения
} else {
// Если произошла ошибка при отправке письма, выводим соответствующее сообщение
echo "Что-то пошло не так. Попробуйте ещё раз.";
}
}
?>Загружаем файлы на сервер
Чтобы форма заработала, нужен сервер, который умеет выполнять PHP-скрипты. Если такого у вас нет, можно поставить себе MAMP и запустить всё там.
Загружаем на сервер все три файла — страницу, стили и скрипт. После этого заходим на страницу и заполняем форму:
Нажимаем на кнопку «Отправить» и видим сообщение:
Для проверки зайдём в указанную в скрипте почту и посмотрим, пришло ли письмо:
Если при отправке формы вы видите, что открывается страница send_email.php, значит, сервер не умеет запускать PHP-скрипты. В этом случае браузер не знает, как выполнить PHP-файл, поэтому просто пытается загрузить файл send_email.php.
Что дальше
Мы сделали самую простую базовую форму. Дальше её можно бесконечно улучшать:
- Добавить более сложную валидацию телефонного номера.
- Защитить скрипт от многократных запросов.
- Добавить капчу.
- Сделать какой-нибудь редирект после отправки формы.
А самое главное — этот PHP-скрипт легко настроить так, чтобы он отправлял данные в настоящую систему обработки заказов. Поделитесь в комментариях, делали ли вы такое или просто отправляли полученные заявки на почту, как сделали мы.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Заказ обратного звонка</title>
</head>
<link rel="stylesheet" href="./css-form.css">
<body>
<h1>Заказ обратного звонка</h1>
<form action="send_email.php" method="post">
<input type="text" id="name" name="name" placeholder="Ваше имя" required><br>
<input type="tel" id="phone" name="phone" placeholder="Ваш телефон" required><br>
<input type="submit" value="Отправить" />
</form>
</body>
</html>/*Задаём общие параметры для всей страницы: шрифт и отступы*/
body {
/*text-align: center;*/
margin: 10;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
}
/* Настраиваем внешний вид полей ввода*/
input {
display: inline-block;
margin: 10px auto;
border: 2px solid #eee;
padding: 10px 20px;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
}<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$phone = $_POST['phone'];
if (!ctype_digit($phone)) {
echo "Номер телефона должен содержать только цифры.";
exit;
exit;
}
$to = 'ваша_почта';
$subject = 'Новый заказ обратного звонка';
$message = "Имя: $name\nТелефон: $phone";
if (mail($to, $subject, $message)) {
echo "Спасибо, мы вам перезвоним!";
exit;
} else {
echo "Что-то пошло не так. Попробуйте ещё раз.";
}
}
?>
