Как добавить заказ обратного звонка себе на сайт
easy

Как добавить заказ обратного звонка себе на сайт

Позвони мне, позвони

Мы уже делали форму обратной связи с помощью 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>

Разберём, что мы сделали:

  1. Создали форму с помощью тега <form>.  
  2. Задали форме атрибут action, в котором указали адрес, куда введённые данные будут отправляться для обработки. В нашем случае это скрипт send_email.php. Его пока у нас нет, но мы сразу пропишем в форме нужное имя файла.
  3. Задали форме атрибут method, который определяет, как данные будут отправлены. Мы используем метод post, который скрывает данные в заголовках HTTP-запроса: они не отображаются напрямую в адресной строке браузера.
  4. Создали поля для ввода с помощью тега <input>.
  5. Задали первому полю атрибут type, чтобы указать, что оно будет для текста.
  6. Присвоили первому полю идентификатор name и имя name. Идентификатор мы привяжем к скрипту, а имя поля будет использоваться для отправки данных.
  7. Задали второму полю атрибут input type="tel", чтобы указать, что оно будет для номера телефона.
  8. Присвоили второму полю идентификатор phone и имя phone — их мы также привяжем к скрипту и используем для отправки.
  9. Указали в атрибутах placeholder текст «Ваше имя» и «Ваш телефон», которые будут отображаться внутри полей, пока пользователь не начнёт вводить данные.
  10. Задали обоим полям атрибут 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 "Что-то пошло не так. Попробуйте ещё раз.";
   }
}
?>

Текст:

Кристина Тульцева

Редактор:

Инна Долога

Обложка:

Алексей Сухов

Корректор:

Ирина Михеева

Вёрстка:

Мария Дронова

Соцсети:

Юлия Зубарева

Вы фронтендер? Гляньте сюда ↓
У нас есть курсы по прокачке навыков до уровня middle и далее. Начать можно бесплатно. Посмотрите, интересно ли вам это.
Начать бесплатно
Вы фронтендер? Гляньте сюда ↓ Вы фронтендер? Гляньте сюда ↓ Вы фронтендер? Гляньте сюда ↓ Вы фронтендер? Гляньте сюда ↓
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
easy