Заказ обратного звонка на jquery
Всем привет! Сегодня поделюсь интересным скриптом для заказа обратного звонка с сайта. В основном данная фича, очень актуальна для интернет магазинов. Принцип простой. Покупатель оставляет свои контакты, указывает удобное время для звонка, после чего менеджер магазина связывается с покупателем по указанному номеру телефона.
Вот так выглядит сама формочка:
Смотрите демо. При нажатии на кнопку “Заказать звонок” происходит затемнение всего экрана и появляется небольшая формочка, как на картинке выше.
Как подключить такую фичу к сайту?
2. Скрипт jquery.arcticmodal из папки js закачиваем в папку, например со всеми скриптами сайта
3. В начале страницы, между тегами head подключаем скрипт и jquery
|
1 2 |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="/js/jquery.arcticmodal.js" type="text/javascript"></script> |
При необходимости, путь до скрипта jquery.arcticmodal.js нужно будет поправить
4. В таблицу стилей добавляем, все стили формы из файла style.css
5. Все картинки из папки img закачиваем в папку со всеми картинками, например шаблона сайта. Затем в css стилях формы прописываем правильные пути до картинок
|
1 2 3 4 5 6 |
/******modal-form*******/ .modal-form { background:url(../путь/modal-form-bg.jpg) no-repeat; width:480px; height:393px; } |
6. В том месте, в котором хотим вывести кнопку заказа обратного звонка, вставляем код из файла “Кнопка и форма”
7. Все готово. Осталось только заставить отправлять все полученные данные с формы на нужный e-mail адрес. Для этого, открываем в редакторе файл options.php и находим такой код
|
1 2 3 4 |
/* Формируем сообщение */ $address = "test@mail.ru"; $sub = "Заказ обратного звонка"; $mes = "Имя: $name \nE-mail: $email \nУдобное время для звонка: $vopros \nТелефон: $number"; |
В место test@mail.ru вписываем емайл адрес, на который будут отсылаться данный с формы. Имя, e-mail, телефон удобное время для звонка. Закачиваем файл options.php в корень сайта и проверяем.
Если нужно чтобы данные приходили сразу на несколько e-mail адресов, то для этого просто впишите адреса через запятую
|
1 |
$address = "test@mail.ru,test@inbox.ru"; |
P.S. Возможно вам пригодиться такой набор кнопочек, ибо желтенькая кнопочка была взята от туда. Кнопки сделаны с помощью css.
С уважением, Игорь Дулин
Рад видеть Вас на своем сайте! Меня зовут Игорь Дулин, 27 лет. Занимаюсь созданием, продвижением и монетизацией сайтов с 2008 года.
Комментариев: 38
Жаль, что в Интернете мало находила таких содержательных материалов..
Только не очень могу понять, как часто обновляется ваш блог?
По разному, все зависит от свободного времени
Спасибо, как сделаю новый сайт – протестирую на нем.
Пожалуйста
Один раз получилось отправить и все, дальше не отправляется
Error! Ваше запрос не отправлен, попробуйте еще разок!
Через 4 секунд вы будите перенаправлены обратно..
Сайт на платном хостинге?
Да конечно
Тогда не знаю, смотреть нужно. Демо http://demo.igordulin.com/obr/ работает отлично, письма доходят!
Спасибо, проблема была с хостингом все заработало
Здравстуйте! Встроила вашу форму, работает отлично! Спасибо огромное! Единственное – куда-то пропал крестик для закрытия формы. Подскажите пожалуйста, что можно сделать, чтобы вернуть его?
Крестик это изображение close, находится оно в папке img. Посмотрите на месте оно или нет. Также обратите внимание на то, что крестик белого цвета и на белом фоне его просто может быть не видно.
Спасибо!
Оказалось, я не поменяла путь до изображения)
За статью премного благодарен, все по делу, достаточно много кто это использует
Подписался на RSS, буду следить =)
Здравствуйте! Прошу прощения, что пишу не совсем в тему. Я тоже использую Вордпресс для своего блога и у меня возник вопрос, как настроить новую тему. Поиск на официальном сайте ничего не дал, там только пользовательские настройки рассматривают, а мне нужно, видимо, шаблоны править. Не подскажете, где почитать?
Вещь классная, только вот не работает. Заполняю форму, и когда нажимаю отправить,кидает на отдельную страницу option.php и все, никакого письма) помогите, очень нужно )
Добрый день!
После закрытия формы мой враппер липнет к правому краю. Как можно исправить?
У вас проблемы с версткой…
Скажите, можно ли как-то весь код уместить просто в HTML, без использования дополнительных файлов? И интересует как будет выглядеть код без кнопки Заказать Звонок, а сразу форма заполнения. Просто используем ее на платформе WIX, а там не такой возможности как использовать дополнительные файлы. Можно только использовать HTML бокс. Спасибо!
Да, конечно можно. Если вам кнопка не нужна, то оставьте только форму и обработчик и отцепите js. С платформой WIX не работал!
А можно как-то сделать, чтобы сообщение об успешной отправке появлялось на той же странице где была форма, без перезагрузки?
Здравствуйте. Статья отличная и форма супер!
Кнопочка встала куда надо и нажимается, как настоящая, но почему-то дальнейших действий не происходит. есть подозрение, что файл option.php не подключился. Подскажите как проверить или насильно заставить сай увидеть этот файл.
День добрый!
Как решили эту проблему?
спасибо
Скажите пожалуйста
Можно ли убрать вкладку email??
И как?
Спасибо, классный скрипт!
Только вот никак не могу разобраться с кодировкой – на почту приходят иероглифы. Меняла уже на что попало, в чем может быть проблема?
Интересные посты – это ваш стиль безусловно!
День добрый!
К сожалению возникла та же проблема, что и у Анастасии: Кнопочка встала куда надо и нажимается, как настоящая, но почему-то дальнейших действий не происходит. есть подозрение, что файл option.php не подключился.
Что предпринять?
спасибо
Владимир, вы решили данную проблему, возникла такая же. Такое впечатление что в Файл option.php не передаются данные и он не выводит форму для заполнения? Может кто то сталкивался…
Здравствуйте! Прошу прощения, что пишу не совсем в тему. Я тоже использую Вордпресс для своего блога и у меня возник вопрос, как настроить новую тему. Поиск на официальном сайте ничего не дал, там только пользовательские настройки рассматривают, а мне нужно, видимо, шаблоны править. Не подскажете, где почитать?
Ваш скрипт с кодировкой UTF-8, как сделать чтобы он был в кодировке windows-1251
Здравствуйте. у меня не реагирует кнопка на клик
Спасибо за скрипт , рабочий
Но есть небольшой вопрос …Как добавить select в форму ну чтобы выбор из него отображался в письме
Ранее задавал вопрос о работоспособности скрипта.а именно options.php. У меня причина оказалась в следующем. Я удалял один код не работающей формы и прописывал этот – получилось что один код переплелся с другим.
Сейчас все почистил и прописал с нуля. Скрипт работает, форма выводится, заполняется, выводится что все успешно произошло.Однако сообщение на почту (….@gmail.com) которую прописал в файле options.php не приходит.
Тестирую на локальном сервере, Может по этой причине не доходят сообщения
Заранее спасибо, хотя смотрю автор долгое время на сообщения не отвечал
Тестируйте скрипт на реальном хостинге
Спасибо за ответ.
Действительно наверное придется перейти на тест реального хостинга.
На данный момент использую виртуальный, установлен ДЕНВЕР. и все сообщения складываются в Виртуальный хост/tmp папка !sedmail. – может кому в помощь будет и меньше займет времени на поиски причин почему не доходят письма на электронную почту.
И вопрос к Игорю.
Если я правильно разобрался то в скрипте нет проверки на правильность формата заполнения полей.
Не могли бы подсказать, что необходимо прописать для реализации подобного.
Или в этом случае код будет громоздким.
Заранее спасибо за ответ
Данный скрипт писал не я, поэтому к сожалению не чем вам помочь не смогу. Попробуйте обратиться к фриласерам или поискать другой скрип с нужной вам функцией.
Спасибо, попробую разобраться сам. Еще время есть
Оставить комментарий