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

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

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

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

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

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 55

  1. vanya

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

    • dimadv7

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

  2. макс

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

    • dimadv7

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

  3. Sansara'

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

    • dimadv7

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

  4. Mister Mike

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

  5. Mister Mike

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

    • dimadv7

      Привет, давай по порядку. У тебя есть уже кнопка заказать обратный звонок, при клике по ней всплывает модальное окно. Теперь ты хочешь поместить туда форму из статьи http://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. Несколько полей — несколько обработчиков. Если поля везде одинаковые, то можно использовать один и тот же обработчик. Но не рекомендую, так как в каждом из обработчиков, при отправке сообщения мы можем отправлять разную тему письма, в которой указывать, какая именно кнопка была нажата, и тестировать с ней. Если что, — пиши в вк, там, думаю быстрее будет, и если что, присылай исходник, попробую помочь.

    • Mister Mike

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

    • dimadv7

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

  6. Alexey

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

    • dimadv7

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

  7. alexey

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

  8. Алексей

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

    • dimadv7

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

  9. Alexey

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

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

    • dimadv7

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

  10. алексей

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

    • dimadv7

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

  11. алексей

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

    • dimadv7

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

  12. kritik

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

  13. Анатолий

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

  14. kritik

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

  15. Арина

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

    • dimadv7

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

      <form></form>

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

  16. Анастасия

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

  17. Александр

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

  18. Андрей

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

  19. Дмитрий

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

  20. Олег

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

    • dimadv7

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

  21. Юрий

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

    • dimadv7

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

  22. Артем

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

  23. Alex

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

    • dimadv7

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

  24. Алексей

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

    • dimadv7

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

  25. Виталий

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

    • dimadv7

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

  26. михаил

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

  27. Yana

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

  28. Георгий

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

    • dimadv7

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

  29. Армина

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

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