Секция будет состоять из изображения слева, а справа будет сама форма с выбором видов услуг.
При отправки будет всплывать окошко спасибо за заказ и на почту, которую укажем в коду придет письмо с заполненными полями.
Начинается разработка с создания каркаса 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 будем центрировать.
Обратимся к скрипту обратной связи.
Скопируем все срытые поля.
- project_name это имя проекта.
- admin_email тут указываем свою почту куда приходить будут письма, письма также приходят в спам почты.
- form_subject если несколько форм, задаем каждой имя.
Меняем в поле value названия.
Скрипт обратной связи состоит из трех файлов.
Скачать скрипт.
Оформим видимую часть.
Добавим заголовок с классом formh.
В теге p пропишем призыв к действию оставить заявку и мы вам перезвоним в течении тридцати минут.
Поля ввода могут быть как телефон или почта плюс имя.
Форма должна быть простой, никто не любит долго заполнять.
Два поля о себе и трете выбор услуги из списка.
Список делаем селектором select с name=Услуга.
Услуги в теге option.
Обязательна внизу красивая кнопка button отправить заявку.
Все содержимое сделано.
Код index.html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<section class="s-obrat invers" style="background-image: url(img/123.jpg);"> <div class="container"> <div class="row"> <div class="col-md-5 col-md-offset-7 col-sm-6 col-sm-offset-6"> <form class="call"> <div class="spasibo"><span>Спасибо за заявку</span></div> <input type="hidden" name="project_name" value="Siten"> <input type="hidden" name="admin_email" value="admin@mail.com"> <input type="hidden" name="" value="Заявка obrat"> <input type="hidden" name="страница" value=""> <div class="call ligo"><img src="img/i1jpg" alt=""></div> <div class="formh">Оставить заявку</div> <p>Оставьте заявку и мы вам пперезвоним.</p> <input type="text" name="Name" placeholder="Ваше имя..." required><br> <input type="text" name="E-mail" placeholder="Ваш E-mail..." required><br> <input type="text" name="Phone" placeholder="Ваш телефон..."><br> <select name="Услуга"> <option value disabled selected>Выбрать услугу...</option> <option>Ремонт компьютера</option> <option>Ремонт ноутбука</option> <option>Установка ПО</option> </select> <button class="button">Отправить</button> </form> </div> </div> </div> </section> |
В браузере видим каркас.
Плагин selectize.
Этим плагином можно настраивать выпадающий список.
Установить плагин можно bower i seletize.
Подключается в gulpfile.js и в libs.sass.
Пропишем в common.js скрипт для тега select.
Выборка $(select) тега select и подключаем плагин .selectize ().
1 |
$('select').selectize(); |
У нас в поле выбора уже выбрана услуга, нужно сделать надпись выберите услугу.
Для этого мы пропишем в index.html еще одну опцию option с заполнеyным value disabled selected.
Проверяем и видим, что пропала надпись окошко стало пустое.
Пишем в новой опции выбрать услугу.
Теперь по умолчанию предлагается выбрать услугу.
Стилизация main.sass.
- Начнем стилизовать главную секцию &-obrat. Изображение сейчас выходит за пределы секции. Делаем свойство background-size: contain, вмещаться в секцию. Если изображение повторяется, то пишем background-repeat: no-repeat.
- Для класс формы call сделаем отступ сверху padding: 5% 0. position: relative, чтобы менять объекты, которые внутри.
- Настроим поля формы у класса formh сделаем text-transform: uppercase, все заглавными буквами и margin: 0. Отступы формы зададим параметрами bootstrap col-md-5 col-md-offset-7, для больших экранов, col-sm-6 col-sm-offset-6 будет для экранов поменьше. font-weight: 800, чтобы заголовок стали жирнее буквы.
- Делаем тег p ближе к заголовку свойством margin-top: 0.
- Стилизуем все элементы формы input, textarea, select через запятую. Сделаем чтобы была обводка background-color: transparent. Зададим рамку border: 1px solid daken (#blue, 50%), затемним синий цвет. Делаем ячейки друг за другом display: inline-block. Добавим форме formh input, textarea, select сделаем во всю ширину width: 100% и отступы margin-top: 15px.
- Сделаем отступ кнопки button от списка margin-top: 40px. Задать стили кнопке можно из шаблона.
- Оформим класс, который будет всплывать spasibo. Делаем все отступы со всех сторон по нулям. Чтобы этот класс был выше других зададим z-index: 10. display: none, сделаем чтобы не было видно, а в скрипте напишем когда будет появляться этот класс. Перейдем к оформлению span, чтобы текст был по цетру margin: auto. Чтобы при появлении надписи спасибо за заявку размывался задний план мы назначим свойство всему, что идет после spasibo пропишем &~* это означает выбрать все и назначить свойства opacity: .5 и filter: blur (10px), когда форма будет активна &:active.
Код css.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
.s &-obrat background-size: contain background-repeat: no-repeat &::before content: "" width: 50% right: 0 height: 100% position: absolute background-color: rgba(blue, .90) input, textarea, select .selectize-control .selectize-input, .selectize-control .selectize-input.input-active background-color: transparent border: 10px solid daken(#blue, 50%) border-botton: 3px solid daken(#blue, 50%) border-radius: 6px padding: 8px 20px display: inline-block font-size: 16px .spasibo position: absolute top: 0 left: 0 right: 0 bottom: 0 text-transform: uppercase display: none z-index: 10 span margin: auto &~* transition: all .5s ease &:active &~* opacity: .5 filter: blur(10px) .call padding: 5% 0 position: relative .formh text-transform: uppercase margin: 0 font-size: 30px color: #fff font-weight: 800 p margin-top: 0 input, textarea, select width: 100% margin-top: 15px .button margin-top: 40px |
Секция со стилями в браузере.
Настроим скрипт почты.
Открываем скаченный скрипт из формы обратной связи 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function() { $("form.call").submit(function() { var th = $(this); $.ajax({ type: "POST", url: "mail.php", data: th.serialize() }).done(function() { $(th).find(".spasibo").addClass("active").css("display", 'flax').hide().fadeIn(); setTimeout(function() { $(th).find('.spasibo').removeClass('active').fadeOut(); th.trigger("reset"); }, 3000); }); return false; }); $('select').selectize(); }); |
Размещаем сверстанный блок на хостинге.
Закачали на хостинг в интернет блок и проверяем работоспособность отправки писем.
Добавим адаптивность.
Для разрешения экрана 992 можно сделать, чтобы секция с заявкой перекрыла картинку.
Для этого откроем media.sass и добавим у секции s-obrat элемент &::before с размером на всю ширину width: 100%.
Код в media.sass
1 2 3 4 |
@media only screen and (max-width : 992px) .s-obrat &::before width: 100% |
Посмотрим как полчилось в браузере.