Верстаем форму обратной связи с выбором элементов

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

При отправки будет всплывать окошко спасибо за заказ и на почту, которую укажем в коду придет письмо с заполненными полями.

Начинается разработка с создания каркаса html, чтобы сразу было видно в браузере результат.

Откроем в sublime text файл index.html и запустим в командной строке gulp.

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

Создаем секцию с классом s-obbrat.

Первая буква s обозначаются все секции в стилях, для упрощения тут же зададим тег style с картинкой.

Так как будет две колонки, прописываем bootstarp класс container с обязательным классом row для него.

Определяем колонки по размерам, для формы делаем col-sm-6.

Форма будет справа, поэтому переместим колонку вправо при помощи col-sm-offset-6.

Внутри положим форму с классом call.

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

Span будет, потому что класс spasibo будет перекрывать всю форму, а span будем центрировать.

Обратимся к скрипту обратной связи.

Скопируем все срытые поля.

1. project_name это имя проекта.
2. admin_email тут указываем свою почту куда приходить будут письма, письма также приходят в спам почты.
3. form_subject если несколько форм, задаем каждой имя.

Меняем в поле value названия.

Скрипт обратной связи состоит из трех файлов.

Скачать скрипт.

Оформим видимую часть.

Добавим заголовок с классом formh.

В теге p пропишем призыв к действию оставить заявку и мы вам перезвоним в течении тридцати минут.

Поля ввода могут быть как телефон или почта плюс имя.

Форма должна быть простой, никто не любит долго заполнять.

Два поля о себе и трете выбор услуги из списка.

Список делаем селектором select с name=Услуга.

Услуги в теге option.

Обязательна внизу красивая кнопка button отправить заявку.

Все содержимое сделано.

Код index.html.

В браузере видим каркас.

Плагин selectize.

Этим плагином можно настраивать выпадающий список.

Установить плагин можно bower i seletize.

Подключается в gulpfile.js и в libs.sass.

Пропишем в common.js скрипт для тега select.

Выборка $(select) тега select и подключаем плагин .selectize ().

У нас в поле выбора уже выбрана услуга, нужно сделать надпись выберите услугу.

Для этого мы пропишем в index.html еще одну опцию option с заполнеyным value disabled selected.

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

Пишем в новой опции выбрать услугу.

Теперь по умолчанию предлагается выбрать услугу.

Стилизация main.sass.

1. Начнем стилизовать главную секцию &-obrat. Изображение сейчас выходит за пределы секции. Делаем свойство background-size: contain, вмещаться в секцию. Если изображение повторяется, то пишем background-repeat: no-repeat.
2. Для класс формы call сделаем отступ сверху padding: 5% 0. position: relative, чтобы менять объекты, которые внутри.
3. Настроим поля формы у класса formh сделаем text-transform: uppercase, все заглавными буквами и margin: 0. Отступы формы зададим параметрами bootstrap col-md-5 col-md-offset-7, для больших экранов, col-sm-6 col-sm-offset-6 будет для экранов поменьше. font-weight: 800, чтобы заголовок стали жирнее буквы.
4. Делаем тег p ближе к заголовку свойством margin-top: 0.
5. Стилизуем все элементы формы input, textarea, select через запятую. Сделаем чтобы была обводка background-color: transparent. Зададим рамку border: 1px solid daken (#blue, 50%), затемним синий цвет. Делаем ячейки друг за другом display: inline-block. Добавим форме formh input, textarea, select сделаем во всю ширину width: 100% и отступы margin-top: 15px.
6. Сделаем отступ кнопки button от списка margin-top: 40px. Задать стили кнопке можно из шаблона.
7. Оформим класс, который будет всплывать spasibo. Делаем все отступы со всех сторон по нулям. Чтобы этот класс был выше других зададим z-index: 10. display: none, сделаем чтобы не было видно, а в скрипте напишем когда будет появляться этот класс. Перейдем к оформлению span, чтобы текст был по цетру margin: auto. Чтобы при появлении надписи спасибо за заявку размывался задний план мы назначим свойство всему, что идет после spasibo пропишем &~* это означает выбрать все и назначить свойства opacity: .5 и filter: blur (10px), когда форма будет активна &:active.

Код css.

Секция со стилями в браузере.

Настроим скрипт почты.

Открываем скаченный скрипт из формы обратной связи script.js в sublime text и копируем все содержание в common.js.

Применим скрипт к форме с классом call $(form.call).

Переменной th назначается $(this), которая берет класс call $(form.call).

Дальше делаем плавное появление формы.

Пишем в done (function ()) вначале ищем find (.spasibo) и добавляем класс, который добавит анимацию addClass (active).

Добавим свойство, которое нет в стилях, для отображения css (display, flax) и скрываем его hide (), затем сразу покажем fadeIn ().

Настроим setTimeout (function ()).

После трех секунд нам нужно убрать класс active для этого ищем $(th).find (.spasibo) и убираем класс removeClass (active). Скрываем его fadeOut ().

Скрипт в common.js.

Размещаем сверстанный блок на хостинге.

Закачали на хостинг в интернет блок и проверяем работоспособность отправки писем.

Добавим адаптивность.

Для разрешения экрана 992 можно сделать, чтобы секция с заявкой перекрыла картинку.

Для этого откроем media.sass и добавим у секции s-obrat элемент &::before с размером на всю ширину width: 100%.

Код в media.sass

Посмотрим как полчилось в браузере.