Сегодня мы продолжаем изучать создание landing-page и в данной статье я рассмотрю ключевые моменты по верстке формы заказа сайта landing-order.ru.

Первым делом, вырезаем фоновую картинку и сохраняем в папку с картинками:

Верстка формы заказа для сайта landing-order.ru

В файл index.html заносим такой код:

В файл main.css заносим такой код:

Поскольку у нас есть необходимость реагировать на вызов/закрытие всплывающего окна,  нужно добавить код в файл functions.js:

В этот же файл добавим обработчик на нажатие кнопки «отправить»:

Правильность ввода телефона мы проверяем с помощью плагина Input Mask. Для его корректной работы, нужно скачать 2 файла (inputmask.js и jquery.inputmask.js), перенести их рабочую папку и подключить в файле index.php (ОБЯЗАТЕЛЬНО после подключение библиотеки jquery!!!):

В следующий раз мы будем верстать красивые раскрывающиеся картинки — не пропустите!