Как сделать кнопку "Заказать обратный звонок"

кнопка заказать обратный звонокВсем доброго времени суток. Сегодня речь пойдет о модальных окнах, и на их примере мы реализуем кнопку "Заказать обратный звонок". Наверняка вы видели на множестве лендингов такую кнопку, при нажатии на которую появляется контактная форма с затемнением общего фона. Именно такой функционал мы и реализуем сегодня.

Обычно кнопку "заказать обратный звонок" располагают в правом верхнем углу. Можете поэкспериментировать с расположением, но помните о том, что люди уже привыкли видеть этот элемент именно там, хотя, - это больше относится к сайтам бизнес тематики и услуг.

Конечно, в большинстве случаев модальные окна делают с применением javascript, но сегодня мы попробуем обойтись только средствами css, и не будем нагружать наш landing page лишним скриптом.

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

О том, как настроить контактную форму можно почитать в этих статьях:

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

Будем реализовывать такой функционал: :)

Как сделать кнопку заказать звонок

Еще раз повторюсь - это просто небольшой шаблончик, который вы потом подправите под свой дизайн. Вызываться это все будет нажатием на кнопку.

Первое, что нужно сделать,  это подключить таблицу стилей (less), представленную в исходнике. Я очень подробно описал его комментариями, посмотрите и внесите правки.

Html структура очень проста. Размещаем эту ссылку в нужное место на сайте. Туда, где вы планируете вывести кнопку "заказать обратный звонок":


<a href="#modal" class="button openModal">Заказать обратный звонок</a>

Теперь нужно создать контейнер модального окна:

<div id="modal" class="modal">
    <div>
       <div class="text"> 

           содержимое модального окна

       </div>
        <a href="#close" title="Закрыть"></a>
    </div>        
</div>

Я добавил небольшую контактную форму, получилось так:

<div id="modal" class="modal">
  <div>
    <p>Оставьте ваш телефон<br/>и наш консультант свяжется с вами</p>
    <form id="backPhone" name="backPhone">
       <input name="telephone" type="Tel" id="telForm" maxlength="20" placeholder="Введите ваш телефон" required=”required” />
       <button id="telButton" type="submit" form="backPhone">Получить прайс </button>
    </form>

       <a href="#close" title="Закрыть"></a>
  </div>
</div>

Не стал публиковать таблицу стилей, можете скачать исходник здесь:

Скачать исходник

А с html разметкой - все. Так вот просто. Преимущества этого способа в том, что модальное окно можно вызывать несколько раз на странице и в том, что не используются скрипты.

Как вы могли заметить, я написал, что использовал less. Посмотрите на структуру. Я не использовал и 5% от возможностей препроцессора (только вложенность),  так как только начал изучать его, но планирую в будущем чаще применять. Вот хотел спросить у вас, как лучше. Не против ли вы, если примеры кода будут не в CSS а less? У меня Google chrome и Яндекс браузер отказались компилировать less в css без открытия файла через Денвер или OpenServer. На Мазила и IE - проглотили. Так что, скорее всего, буду выкладывать обычные CSS стили.

А на сегодня - все! Всем пока!

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

