Авторизация

Снять ограничение

Сообщение не отправлено!
Ваши данные получены!
Ждите по E-mail счёт для оплаты!
Имя - только русские буквы!
Введите корректный E-mail!
Это обязательное поле!
Не правильный код безопасности!

Онлайн Поддержка

ГлавнаяСкрипты java и phpОбратный звонок Ajax

Обратный звонок 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",
  data: th.serialize()
  }).done(function() {
  $(".success").addClass("visible");			
});
return false;
});

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


$(".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 в модальном окне

Рейтинг: 4.7/5     Оценили: 47

Похожие публикации

Снять ограничение

Стоимость просмотра скрытой информации - 10 рублей.
На ваш E-mail поступит счёт, и после оплаты вы получите доступ к странице на месяц.

Комментарии к статье 7

Игорь

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

Админ

User: Админ→ Игорь
Спасибо, за тёплые слова!
На сайте использован тот же скрипт (оригинал), что и вы скачиваете. Только со временем я его доработал ещё, то есть прикрутил попутно пару скриптов для проверки телефона.

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 скрипты (без них работать не будет):
Информация скрыта! - снять ограничение

Александр

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

Админ

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

Александр

User: Александр→ Админ
Александр, спасибо за содействие. Я понял сразу, что не видит отправку.
Позанимаюсь с этим скриптом. Где-то ошибка явная. Я пробовал и в корень сайта сразу под домен загружать. Все то же. Поищу.
В любом случае спасибо. Успехов!

Александр

User: АлександрПриветствую!
Установил на свой сайт скрипт обратный звонок, внес некоторые изменения в стили, убрал поле с именем и оставил только поле с телефоном и все отлично работает.

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

Админ

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

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

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