Содержание страницы
домикГлавная / Скрипты java и php / Обратный звонок Ajax
телефонСайтам, где предлагаются какие-либо услуги или товары, для успешной торговли необходима такая форма, как Обратный звонок Ajax в модальном окне, чтобы клиентам могли сразу перезвонить и ответить на сопутствующие вопросы. И сейчас мы с вами займёмся установкой на сайт такой формы.

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

Пример работы Обратного звонка

Шаг 1. Откройте обработчик формы mail.php и замените в двух местах vasha-pochta@domen.ru на вашу почту (сюда будут приходить письма от клиентов).

В этом же файле можно настроить внешний вид приходящих писем. Пример стандартного письма смотрите ниже:
письмо с обратного звонка
Шаг 2. Откройте index.html и сделайте изменения в закомментированных строках ( ниже ), где пропишите своё имя и свой домен. Они будут отображаться в вашем письме.
htmlCOPY
<!-- Hidden Required Fields --> <input type="hidden" name="project_name" value="Age-Dragon"> <input type="hidden" name="form_subject" value="Заявка с сайта: age-dragon.com"> <!-- END Hidden Required Fields -->
Шаг 3. Для того, чтобы после отправки данных посетителем, сообщение Спасибо за заявку! ... автоматически исчезало, - необходимо открыть файл common.js и найти этот код:

$(".callback").submit(function() {
  var th = $(this);
  $.ajax({
  type: "POST",
  url: "mail.php",
  dаta: th.serialize()
  }).done(function() {
  $(".success").addClass("visible");            
});
И после замените его на этот:

$(".callback").submit(function() {
  var th = $(this);
  $.ajax({
  type: "POST",
  url: "mail.php",
  dаta: th.serialize()
  }).done(function() { $(".success").addClass("visible");
  setTimeout(function() { th.trigger("reset");
  $(".success").removeClass("visible");
  $.magnificPopup.close();
  }, 3000);});
  return false;
});

В данном коде указано время 3 секунды ( 3000 ), через которое будет закрыто это окно. Вы можете поставить соответственно своё время.

Шаг 4. Для плавного появления формы откройте файл common.js и после midClick: true, добавьте этот код removalDelay: 300,, где вы можете сами подобрать время для плавного появления и закрытия формы.

Шаг 5. Для применения эффекта ZOOM при открытие и закрытие формы Обратный звонок замените следующую строку:
htmlCOPY
<form class="popup-form callback" id="callback"> <!-- замените на этот код: --> <form class="popup-form callback zoom-anim-dialog" id="callback">
Шаг 6. Для того, чтобы поле Имя было обязательно для заполнения, добавьте в соответствующий input этот код: required="required"

Шаг 7. Помните! Для того, чтобы получать письма с формы Обратный звонок Ajax, необходимо загрузить все файлы на хостинг.

На этом всё, что не понятно, - спрашивайте и делитесь с друзьями!

стрелка вниз Скачать обратный звонок Ajax в модальном окне

Ссылка на файл: скачать архив
Комментарии
Игорь
27 июля 2018 18:38
Игорь
Спасибо за Ваш сайт, благодаря Вам начал интересоваться темой сайтостроения. У Вас есть статья про обратный звонок с сайта. И даже указан пример.
Я его скачал, но сообщение не исчезает через 3 секунды, а в место номера могут ввести всякую беребельду. Как можно скачать Вашу версию обратного звонка?
Admin
27 июля 2018 19:52
Admin
Спасибо, за тёплые слова!
На сайте использован тот же скрипт (оригинал), что и вы скачиваете.
Только со временем я его доработал ещё, то есть прикрутил попутно пару скриптов для проверки телефона.

1. Добавьте этот код для телефона: в это поле <input id="phone" ...
htmlCOPY
<span>Ваш телефон:</span> <input id="phone" pattern="+7 ([0-9]{3}) [0-9]{3}-[0-9]{2}-[0-9]{2}" ......... >
2. В самый конец страницы перед тегом </body> пропишите скрипты ( без них работать не будет ):

<script type="text/javascript" src="js/jquery.maskedinput.min.js"></script>
<script type="text/javascript">// <![CDATA[
jQuery(function($){$("#phone").mask("+7 (999) 999-99-99"); });
// ]]></script>
3. Скачайте скрипт jquery.maskedinput.min.js и положите его в папку js

https://yadi.sk/d/X-keBz4k3TpdTZ

Читать полностью

Александр
27 июля 2018 21:22
Александр
Здравствуйте! Материал на сайте отличный! Спасибо!
Скачал скрипт обратного звонка. Внес изменения. На хостинге создал папку и все закинул туда. На сайте прописал пути к папке с файлами.
Кнопка есть, форма всплывает, но не отправляет.
Пробовал и без папки на хост кидать - не отправляет ( ссылку дал ).
Admin
27 июля 2018 22:48
Admin
Добрый вечер!
Я посмотрел ваш сайт и ошибка ваша в том, что браузер не находит ваш файл обработчика скрипта обратного звонка - mail.php
Посмотрите внимательно с прописыванием путей до файлов.
Александр
28 июля 2018 12:08
Александр
Александр, спасибо за содействие. Я понял сразу, что не видит отправку.
Ошибку исправил - всё заработало!

Но, теперь никак не могу понять, как отображается тайтл у кнопки закрытия окна.
Хочу изменить Close (Esc) на Закрыть (Esc).
Подскажите, пожалуйста, как поправить эту мелкую деталь в коде.
Admin
28 июля 2018 13:11
Admin
Это делается очень просто!
Открываете скрипт jquery.magnific-popup.min.js, находите:
tClose:"Close (Esc)"

и меняете на нужное:
tClose:"Закрыть".

Я уже переделал здесь для наглядного примера.
Тимур
8 ноября 2018 17:31
Тимур
Здравствуйте
Письма на почту не приходят.
Смотрел файл common.js путь указан верно и в корневой дероктории находится обработчик mail.php
Подскажите пожалуйста
Admin
8 ноября 2018 19:13
Admin
Добрый вечер!
Уберите все свои скрипты, кроме скриптов для Модального звонка и всё заработает.
Каждый раз советую, - проверяйте на чистом листе без всего. А после уже добавляйте свои скрипты и смотрите, какой из них блокирует другого. Это одна из первых причин, что у вас не работает. Потом идут пути и так далее.
---
С этим скриптом вообще проблем быть не должно. Так же проверьте - исходящие письма со своего домена....
нариман
17 ноября 2018 21:10
нариман
Все доступно и ясно, много вычерпал интересного...
но сожалею cmc так и не приходят на почту
Милена
24 мая 2019 19:16
Милена
Здравствуйте, спасибо за скрипт обратного звонка, очень понравился.
Все работает и отправляется, единственное, у меня после отправки письма вместе с загрузкой сообщения об удачной отправке встает по левому краю по всей высоте страницы еще одно сообщение с текстом:
EMAIL SENT SUCCESSFULLY! THANK YOU FOR CONTACTING US.
и убирается только при перезагрузке страницы. Подскажите, пожалуйста, как это убрать.
Admin
24 мая 2019 19:57
Admin
Милена, добрый вечер!
Вы первая, кто сталкнулся с подобной проблемой обратного звонка.
Вышлите мне ваши все файлы связанные со скриптом и я посмотрю в чём изъян, потому как у меня второго сообщения не возникает, да и не кто и не жаловался на это.
Милена
24 мая 2019 20:15
Милена
Еще раз проверила.
Видимо были проблемы с хостингом.
Большое спасибо, все отлично работает.
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!