Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Всплывающая форма обратной связи


Всплывающая форма обратной связи

Добавим блок шапки с красивой кнопкой в чистый шаблон gulp.

Пропишем внизу класс hidden, в котором будет писать все скрытые формы.

Создадим форму с классом call и второй класс popup для подключения плагина magnific-popup, как в этой статье.

У формы будет id=call, этот якорь мы пропишем в ссылку у кнопки href=#call.

Самый верхний див у формы всегда с классом spasibo спасибо за заявку, надпись будет всплывать после отправки формы.

Дальше скопируем все поля из скрипта обратной связи.

Будет пять input, три будут скрыты с классом hidden, заполним их поля value, это то что будет обрабатывать скрипт и два поля для заполнения имя и телефон.

Добавим заголовок h3 заказать звонок.

Поля для ввода добавим в тег label и пропишем span у каждого поля.

В placeholder пропишем введите ваше имя и телефон.

В сплывающей форме будет кнопка, укажем ей такой же класс button и назовем отправить.

Чтобы потом кнопу установить в центре добавим новый див с классом text-center.

Код index.html

Стилизуем форму.

У класса call сделаем заголовок по центру text-align: center, укажем побольше размер и синий цвет.

Для тегов label, input все поля растянем до краем width: 100%.

Input добавим рамку border: 2px solid #1f62e9 и сделаем отступы от краев.

Чтобы не прилипал текст padding: 5px 10px.

У span будет поменьше шрифт font-size: 14px и цвет фиолетовый.

форма обратной связи css

Посмотрим на официальном сайте magnific-popup в пункте меню css animation, какие параметры задаются у формы и скопируем их в main.sass.

на официальном сайте magnific-popup

Сделаем всплывающее окно спасибо за заявку.

У спасибо будет position: absolute, во всю ширину и высоту width: 100%.

  1. Чтобы картинка спасибо за заявку выезжала сверху сделаем top: -100%.  Изначально она не будет видна opacity: 0.
  2. Добавим дополнительный класс &.active, у которого top: 0 и картинка будет видна opacity: 1.

Сделаем всплывающее окно спасибо за заявку

Код main.sass.

Скрипт для формы common.js.

Скопируем скрипт с официального сайта magnific-popup, там где брали стили для формы.

Укажем класс ссылки button в magnificPopup ().

  • После отправки письма сразу добавляем класс active th.find (.spasibo).addClass (active).
  • Через три секунды убираем этот класс th.find (.spasibo).removeClass (active) и закрываем форму $.magnificPopup.close ().

Код common.js

Комментариев нет