60 комментариев

  1. Дмитрий Давыдов

    Добрый день
    Когда, Нажимаю на скачать исходник появляется такая страница со знаками: gyazo.com/2aada13a1d4dbc076c78a28cb535774c
    и не получается скачать..

    1. Дмитрий Давыдов

      Проверил ссылку - с ней все в порядке. Если хотите - вышлю на почту?

  2. Дмитрий Давыдов

    А как можно в место кнопки "Заказать обр. звон." сделать текст? и как вариант картинку!

    1. Дмитрий Давыдов

      Удалить текст между тегами "a", воспользоваться тегом img и прописать путь к картинке. Или удалить текст и написать свой

  3. Дмитрий Давыдов

    Привет, Dimad7 . Наткнулся как-то на твой сайт и здесь немного задержался. Много интересного и очень полезного. Действительно нравится здесь находиться и по твоим статьям что-то делать.
    Ну, и пользуясь случаем и статьёй по теме, увидел реализацию заказа звонка на сайте http://prolanding.ru/ . Если прокрутить ниже страницу, появляется иконка. Ну в принципе лучше посмотри на деле её. Интересная реализация всё таки. Может помог бы с ней разобраться?
    Спасибо тебе)

    1. Дмитрий Давыдов

      Привет, тебя интересует именно появление кнопки при прокрутке? Делается при помощи javascript. Считаем кол-во пикселей от начала экрана и в нужном месте добавляем элементу с кнопкой класс c visibility: visible; а изначально hidden. Думаю, в теории - так. Ну может как-нибудь статью напишу, так с ходу не скажу, нужно разбираться.

  4. Дмитрий Давыдов

    Дима, привет. Ты отлично все объясняешь, поэтому я решил спросить у тебя :) Я сейчас делаю лэндинг, который отчасти и интернет-магазин сразу. И вот столкнулся с такой, проблемой, что мне нужны работающие формы заказа как описана в этой статье, потом полная, из трех строчек, да еще и во всплывающем окне, которые будет открываться в другом всплывающем окне (описании товара). Сразу я боюсь запутаться в коде, так как до ЖаваСкрипт и ПХП добрался совсем недавно и пока лишь учусь (а точнее, привыкаю и набиваю руку). Поэтому просто-напросто боюсь запутаться в стилях и незнакомом пока что коде скриптов. Суть вопроса вот в чем: если мне нужно две формы заказа хотя бы на сайте, я могу использовать просто два разных пхп-скрипта твоего же авторства, или для начала, чтобы не запутаться в структуре файлов и основного файла, лучше обойтись одной?

  5. Дмитрий Давыдов

    И такой сразу вопрос: Что именно мне нужно прописать в код собственной формы заказа, чтобы, к примеру, стал работать вот этот твой скрипт https://smartlanding.biz/sozdanie-formy-obratnoj-svyazi.html ? Я раньше делал только не сложные статические страницы, то есть без взаимодействия с "внешним миром" и каких-либо скриптов вообще, поэтому пока что не понимаю эту часть ни верстки, ни уж тем более, пхп и жавы.

    1. Дмитрий Давыдов

      Привет, давай по порядку. У тебя есть уже кнопка заказать обратный звонок, при клике по ней всплывает модальное окно. Теперь ты хочешь поместить туда форму из статьи https://smartlanding.biz/sozdanie-formy-obratnoj-svyazi.html.

      Если ты хочешь добавить несколько форм, то тебе достаточно менять id action и name формы, например:

      <form id="application" action=" application.php" method="POST" name=" application "> 

      , а если нужна еще одна форма, то :

      <form id="application1" action=" application1.php" method="POST" name=" application1 "> 

      , но и соответственно у кнопки, которая относится кнопки тоже меняем атрибут from, на соответствующий форме:

      <button class="applicationButton" type="submit" form="application1">Получить прайс </button>

      Атрибутом action - мы обращаемся к обработчику форму, указываем его: application.php. Несколько полей - несколько обработчиков. Если поля везде одинаковые, то можно использовать один и тот же обработчик. Но не рекомендую, так как в каждом из обработчиков, при отправке сообщения мы можем отправлять разную тему письма, в которой указывать, какая именно кнопка была нажата, и тестировать с ней. Если что, - пиши в вк, там, думаю быстрее будет, и если что, присылай исходник, попробую помочь.

    2. Дмитрий Давыдов

      Привет :) Огромное спасибо за разъяснение новичку, теперь мне нужно сосредоточиться и все это реализовать. Реальной помощи просить не буду пока, так как воспринимаю все это как некое испытание для мозга, ну, когда не пошагово, как на курсах, учишься, а вот так, сразу, резко и походу :)) Код нынешний покажу лишь когда закончу, чтобы вместе посмеяться. А вот следующий сайт начну уже по всем правилам (а то щас у меня даже шрифт прописан отдельно для каждого блока с текстом, жесть в общем)), и тогда уже в вк добавлюсь. Иногда не хватает совета в чем-то, что для опытного человека ерунда, а сам сидишь иногда дня два методом тыка, пока не поймешь как. Но я должен это пройти (важный смайл) :D

    3. Дмитрий Давыдов

      Давай, желаю успехов тебе. Все получится)

  6. Дмитрий Давыдов

    в почему папка Img пустая? там сама картинка лежать должна?

    1. Дмитрий Давыдов

      Сама картинка чего?

  7. Дмитрий Давыдов

    картинка самой кнопки. у меня вместо кнопки вылезает сама форма

  8. Дмитрий Давыдов

    насколько я понял, надо скрипи модального окна и кнопку в хтмл скопировать, а стили в css? сорри за вопрос, пока плохо разбираюсь

    1. Дмитрий Давыдов

      Да, правильно понял, но там less, и нужно его скомпилировать.

  9. Дмитрий Давыдов

    Заработало,спасибо!

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

    1. Дмитрий Давыдов

      А я не понял о каком уведомлении ты говоришь :) Заявки на почту должны приходить. Ну проверь же!

  10. Дмитрий Давыдов

    дак вот я же должен где-то в коде свою почту ввести,куда должны уведомления приходить?

    1. Дмитрий Давыдов

      Ты форму по какой статье делал? Там же все и написано же

  11. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

      Да какие уведомления? я вообще не пойму! Ни о каких уведомлениях речь и не шла в статье. После заполнения формы - данные, полученные из нее отправляются на почту. Какие еще уведомления? Смска? так для этого есть спец сервисы, или в настройках почтового ящика смотри, если поддерживает твой почтовый сервис) Это статья о МОДАЛЬНОМ ОКНЕ. Ты говорил, что форму делал по другой статье. Вот возьми ту форму, и вставь в это модальное окно.

  12. Дмитрий Давыдов

    Привет! Пытаюсь реанимировать заброшенный сайт __http://xn--80aknjg4g.name/. И как раз дошел до этих кнопок. Там уже установлены несколько разных форм. Но они не активны. Код самих форм нашел, но не пойму как активировать эти кнопки. Я так понимаю, что должен быть прописан емайл админа как минимум. Но в index.html кода с каким либо емайлом нет вообще. У тебя в коде тоже нет емайла админа. Как тогда приходят уведомления, не пойму?

    1. Дмитрий Давыдов

      Привет. Эта статья о Модальном окне, а не об отправке письма на почту. смотри тут https://smartlanding.biz/sozdanie-formy-obratnoj-svyazi.html

  13. Дмитрий Давыдов

    Статья называется "Как сделать кнопку «Заказать обратный звонок»". Тогда почему не написано куда письма уходят? Запросы с формы? Статья не полная получается. Несколько часов потратил зря!!!

    1. Дмитрий Давыдов

      Здравствуйте! Первая строчка статьи говорит, что речь пойдет о модальных окнах.
      Но все равно спасибо, что помогаете находить подобные недочеты, пытаюсь делать для новичков, поэтому с удовольствие обновлю статью и добавлю ссылки непосредственно пост. Просто думал, что и так понятно из того, что есть только html и css, что данные априори не могут отправится НИКУДА.

      На что было потрачено несколько часов?
      На блоге 4 статьи о том, как реализовать передачу данных из формы:
      https://smartlanding.biz/sozdanie-formy-obratnoj-svyazi.html
      https://smartlanding.biz/kontaktnaya-forma-s-chekboksami.html
      https://smartlanding.biz/otpravka-formy-bez-perezagruzki-stranicy.html
      https://smartlanding.biz/forma-otpravki-fajlov-s-sajta.html

  14. Дмитрий Давыдов

    Спасибо за ссылки, буду изучать.

  15. Дмитрий Давыдов

    Пытаюсь монтировать скрипт. Получается, но фигово :)
    Не понимаю, куда уходят письма, вроде бы всё работает, а писем нет.
    Сейчас на сайте стоит _redconnect.ru если это важно.

    1. Дмитрий Давыдов

      У вас не создано формы как таковой на сайте. Нет тега

      <form></form>

      , поэтому не работает.

  16. Дмитрий Давыдов

    очень удобный модуль Redconnect. Этот модуль сразу организует звонок
    клиенту и менеджеру на телефон (клиенту на указанный, енеджеру на
    прописанный в модуле), вместо спама на почту, либо смсок на мобильный.
    Как результат - звонки не теряются из-за человеческого фактора. Плюс
    есть "ко-брауз" через программу виджета сразу видишь что делает на сайте
    клиент, что в корзину кладет и т.д. вплоть до перемещения курсора.
    почитать про него можно на сайте у них: _http://redconnect.ru/

    1. Дмитрий Давыдов

      Писал статью о подобных сервисах: https://smartlanding.biz/onlajn-konsultant.html

    2. Дмитрий Давыдов

      Агась, только в статье вы говорите про redhelper - онлайн консультант. А RedConnect - это их виджет обратного звонка. У них еще RedMetric есть, тоже кртая http://redhelper.ru/my/data/RedMetric-presentation.pdf?v=3

  17. Дмитрий Давыдов

    Добрый день!
    Подскажите пожалуйста, как сделать так, что бы после отправки сообщения, не перебрасывало на главную страницу а оставаться на той же на которой и был?

    1. Дмитрий Давыдов

      Не в ту статью написал)

    2. Дмитрий Давыдов

      Привет. Ну смотри, вот статья о форме без перезагрузки страницы: https://smartlanding.biz/otpravka-formy-bez-perezagruzki-stranicy.html

  18. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

      Так приходить и не должно. Статья о модальном окне, форма взята для примера. Статья же с этого начинается!!! Для того, чтобы настроить отправку данных почитай эти статьи:
      https://smartlanding.biz/sozdanie-formy-obratnoj-svyazi.html

      https://smartlanding.biz/otpravka-formy-bez-perezagruzki-stranicy.html

      https://smartlanding.biz/kontaktnaya-forma-s-chekboksami.html

  19. Дмитрий Давыдов

    Скачал искодник, сss файл пуст

  20. Дмитрий Давыдов

    Может кому интересно будет. Я уже сделал готовое решение для обратного звонка goodbeep.com Можно настроить цвет, текст, размер, есть всплытие окна при попытке закрыть сайт.

    1. Дмитрий Давыдов

      Завязывай спамить, в двух темах уже рекламируешь свой goodbeep. Пусть народ оценивает, стоит ли им пользоваться или нет.

  21. Дмитрий Давыдов

    У вас что, лимит на длину статей? Почему бы не выложить css в статью?

    1. Дмитрий Давыдов

      Потому, что тут используется less, и потому, что мне не хочется делать портянку из статьи. Статья вообще тестовая была, нужно переписать ее. Но css в статью выкладывать - не планирую, зачастую это довольно много строк кода и смысла в этом нет. Другое дело, что можно на codepen или cssdesk выкладывать, но пока руки не дошли.

  22. Дмитрий Давыдов

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

  23. Дмитрий Давыдов

    Может подскажите пожалуйста? (я в это деле новичек, но вдруг не составит труда подсказать мне.)Как мне вставить кнопку обратного звонка в свой основной файл index.html . Что бы там среди всего была кнопка в нужном месте, у меня джае получилось это сделать, вроде, но сама форма оказывается за шапкой почему то, как можно это исправить:

    1. Дмитрий Давыдов

      Ну не совсем понятно, как вам объяснить, необходимо найти место, в котором хотите видеть кнопку и туда поместить. Для этого необходимо совсем немного понимать html. В инспекторе (f12 в гугл хроме, мазиле, везде... ). Смотрите, как называется родительский класс или id той области, в которой хотели бы видеть кнопку и туда помещаете, потом, при помощи любого текстового редактора. И позиционируете при пощи css стилей (margin, padding и т.д.).

  24. Дмитрий Давыдов

    как это поставить на cms wordpress

    1. Дмитрий Давыдов

      Разрешить wordpress исполнять php код внутри статьи, а дальше как описано выше

  25. Дмитрий Давыдов

    Блин, все круто, но есть одно но: мне эта кнопка нужна для того чтобы внедрить ее на чистый HTML-одностраничник. Никаких баз данных, никаких php. Кнопка работает (визуально), но как мне на HTML прикрутить к ней свой ящик?
    Буду оч. благодарен за ответ

    1. Дмитрий Давыдов

      Это просто модальное окно, о каком ящике, php может идти речь. В начале статьи же написал, что реализация модального окна. То, что вам нужно, лежит тут: https://smartlanding.biz/ajax-forma-v-modalnom-okne.html

  26. Дмитрий Давыдов

    я нажимаю на кнопку а модальное окно не открываеться, сайт еще в не в интернете а просто в штмл , подскажи что такое

    1. Дмитрий Давыдов

      Вы же less скомпилировали в css? Попробуйте лучше этот вариант: https://smartlanding.biz/forma-obratnoj-svyazi-v-modalnom-okne.html

  27. Дмитрий Давыдов

    Для тех, кто не хочет разбираться с кодом также могу посоветовать еще 1 сервис - __https://excitel.net/. После регистрации будет предоставлен код кнопки, который нужно будет добавить на свой сайт.
    В настройках в данном сервисе можно изменить отображение кнопки относительно сайта (слева, справа, в тексте). Можно подобрать внешний вид кнопки под дизайн своего сайта, изменить текст на кнопке.
    После добавления кнопки на сайт и авторизации оператора в браузере или в приложении на компьютере/телефоне, можно принимать звонки через интернет.
    Можно настраивать время приема звонков. В нерабочее время есть возможность включить автоответчик или принимать заявки на обратный звонок.
    В разделе Статистики данного сервиса можно прослушать все совершенные звонки, оставленные голосовые сообщения или заявки на обратный звонок.
    Функционал довольно широкий и имеет множество возможностей.

  28. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

      Вот тут есть готовое решение, и тут. Может что-то и подойдет.

  29. Дмитрий Давыдов

    а как цвет поменять? (извините, я чайник....)

  30. Дмитрий Давыдов

    Ерунда полная, а не скрипт. Зачем подключать библиотеку в 100+ килобайт, когда можно в пару строк на js всё сделать. А передавать параметр через адресную строку в # это бред. Если на сайте уже есть несколько модулей каких-нибудь с подобным, то ничего работать не будет. Только время зря потратите.

    1. Дмитрий Давыдов

      Согласен, более чем. Удалить давно пора статью. На след неделе, посмотрю, переписать или удалить.

  31. Дмитрий Давыдов

    Здравствуйте!
    Подскжите как создать кнопки как на этом сайте __http://bit38.ru/kontakty (Задать вопрос, оставить заявку)

  32. Дмитрий Давыдов

    Вопрос по оплате

  33. Дмитрий Давыдов

    Рекомендую свой плагин под названием call me spoot
    __https://cms3.ru/

Добавить комментарий

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности