Smartlanding

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

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

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

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

  • vanya

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

    Ответить
  • dimadv7

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

    Ответить
  • макс

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

    Ответить
  • dimadv7

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

    Ответить
  • Sansara'

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

    Ответить
  • dimadv7

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

    Ответить
  • Mister Mike

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

    Ответить
  • Mister Mike

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

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

    Ответить
  • Mister Mike

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

    Ответить
  • dimadv7

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

    Ответить
  • Alexey

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

    Ответить
  • dimadv7

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

    Ответить
  • alexey

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

    Ответить
  • Алексей

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

    Ответить
  • dimadv7

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

    Ответить
  • Alexey

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

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

    Ответить
  • dimadv7

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

    Ответить
  • алексей

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

    Ответить
  • dimadv7

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

    Ответить
  • алексей

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

    Ответить
  • dimadv7

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

    Ответить
  • kritik

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

    Ответить
  • dimadv7

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

    Ответить
  • Анатолий

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

    Ответить
  • 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

    Ответить
  • kritik

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

    Ответить
  • Арина

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

    Ответить
  • dimadv7

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

    <form></form>

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

    Ответить
  • Анастасия

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

    Ответить
  • dimadv7

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

    Ответить
  • Александр

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

    Ответить
  • Александр

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

    Ответить
  • dimadv7

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

    Ответить
  • Андрей

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

    Ответить
  • 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

    Ответить
  • Дмитрий

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

    Ответить
  • Олег

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

    Ответить
  • Анастасия

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

    Ответить
  • dimadv7

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

    Ответить
  • Юрий

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

    Ответить
  • dimadv7

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

    Ответить
  • Артем

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

    Ответить
  • Alex

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

    Ответить
  • dimadv7

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

    Ответить
  • Алексей

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

    Ответить
  • dimadv7

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

    Ответить
  • Виталий

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

    Ответить
  • dimadv7

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

    Ответить
  • михаил

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

    Ответить

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

Поделитесь статьей в социальных сетях, чтобы не потерять