Бесплатное в сети!
Age-Dragon.com
» » Обратный звонок Ajax в модальном окне

Обратный звонок Ajax в модальном окне

телефон

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

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

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

 

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

В этом же файле можно настроить внешний вид приходящих писем. Пример стандартного письма смотрите ниже:


письмо с обратного звонка

Шаг 2. Откройте index.html и сделайте изменения в закомментированных строках (ниже), где пропишите своё имя и свой домен. Они будут отображаться в вашем письме.

Код для *.html

      <!-- 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 и найти этот код:

Код для Java

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

И после замените его на этот:

$(".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 при открытие и закрытие формы Обратный звонок замените следующую строку:

Код для *.html

<form class="popup-form callback" id="callback">

           <!-- замените на этот код: -->
<form class="popup-form callback zoom-anim-dialog" id="callback">

Шаг 6. Для того, чтобы поле Имя было обязательно для заполнения, добавьте в соответствующий input этот код: required="required"

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

На этом всё, что не понятно, - спрашивайте и нажимайте ЛАЙКИ!

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

Ссылка на файл: obratnyi_zvonok_ajax.zip

Комментарии 11
Игорь
27 июля 2018 18:38
Игорь

Спасибо за Ваш сайт, благодаря Вам начал интересоваться темой сайтостроения.
У Вас есть статья про обратный звонок с сайта. И даже указан пример. Я его скачал, но сообщение не исчезает через 3 секунды, а в место номера могут ввести всякую беребельду.
Как можно скачать Вашу версию обратного звонка?

Читать полностью
27 июля 2018 19:52
Admin

Игорь,
Спасибо, за тёплые слова!
На сайте использован тот же скрипт (оригинал), что и вы скачиваете.
Только со временем я его доработал ещё, то есть прикрутил попутно пару скриптов для проверки телефона.
---
1. Добавьте этот код для телефона: в это поле <input id="phone" ...

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

Стоимость доступа ко всей странице 20.00 RUR.
После оплаты доступ будет открыт в течение 3 дн.
Для оплаты Вам необходимо зарегистрироваться либо войти на сайт.

Читать полностью
Александр
27 июля 2018 21:22
Александр

Здравствуйте! Материал на сайте отличный! Спасибо!
Скачал скрипт обратного звонка. Внес изменения. На хостинге создал папку и все закинул туда. На сайте прописал пути к папке с файлами.
Кнопка есть, форма всплывает, но не отправляет.
Пробовал и без папки на хост кидать - не отправляет ( ссылку дал ).

Читать полностью
27 июля 2018 22:48
Admin

Александр,
Добрый вечер!
Я посмотрел ваш сайт и ошибка ваша в том, что браузер не находит ваш файл обработчика скрипта обратного звонка - mail.php
Посмотрите внимательно с прописыванием путей до файлов.

Читать полностью
Александр
28 июля 2018 12:08
Александр

Admin,
Александр, спасибо за содействие. Я понял сразу, что не видит отправку.
Ошибку исправил - всё заработало!

Но, теперь никак не могу понять, как отображается тайтл у кнопки закрытия окна.
Хочу изменить Close (Esc) на Закрыть (Esc).
Подскажите, пожалуйста, как поправить эту мелкую деталь в коде.

Читать полностью
28 июля 2018 13:11
Admin

Александр,
Это делается очень просто!
Открываете скрипт jquery.magnific-popup.min.js, находите:
tClose:"Close (Esc)"

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

Я уже переделал здесь для наглядного примера.

Читать полностью
Владимир
7 ноября 2018 03:09
Владимир

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

Подскажите как сделать чтобы само модальное окно "Обратного звонка" открывалось на фоне нужного сайта.. а не на белом фоне как в коде....

спасибо зарания

Читать полностью
7 ноября 2018 09:49
Admin

Владимир,
Здравствуйте!
Так когда поставите скрипт обратного звонка к себе на сайт, оно и будет открываться на том фоне, который у вас.
А фон самого модального окна редактируете через css.

Читать полностью
Тимур
8 ноября 2018 17:31
Тимур

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

Письма на почту не приходят.
Смотрел файл common.js
Путь указан верно в корневой дероктории находится обработчик mail.php
Подскажите пожалуйста

Читать полностью
8 ноября 2018 19:13
Admin

Тимур,
Добрый вечер!
Уберите все свои скрипты, кроме скриптов для Модального звонка и всё заработает. Каждый раз советую, - проверяйте на чистом листе без всего. А после уже добавляйте свои скрипты и смотрите, какой из них блокирует другого. Это одна из первых причин, что у вас не работает. Потом идут пути и так далее.
---

У вас скрипт common.js лежит в папке js, а где лежит у вас обработчик Mail.php ,  я же его просмотреть не могу.... Он должен лежать при вашем раскладе то же в папке js.

---
С этим скриптом вообще проблем быть не должно. Так же проверьте - исходящие письма со своего домена....

Читать полностью
нариман
17 ноября 2018 21:10
нариман

Все доступно и ясно много вычерпал интересного... но сожалею cmc так и не приходят на почту

Читать полностью
Добавить комментарий