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

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

Вот так выглядит сама формочка:
обратный звонок на 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.

 


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


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



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

Метки записи

Стартап Акции изучай Форекс

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

  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 не подключился.
    Что предпринять?
    спасибо

    • Владимир, вы решили данную проблему, возникла такая же. Такое впечатление что в Файл option.php не передаются данные и он не выводит форму для заполнения? Может кто то сталкивался…

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

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

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

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

  23. Ранее задавал вопрос о работоспособности скрипта.а именно options.php. У меня причина оказалась в следующем. Я удалял один код не работающей формы и прописывал этот – получилось что один код переплелся с другим.
    Сейчас все почистил и прописал с нуля. Скрипт работает, форма выводится, заполняется, выводится что все успешно произошло.Однако сообщение на почту (….@gmail.com) которую прописал в файле options.php не приходит.

    Тестирую на локальном сервере, Может по этой причине не доходят сообщения

    Заранее спасибо, хотя смотрю автор долгое время на сообщения не отвечал

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

      Тестируйте скрипт на реальном хостинге ;-)

      • Спасибо за ответ.
        Действительно наверное придется перейти на тест реального хостинга.
        На данный момент использую виртуальный, установлен ДЕНВЕР. и все сообщения складываются в Виртуальный хост/tmp папка !sedmail. – может кому в помощь будет и меньше займет времени на поиски причин почему не доходят письма на электронную почту.

        И вопрос к Игорю.
        Если я правильно разобрался то в скрипте нет проверки на правильность формата заполнения полей.
        Не могли бы подсказать, что необходимо прописать для реализации подобного.
        Или в этом случае код будет громоздким.

        Заранее спасибо за ответ

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

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

  24. В PrestaShop не работает.

  25. Здравствуйте, третий день ищу подходящую форму заказа для сайта, и очень обрадовался, когда увидел вашу – то что мне было нужно. Но радость была недолгой – кнопка встала и нажимается, но форма не выскакивает, перепроверил все пути, все файлы на месте. В комментариях выше тоже ссылаются на такую проблему. Подскажите в чём может быть дело…

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


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

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