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

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

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

Конечно, в большинстве случаев модальные окна делают с применением 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. vanya

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

    1. dimadv7

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

  2. макс

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

    1. dimadv7

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

  3. Sansara

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

    1. dimadv7

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

  4. Mister Mike

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

  5. Mister Mike

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

    1. dimadv7

      Привет, давай по порядку. У тебя есть уже кнопка заказать обратный звонок, при клике по ней всплывает модальное окно. Теперь ты хочешь поместить туда форму из статьи 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. Mister Mike

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

    3. dimadv7

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

  6. Alexey

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

    1. dimadv7

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

  7. alexey

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

  8. Алексей

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

    1. dimadv7

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

  9. Alexey

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

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

    1. dimadv7

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

  10. алексей

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

    1. dimadv7

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

  11. алексей

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

    1. dimadv7

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

  12. kritik

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

    1. dimadv7

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

  13. Анатолий

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

    1. dimadv7

      Здравствуйте! Первая строчка статьи говорит, что речь пойдет о модальных окнах.
      Но все равно спасибо, что помогаете находить подобные недочеты, пытаюсь делать для новичков, поэтому с удовольствие обновлю статью и добавлю ссылки непосредственно пост. Просто думал, что и так понятно из того, что есть только 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. kritik

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

  15. Арина

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

    1. dimadv7

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

      <form></form>

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

  16. Анастасия

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

    1. dimadv7

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

    2. Анастасия

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

  17. Александр

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

    1. Александр

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

    2. dimadv7

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

  18. Андрей

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

    1. dimadv7

      Так приходить и не должно. Статья о модальном окне, форма взята для примера. Статья же с этого начинается!!! Для того, чтобы настроить отправку данных почитай эти статьи:
      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. dimadv7

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

  21. Юрий

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

    1. dimadv7

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

  22. Артем

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

  23. Alex

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

    1. dimadv7

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

  24. Алексей

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

    1. dimadv7

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

  25. Виталий

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

    1. dimadv7

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

  26. михаил

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

    1. dimadv7

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

  27. Yana

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

  28. Георгий

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

    1. dimadv7

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

  29. Армина

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

  30. Dark

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

    1. dimadv7

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

  31. Андрей

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

  32. TypeNize

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

  33. alex

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

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