Обратный звонок

Автор: | 22 октября, 2023

В этой записи мы рассмотрим, как сделать простейшую форму для заказа обратного звонка.

Что такое обратный звонок? Это широко распространённый способ стимулирования клиента к установлению контакта. Человек на сайте видит кнопку «заказать звонок», а нажав на неё — открывается окошко, в котором он может оставить свой телефон и имя, и ожидать звонка.

Кнопка выглядит примерно так:

А форма — так:

Код для её реализации очень простой.

Будет два файла. Первый — содержит форму заказа обратного звонка.

Второй — отправляет полученные данные на вашу почту.

Просто скопируйте код первого файла в отдельный текстовый файл и сохраните его как call.html, а код второго — также в отдельный текстовый файл — и его нужно будет сохранять как call.php.

Итак. Код первого:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заказ обратного звонка</title>
</head>
<body>
Заказать бесплатный звонок. Мы вам перезвоним и отдадим скидку. 
<form action="call.php" method="post">
Как вас зовут?
  <input type="text" name="name" />
Ваш номер телефона
<input type="text" name="phone" />
<input type="submit" value="Отправить данные для звонка!">
</form>
</body>
</html>

Этот текст нужно сохранить в файл call.html.

Второй файл должен называться call.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Обработка заявки на звонок</title>
</head>
<body>
<?php
/*Создаём функцию для отправки письма*/
function send_email($name_from, // имя отправителя
                        $email_from, // email отправителя
                        $name_to, // имя получателя
                        $email_to, // email получателя
                        $data_charset, // кодировка переданных данных
                        $send_charset, // кодировка письма
                        $subject, // тема письма
                        $body, // текст письма
                        $html = FALSE, // письмо в виде html или обычного текста
                        $reply_to = FALSE
                        ) {
  $to = mime_header_encode($name_to, $data_charset, $send_charset)
                 . ' <' . $email_to . '>';
  $subject = mime_header_encode($subject, $data_charset, $send_charset);
  $from =  mime_header_encode($name_from, $data_charset, $send_charset)
                     .' <' . $email_from . '>';
  if($data_charset != $send_charset) {
    $body = iconv($data_charset, $send_charset, $body);
  }
  $headers = "From: $from
";
  $type = ($html) ? 'html' : 'plain';
  $headers .= "Content-type: text/$type; charset=$send_charset
";
  $headers .= "Mime-Version: 1.0
";
  if ($reply_to) {
      $headers .= "Reply-To: $reply_to";
  }
  return mail($to, $subject, $body, $headers);
}
function mime_header_encode($str, $data_charset, $send_charset) {
  if($data_charset != $send_charset) {
    $str = iconv($data_charset, $send_charset, $str);
  }
  return '=?' . $send_charset . '?B?' . base64_encode($str) . '?=';
}
/* Осуществляем проверку вводимых данных и их защиту от враждебных 
скриптов */
$name = htmlspecialchars($_POST["name"]);
$phone = htmlspecialchars($_POST["phone"]);
/*На какую почту отправить уведомление?*/
$myemail = "mail@site.ru";
/*Создаём сообщение для отправки*/
$message_to_myemail = "Заявка на обратный звонок 
Отправитель: $name, телефон: $phone";
/*Отправляем письмо с помощью функции*/
send_email('Автор письма',
               'sender@site.ru',
               'Получатель письма',
               $myemail,
               'utf-8',  // кодировка, в которой находятся передаваемые строки
               'utf-8', // кодировка, в которой будет отправлено письмо
               'Письмо-уведомление',
               $message_to_myemail);
echo "Ваша заявка получена";
echo"Чтобы вернуться на главную страницу, нажмите сюда: <a href='https://aleksandr-krylov.ru/index.html'>главная страница</a>";
?>
</body>
</html>

Оба этих файла размещаем в одной папке на сервере. А кнопку «заказать обратный звонок» можно взять из предыдущей записи. Она просто должна открывать первый файл.

А второй файл содержит много дополнительного кода, и его можно было сделать куда проще, но оставил так — вдруг у вас будет другая форма, в которой будет нужно вводить ещё и электронную форму, и сообщение — кто ж знает, что вы там для клиентов удумаете )

Симпатичную кнопку, к которой можно привязать эти файлы, можно взять из предыдущей записи: Кнопка.

