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

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

7 1 511

телефон

Сайтам, где предлагаются какие-либо услуги или товары, для успешной торговли необходима такая форма, как Обратный звонок 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",
  data: th.serialize()
  }).done(function() {
  $(".success").addClass("visible");			
});
return false;
});

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

Код для Java
$(".callback").submit(function() {
  var th = $(this);
  $.ajax({
  type: "POST",
  url: "mail.php",
  data: 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

Похожие новости

Игорь
  • 0
User: ИгорьСпасибо за Ваш сайт, благодаря Вам начал интересоваться темой сайтостроения.
У Вас есть статья про обратный звонок с сайта. И даже указан пример. Я его скачал, но сообщение не исчезает через 3 секунды, а в место номера могут ввести всякую беребельду.
Как можно скачать Вашу версию обратного звонка?
  • 18 мая 2016 16:18
Админ
  • 0
User: Admin→ Игорь
Спасибо, за тёплые слова!
Я отправил вам письмо на почту с пошаговыми действиями!
  • 18 мая 2016 19:43
Александр
  • 0
User: АлександрЗдравствуйте! Материал на сайте отличный! Спасибо!
Скачал скрипт обратного звонка. Внес изменения. На хостинге создал папку и все закинул туда. На сайте прописал пути к папке с файлами.
Кнопка есть, форма всплывает, но не отправляет. Пробовал и без папки на хост кидать. Не отправляет.
Можно Вашу версию скачать?
Спасибо заранее.
  • 19 ноября 2016 17:27
Админ
  • 0
User: Admin→ Александр
Добрый вечер!
На сайте использован тот же скрипт (оригинал), что и вы скачиваете. Только со временем я его доработал ещё, то есть прикрутил попутно пару скриптов для проверки телефона и всё, которые с отправкой сообщений абсолютно не связаны.
Я посмотрел ваш сайт и ошибка ваша в том, что браузер не находит ваш файл обработчика скрипта обратного звонка - mail.php
Посмотрите внимательно с прописыванием путей до файлов.
  • 19 ноября 2016 21:30
Александр
  • 0
User: Александр→ Админ
Александр, спасибо за содействие. Я понял сразу, что не видит отправку.
Позанимаюсь с этим скриптом. Где-то ошибка явная. Я пробовал и в корень сайта сразу под домен загружать. Все то же. Поищу.
В любом случае спасибо. Успехов!
  • 20 ноября 2016 11:08
Александр
  • 0
User: АлексПриветствую!
Установил на свой сайт скрипт обратный звонок, внес некоторые изменения в стили, убрал поле с именем и оставил только поле с телефоном и все отлично работает.

Но, никак не могу понять, как отображается тайтл у кнопки закрытия окна.
Хочу изменить Close (Esc) на Закрыть (Esc).
Подскажите, пожалуйста, как поправить эту мелкую деталь в коде.
  • 10 марта 2017 17:36
Админ
  • 1
User: Admin→ Александр
Это делается очень просто!
Открываете скрипт jquery.magnific-popup.min.js, находите:
tClose:"Close (Esc)"

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

Я уже переделал здесь для наглядного примера.
  • 14 мая 2017 11:57