Бесплатное в сети!
» » Обратный звонок 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

Комментарии 6
Игорь
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:"Закрыть".

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

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