Від автора: вітаю вас, друзі. З цієї статті ви дізнаєтеся, як зробити форму Зворотній дзвінок на сайті. Ця форма досить популярна на сайтах продає тематики: інтернет-магазинах і лендингах. Форма зворотного дзвінка допомагає людині швидко задати питання менеджеру і отримати зворотній зв’язок. Приступимо?
Отже, ми з Вами будемо робити популярне нині рішення, коли спочатку сама форма зворотного дзвінка не видно на сторінці, а замість неї є якась кнопка. Клік по кнопці відкриває форму в модальному вікні і клієнтові залишається лише заповнити.
У цій статті ми створимо лише саму форму, ну а відправку і обробку форми реалізуємо вже в наступних статтях. Вихідні файли ви можете завантажити за посиланням.
Насамперед нам, звичайно ж, буде потрібно форма і кнопка для виклику цієї форми. Давайте створимо їх. Щоб не писати самому стилі, я підключу фреймворк Bootstrap і використовую його стилі. До речі, якщо Ви ще жодного разу не працювали з Bootstrap, тоді обов’язково вивчіть цей чудовий CSS фреймворк.
Ось що у нас вийшло на даному етапі:
Тепер необхідно сховати форму і показувати її в модальному вікні при кліку по кнопці. Bootstrap дозволяє зробити це гранично просто, пропонуючи компонент Modal. Тут я не буду приводити підсумковий код, його занадто багато. В исходниках ви можете поглянути на нього і використовувати у своєму проекті. А в результаті у нас вийшло на сторінці кнопка, при натисканні по якій відкривається форма в модальному вікні:
За фактом на створення такої форми зворотного дзвінка у мене пішло не більше п’яти хвилин. При цьому ми отримали симпатичне рішення, яке залишиться лише трохи оформити згідно вашим перевагам.
На цьому ми будемо завершувати поточну статтю. У наступних статтях ми реалізуємо відправку форми та її обробку на сервері. Додатково по даній темі ви можете подивитися цей урок. На цьому все. Удачі!