Обратный звонок: 58 комментариев

  1. Yana

    Ребят, для нежелающих разбираться с кодом, коих тут, вероятне всего, довольно мало предлагаю попробовать воспользоваться уже готовым решением от сервиса https://excitel.net/

    После регистрации будет доступен код кнопки, который нужно будет добавить на свой сайт.

    Есть возможность настроить кнопку под свои предпочтения (как дизайн, так и функционал).

    Можно по нажатию на кнопку просто принимать звонки через интернет, можно принимать голосовые сообщения либо заказы на обратный звонок.

    Ответить
    1. Александр Крылов Автор записи

      Спасибо за ваш комментарий. Посмотрел сервис — вроде, по делу. Наличие бесплатной версии радует.

      Правда, на мой взгляд, вам бы стоило подробней расписать, как там реализовать заказ обратного звонка.

      Поскольку сейчас это на сайте вообще не видно.

      Ответить
  2. Дмитрий

    Здравствуйте, помогите соеденить 2 тих файла в один! У меня в CMS данные отправляются только если все в одном.

    Ответить
    1. Александр Крылов Автор записи

      Дмитрий, здравствуйте.

      Чтобы объединить два файла в один, нужно сделать следующее:

      1) Создать один файл call.php

      2) Перенести в него содержимое обоих файлов

      3) В начале файла создать условие «если»

      Если существуют глобальные переменные name, phone, то выполнить вторую часть файла (отправить письмо).

      Если не существуют — то показать форму для отправки.

      То есть код будет начинаться с фразы if isset — а дальше два варианта.

      Подробней мне сложно пояснить, поскольку это требует некоторых мелких деталей, а я не знаю, насколько хорошо вы в этом ориентируетесь.

      Но если что-то осталось непонятным, то я очень рекомендую вам посмотреть курс по PHP и MySQL Евгения Попова — там, в том числе, рассмотрен пример именно такого варианта 2 файла в одном.

      Ответить
    1. Александр Крылов Автор записи

      Добрый день, Вадим.

      Я думаю, вы уже определились, что адрес куда отправлять — это вот эта строка:

      $myemail = «mail@site.ru»;

      Ящик, существующий в кабинете, можно попробовать подставить вот сюда:

      ‘sender@site.ru’,

      Поскольку потом этот ящик будет использован в заголовке from, который создан в функции вот тут:

      $from = mime_header_encode($name_from, $data_charset, $send_charset)

      .’ ‘;

      Строка $from в комментарий целиком не поместилась, поскольку движок сайта режет комментарии для защиты от возможных атак. Выше в примере — там две строчки )

      Отмечу также, что, насколько помню, у данного хостинга есть какие-то ограничения по работе с php. Поэтому если решить задачу этим способом не получится, то надо будет подумать )

      Ответить
  3. Вадим

    Саша, доброго дня. Решил воспользоваться только

    вторым php файлом, т.к. блан и форма у меня уже были.

    http://akrilat.ru/ В первом файле добавил только acti, чтобы

    ссылался на php файл. Отредактировал ящик. По

    интерфейсу вижу, что все работает, но письма не

    приходят. Хостинг на 1Gb. Обратился в поддержку, на

    что получил ответ, что » при отправке скрипты

    должны формировать заголовок from и в него

    указывать ящик, существующий в личном кабинете.»

    Вот только не знаю, где указать этот ящик в php

    скрипте. К сожалению в программировании я почти 0.

    Подскажете?

    Ответить
  4. Александр123

    Как вставить в страницу эту кнопку, помогите пжлст чайнику… (

    Ответить
    1. Александр Крылов Автор записи

      Здравствуйте, Александр.

      Вам нужно создать два файла и поместить их на сервер. И посмотреть, работает ли. Потому что для работы формы обратного звонка должен использоваться сервер с поддержкой PHP

      Ответить
  5. Светлана

    Все супер! Спасибо!

    Ответить
    1. Александр Крылов Автор записи

      Да всегда пожалуйста )

      Ответить
  6. Исатай

    Здравствуйте!! Отличная форма обратного звонка. У меня на сайте все работет. Каз делать проверку на заполнения полей? письма отправляются даже когда поля не заполняются

    Ответить
    1. Александр Крылов Автор записи

      Здравствуйте ) Лично я таких проверок делать не стал, поскольку пустые письма мне не мешают.

      Ответить
  7. Дмитрий

    Пришлось подправить файл htaccess. Остался последний вопрос. Хочется что бы сама закрывалась. А так все классно, настроил всплывающее окно через плагин. В окно запихнул модернизированную форму, которая вызывает ваш php.

    Ответить
    1. Александр Крылов Автор записи

      Дмитрий, добрый вечер. Единственная мысль, которая приходит в голову по автозакрытию — это найти подобный функционал на чьём-то сайте и посмотреть реализацию. Больше идей нет )

      Ответить
  8. Дмитрий

    Все наладил, все всплывает и отправляет. Единственное, вместо «Чтобы вернуться на главную страницу, нажмите сюда:» и далее символы. Подскажите как исправить. И как сделать что бы автоматом на главную улетало.

    Ответить
  9. Александр

    Сменить кодировку для файлов на другой вариант — с utf-8 на windows-1251 помогло. Бракозяблы исчезли. Возникла проблема с полем ввода имени. Корректно приходят уведомления на почту только имена на англ. яз. На русском — пустота.

    Англ — (Заявка на обратный звонок Отправитель: Rfgcfgh, телефон: 333333)

    Рус — (Заявка на обратный звонок Отправитель: , телефон: 333333)

    Помогите пожалуйста решить проблему. Спасибо.

    Ответить
    1. Александр Крылов Автор записи

      Александр, добрый день. Лично я бы сделал следующим образом: нашёл любой бесплатный хостинг (можно также Денвер установить), на нём бы поставил форму обратного звонка и посмотрел, есть ли подобный глюк или нет.

      Если нет, то потом просто проверить, в чём разница в настройках. И всё )

      Ответить
  10. Алекс

    AldeX спасибо за простое и эффективное решение!

    Возникла проблема как и у Романа вида ???????, ???????: 123 123

    Решил так: сайт у меня на dle и использует кодировку cp-1251 поэтому

    в файле call.php

    ‘utf-8’ // кодировка, в которой…

    ‘utf-8’ // кодировка, в которой…

    Заменяем на

    ‘windows-1251’ // кодировка, в которой…

    ‘windows-1251’ // кодировка, в которой…

    Так же сам файл call.php должен быть в кодировке windows-1251

    Еще мне понадобилось добавлять строчку AddDefaultCharset WINDOWS-1251 в файл .htaccess потому что иначе пользователь видел вместо сообщения «вернуться на главную…» кракозябры

    Все удачи!

    Ответить
    1. Александр Крылов Автор записи

      Алекс, спасибо вам за ваш комментарий и полезный опыт! )

      Ответить
  11. Роман

    Почему-то приходят письма следующего содержания:

    ?????? ?? ???????? ?????? ???????????: ???????, ???????: 123 123

    Ответить
    1. Александр Крылов Автор записи

      Роман, добрый день.

      Если у вас приходят подобные сообщения, где-то есть косяк с кодировкой. Попробуйте в notepad++ сменить кодировку для файла на другие варианты — с utf-8 на windows-1251, например.

      Думаю, что косяк прячется именно в кодировке файла. Вполне возможно, что он у вас уже в кодировке 1251, в то время как должен быть в utf-8.

      Если же не в этом, тогда в настройках сервера проблема — и тоже с кодировкой. Но тут уже надо в техподдержку хостинга обращаться.

      Везде должно быть utf-8.

      Ответить
  12. Аноним

    Здравствуйте.

    Правильно ли я понимаю, что отредактировать нужно две строчки:

    /*На какую почту отправить уведомление?*/

    $myemail = «mail@site.ru»;

    echo»Чтобы вернуться на главную страницу, нажмите сюда: главная страница»;

    Ответить
    1. Александр Крылов Автор записи

      Здравствуйте, Аноним )

      Ну, в принципе, чтобы всё работало, достаточно отредактировать только целевую почту.

      Ответить
  13. Денис

    и не совсем понятно,оба файла вставлять в это окно одновременно или как????

    Ответить
    1. Александр Крылов Автор записи

      Денис, эти два файла вставляются в разные места. Они всё-таки разные роли выполняют. Лучше всего — написать в техподдержку викса. Потому что здесь ведь не просто html, a php (второй файл). А есть ли на виксе поддержка php — я не знаю.

      Ответить
  14. Денис

    добрый день, скажите могу ли я разместить сервис обратного звонка по заданным вами кодам на сайте созданном на бесплатной платформе WIX.com? Дело в том ,что на сайте есть возможность вставить html-код при редактировании но только в спец. отведенное окно.

    Ответить
  15. Илья

    Не знаю, по мне надежнее будет заплатить, но знать что все работает как надо. Это я после пробной версии Pozvonim.com решил на таком варианте остановится )

    Ответить
  16. Олег

    Я уже сделал готовое решение для обратного звонка в виде бесплатного сервиса goodbeep.com Можно настроить цвет, текст, размер, есть всплытие окна при попытке закрыть сайт.

    Ответить
  17. Альберт

    Кстати, кто думает потестить — есть хороший лайфхак для Коллбэкхантера (callbackhunter). Можно получить 11 бесплатных безлимитных разговоров на месяц вместо 5 на бесплатном тарифе КИТТИ, и очень просто)) Регистрироваться нужно через лендинг для Беларуси http://callbackhunter.com/belarus — тут спецпредложение. Или еще вариант — ввести промокод belarus при регистрации и будет вам счастье. Пользуйтесь.

    Ответить
  18. Комментатор 18

    У меня есть на сайте http://xn--80aknjg4g.name/ кнопки, но они не работают. Формы устроены так, что поля для имени и телефона сразу открыты. Сами контейнеры я в indexhtml нашел. Но как привязать их к моему емайлу не имею представления. Нет кода с емайлами вообще ни какими. Не знаю html, поэтому прошу помощи. Думал удалить старые формы и сделать как вы пишите, но у меня нет файла call.php. Подскажите пожалуйста, как лучше сделать?

    Ответить
    1. Александр Крылов Автор записи

      Если по-простому, то, что у вас сейчас есть — это файл с формой. И нужен ещё обработчик, то есть файл, с использованием которого будет обработано нажатие на кнопку «отправить»

      То есть из представленного выше примера есть верхний файл, но нет нижнего. Его вам и нужно создать.

      Ответить
  19. Алексей

    Подскажите, пытаюсь поставить форму. Не понимаю. Я загрузил оба файла. Как вызвать эту форму на сайте? Какой именно файл нужно вызывать, в инструкции вы пишите что первый, в комментарии что второй. Напишите пожалуйста пример кода вызова на сайте. Спасибо.

    Ответить
    1. Александр Крылов Автор записи

      Алексей, добрый день.

      Первый файл — это файл с самой формой.

      Его можно сделать отдельно или встроить в существующую страницу.

      Обычно удобней встроить.

      Для этого открываете исходный код страницы, в которой вам нужна форма, и в нужное место страницы между тегами вставляете код первого файла. В первом файле он также расположен между этими же тегами.

      Ну а код второго файла вставляете в текстовый файл и называете его call.php

      Этот файл помещаете в одну папку с той страницей, в которой форма.

      Теперь, когда в первой странице вы нажмёте на кнопку отправки данных, произойдёт обращение ко второй странице, которая отправит данные для звонка к вам на почту.

      Вот как-то так.

      Ответить
  20. Евгений

    Пробовал и на другом сервере и на локалке — все равно письма дублируются… Возможно как-то влияет на это ДЛЕ, к оторой прикрутил этот скрипт ..

    Ответить
    1. Александр Крылов Автор записи

      Евгений, честно говоря, не могу сказать, почему. Сделайте просто голый html-вариант — и проверьте.) На поддомене либо с использованием ненужного домена…

      Ответить
  21. Андрей

    Добрый день. Я так понимаю, что с Вашей формой и просто письма можно получать. А как проверить валидность набранного в полях? И хочется чтобы письма приходили в красивой форме(видимо как то это связано с $html. Но каким образом?

    Спасибо

    Ответить
    1. Александр Крылов Автор записи

      Андрей, доброго времени )) Валидность в полях можно проверить с помощью регулярных выражений и условия if()

      Но опыт показал, что клиенты — это такие люди, которые могут ввести в поле, где телефон, например, электронную почту. Если его заставить перепечатывать — он может и не оставить заявку.

      Поэтому я бы с проверкой ввода заморачивался только в случае, если заявок с ошибками много. Это тот случай, на мой взгляд, когда улучшив форму, можно снизить количество заявок.

      Ответить
  22. Евгений

    Писал, но почему-то коммент не сохранился… Вопрос в следующем: все работает, но приходит 2 письма. В первом все данные есть, а во втором — с пустыми данными. Как отключить вторую копию письма?

    Ответить
  23. Евгений

    Установил, заработала с кракозябрами. Подправил кодировку — все пашет, НО приходят два письма: в первом все данные, во втором без данных. Как убрать второе приходящее письмо ?

    Ответить
    1. Александр Крылов Автор записи

      Евгений, доброго времени суток. Попробуйте проверить работу скрипта на другом сервере. По идее косяков с дублированием писем быть не должно. Может, это особенность настройки текущего сервера?

      Ответить
  24. Алексей

    Спасибо огромное я искал что то подобное целый МЕСЯЦ. Я НАКОНЕЦ ТО НАШЁЛ !!!!! СПАСИБО АВТОРУ, ОН САМЫЙ ЛУЧШИЙ !!!!!

    Ответить
    1. Александр Крылов Автор записи

      Алексей, спасибо на добром слове )

      Ответить
  25. Егор

    Подскажите если уже есть на сайте форма как сделать что бы кнопка вызывала форму? И ПОтом пользователь вносил туда данные. http://consultant-web.ru/callme/ вот этот набор поставил на сайт.

    Ответить
    1. Александр Крылов Автор записи

      Егор, вам нужен просто всплывающий div-контейнер на сайте. Для кнопки делаете ссылку на этот div. Пользователь нажимает на кнопку-ссылку, открывает этот контейнер. Для него это выглядит как «всплывание»…

      Ответить
  26. Аноним

    Не получается связать кнопку с файлом call.html. Как это сделать? Подскажите, пожалуйста.

    Ответить
    1. Александр Крылов Автор записи

      Кнопку надо связывать с файлом call.php. )

      Ответить
  27. Анна

    Здравствуйте! Спасибо большое за форму, уже работаю с ней на своём сайте. Письма приходят на почту (хотя сначала отображались квадратами или вопросами), но столкнулась с проблемой. Что бы не писала в своей форме, приходит только вот это «Заявка на обратный звонок Отправитель: , телефон:», то есть самое важное — данные, которые оставляют пользователи теряются. Подскажите, пожалуйста, как исправить эту проблему?

    Ответить
    1. Александр Крылов Автор записи

      Анна, вам нужно также поставить набор разработчика денвер. И посмотреть, в каком виде там отправляются письма

      Если в заявке на обратный звонок нет данных, значит, по какой-то причине переменные имя и телефон не были переданы в файл-обработчик с помощью метода POST.

      Можно попробовать поинтересоваться у техподдержки, нет ли каких-то ограничений на передачу переменных

      Ответить
  28. Мария

    Добрый день. Вроде все установлено, но не приходят письма.

    Ответить
    1. Александр Крылов Автор записи

      Мария, в случае, если форма не работает, попробуйте установить набор разработчика dnwr на компьютер, а в него загрузите обе страницы: одну с формой, другую с обработчиком. В этой среде (так же называется «денвер») отправляемые письма сохраняются во внутреннюю папочку.

      Так вот. Если там письма будут уходить, значит, проблема в хостинге, и решать надо с хостером.

      Ответить
  29. Dinak

    Не работает форма….

    Ответить
    1. Александр Крылов Автор записи

      Dinak, попробуйте установить набор разработчика dnwr на компьютер, а в него загрузите обе страницы: одну с формой, другую с обработчиком. В этой среде (так же называется «денвер») отправляемые письма сохраняются во внутреннюю папочку.

      Так вот. Если там письма будут уходить, значит, проблема в хостинге, и решать надо с хостером.

      Ответить
  30. Роман

    А как сделать, чтобы кнопка открывала первый файл?

    Ответить
    1. Александр Крылов Автор записи

      Роман, что значит «открывала первый файл»?

      Ответить
    1. Александр Крылов Автор записи

      Иван, спасибо. Ссылка полезна

      Ответить

Добавить комментарий для Дмитрий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *