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

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

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

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

  • dimadv7

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

    Ответить
  • Yana

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

    Ответить
  • Георгий

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

    Ответить
  • dimadv7

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

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

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

    Ответить
  • Dark

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

    Ответить
  • dimadv7

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

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

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

    Ответить
  • TypeNize

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

    Ответить
  • alex

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

    Ответить

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

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