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

ГлавнаяJava скрипты → Обратный звонок Ajax

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

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


Пример работы Обратного звонка (нажмите на кнопку)

Обратный звонок

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

2. Откройте index.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 и найти этот код:


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


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


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

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


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


Поделись ссылкой с друзьями:

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

Игорь 18-05-2016

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

Admin 18-05-2016

Спасибо, за тёплые слова!

Я отправил вам письмо на почту с пошаговыми действиями!

Александр 19-11-2016

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

Admin 19-11-2016

Добрый вечер!
На сайте использован тот же скрипт (оригинал), что и вы скачиваете. Только со временем я его доработал ещё, то есть прикрутил попутно пару скриптов для проверки телефона и всё, которые с отправкой сообщений абсолютно не связаны.
Я посмотрел ваш сайт и ошибка ваша в том, что браузер не находит ваш файл обработчика скрипта обратного звонка - mail.php
Посмотрите внимательно с прописанием путей до файлов.

Александр 19-11-2016

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