Заказ обратного звонка на jquery

Cервис моментального приема платежей и партнерских программ Glopart.ru

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

Вот так выглядит сама формочка:
обратный звонок на jqueryСмотрите демо. При нажатии на кнопку “Заказать звонок” происходит затемнение всего экрана и появляется небольшая формочка, как на картинке выше.

Как подключить такую фичу к сайту?

1. Скачиваем исходники

2. Скрипт jquery.arcticmodal из папки js закачиваем в папку, например со всеми скриптами сайта

3. В начале страницы, между тегами head подключаем скрипт и jquery

При необходимости, путь до скрипта jquery.arcticmodal.js нужно будет поправить

4. В таблицу стилей добавляем, все стили формы из файла style.css

5. Все картинки из папки img закачиваем в папку со всеми картинками, например шаблона сайта. Затем в css стилях формы прописываем правильные пути до картинок

6. В том месте, в котором хотим вывести кнопку заказа обратного звонка, вставляем код из файла “Кнопка и форма”

7. Все готово. Осталось только заставить отправлять все полученные данные с формы на нужный e-mail адрес. Для этого, открываем в редакторе файл options.php и находим такой код

В место test@mail.ru вписываем емайл адрес, на который будут отсылаться данный с формы. Имя, e-mail, телефон удобное время для звонка. Закачиваем файл options.php в корень сайта и проверяем.

Если нужно чтобы данные приходили сразу на несколько e-mail адресов, то для этого просто впишите адреса через запятую

 

P.S. Возможно вам пригодиться такой набор кнопочек, ибо желтенькая кнопочка была взята от туда. Кнопки сделаны с помощью css.

 


С уважением, Игорь Дулин




Понравился пост? Поделись с друзьями!

Метки записи

Комментариев: 32

  1. Жаль, что в Интернете мало находила таких содержательных материалов..

  2. Только не очень могу понять, как часто обновляется ваш блог?

  3. Спасибо, как сделаю новый сайт – протестирую на нем.

  4. Один раз получилось отправить и все, дальше не отправляется
    Error! Ваше запрос не отправлен, попробуйте еще разок!

    Через 4 секунд вы будите перенаправлены обратно..

  5. Игорь Дулин Игорь Дулин

    Тогда не знаю, смотреть нужно. Демо http://demo.igordulin.com/obr/ работает отлично, письма доходят!

  6. Здравстуйте! Встроила вашу форму, работает отлично! Спасибо огромное! Единственное – куда-то пропал крестик для закрытия формы. Подскажите пожалуйста, что можно сделать, чтобы вернуть его?

    • Игорь Дулин Игорь Дулин

      Крестик это изображение close, находится оно в папке img. Посмотрите на месте оно или нет. Также обратите внимание на то, что крестик белого цвета и на белом фоне его просто может быть не видно.

  7. За статью премного благодарен, все по делу, достаточно много кто это использует

  8. Подписался на RSS, буду следить =)

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

  10. Вещь классная, только вот не работает. Заполняю форму, и когда нажимаю отправить,кидает на отдельную страницу option.php и все, никакого письма) помогите, очень нужно )

  11. Добрый день!
    После закрытия формы мой враппер липнет к правому краю. Как можно исправить?

  12. Скажите, можно ли как-то весь код уместить просто в HTML, без использования дополнительных файлов? И интересует как будет выглядеть код без кнопки Заказать Звонок, а сразу форма заполнения. Просто используем ее на платформе WIX, а там не такой возможности как использовать дополнительные файлы. Можно только использовать HTML бокс. Спасибо!

    • Игорь Дулин Игорь Дулин

      Да, конечно можно. Если вам кнопка не нужна, то оставьте только форму и обработчик и отцепите js. С платформой WIX не работал!

  13. А можно как-то сделать, чтобы сообщение об успешной отправке появлялось на той же странице где была форма, без перезагрузки?

  14. Здравствуйте. Статья отличная и форма супер!
    Кнопочка встала куда надо и нажимается, как настоящая, но почему-то дальнейших действий не происходит. есть подозрение, что файл option.php не подключился. Подскажите как проверить или насильно заставить сай увидеть этот файл.

  15. Скажите пожалуйста
    Можно ли убрать вкладку email??
    И как?

  16. Спасибо, классный скрипт!
    Только вот никак не могу разобраться с кодировкой – на почту приходят иероглифы. Меняла уже на что попало, в чем может быть проблема?

  17. Интересные посты – это ваш стиль безусловно!

  18. День добрый!
    К сожалению возникла та же проблема, что и у Анастасии: Кнопочка встала куда надо и нажимается, как настоящая, но почему-то дальнейших действий не происходит. есть подозрение, что файл option.php не подключился.
    Что предпринять?
    спасибо

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

  20. Ваш скрипт с кодировкой UTF-8, как сделать чтобы он был в кодировке windows-1251

  21. Здравствуйте. у меня не реагирует кнопка на клик :sad:

  22. Спасибо за скрипт , рабочий :cool:
    Но есть небольшой вопрос …Как добавить select в форму ну чтобы выбор из него отображался в письме

Оставить комментарий


;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

* Обязательные поля.
Ваш email не будет опубликован.