Добавим блок шапки с красивой кнопкой в чистый шаблон gulp.
Пропишем внизу класс hidden, в котором будет писать все скрытые формы.
Создадим форму с классом call и второй класс popup для подключения плагина magnific-popup, как в этой статье.
У формы будет id=call, этот якорь мы пропишем в ссылку у кнопки href=#call.
Самый верхний див у формы всегда с классом spasibo спасибо за заявку, надпись будет всплывать после отправки формы.
Дальше скопируем все поля из скрипта обратной связи.
Будет пять input, три будут скрыты с классом hidden, заполним их поля value, это то что будет обрабатывать скрипт и два поля для заполнения имя и телефон.
Добавим заголовок h3 заказать звонок.
Поля для ввода добавим в тег label и пропишем span у каждого поля.
В placeholder пропишем введите ваше имя и телефон.
В сплывающей форме будет кнопка, укажем ей такой же класс button и назовем отправить.
Чтобы потом кнопу установить в центре добавим новый див с классом text-center.
Код 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 29 30 31 32 33 34 35 36 37 38 |
<div class="header-flex"> <div class="flex-centr"> <div class="container"> <div class="row"> <div class="col-sm-7"> <div class="header-compos"> <div class="items"> <h1 class="h1">Заголовок</h1> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. По всей рукописи моей переписывается своих!</p> <a href="#call1" class="button">Заказать звонок</a> </div> </div> </div> </div> </div> </div> </div> <div class="hidden"> <form class="call popup" id="call1"> <div class="spasibo">Спасибо за заявку.<br> Наши менеджеры свяжутся с вами в ближайшее время.</div> <input type="hidden" name="project_name" value="Name"> <input type="hidden" name="admin_email" value="admin@mail.ru"> <input type="hidden" name="form_subject" value="Заявка с сайта"> <h3 class="h3">Заказать звонок</h3> <label> <span>Ваше имя</span> <input type="text" name="Name" placeholder="Введите ваше имя..."><br> </label> <label> <span>Ваш Телефон</span> <input type="text" name="Phone" placeholder="Введите ваш телефон..." required><br> </label> <div class="text-center"> <button class="button">Отправить</button> </div> </form> </div> |
Стилизуем форму.
У класса call сделаем заголовок по центру text-align: center, укажем побольше размер и синий цвет.
Для тегов label, input все поля растянем до краем width: 100%.
Input добавим рамку border: 2px solid #1f62e9 и сделаем отступы от краев.
Чтобы не прилипал текст padding: 5px 10px.
У span будет поменьше шрифт font-size: 14px и цвет фиолетовый.
Посмотрим на официальном сайте magnific-popup в пункте меню css animation, какие параметры задаются у формы и скопируем их в main.sass.
Сделаем всплывающее окно спасибо за заявку.
У спасибо будет position: absolute, во всю ширину и высоту width: 100%.
- Чтобы картинка спасибо за заявку выезжала сверху сделаем top: -100%. Изначально она не будет видна opacity: 0.
- Добавим дополнительный класс &.active, у которого top: 0 и картинка будет видна opacity: 1.
Код main.sass.
|
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
.button display: inline-block border: none color: #fff text-decoration: none background-color: #b641b0 padding: 15px 55px font-size: 20px text-transform: uppercase font-weight: 600 letter-spacing: 3px border-radius: 25px text-align: center position: relative outline: none &::after transition: background-color .2s ease position: absolute content: '' height: 6px bottom: 0 width: 92% background-color: darken(#b641b0, 50%) opacity: .18 border-bottom-left-radius: 25px border-bottom-right-radius: 50px left: 12px &:focus, &:hover text-decoration: none color: #fff &:hover background-color: lighten(#b641b0, 5%) &::after opacity: .22 &:active background-color: darken(#b641b0, 5%) &::after opacity: .32 .items h1 text-transform: uppercase font-weight: 100 font-size: 50px margin: 0 border-bottom: 1px solid #000 .header-flex .button margin-top: 20px .popup background: white padding: 20px 30px text-align: left max-width: 400px margin: 40px auto position: relative .call position: relative h3 font-size: 30px text-align: center color: #1f62e9 label, input display: block width: 100% input border: 2px solid #1f62e9 padding: 5px 10px label margin-bottom: 5px span font-weight: bold font-size: 14px color: #b641b0 .text-center text-align: center .spasibo position: absolute left: 0 width: 100% height: 100% background-color: #FFF z-index: 3 padding: 80px font-weight: 800 display: flex margin: auto opacity: 0 top: -100% &.active top: 0 opacity: 1 |
Скрипт для формы common.js.
Скопируем скрипт с официального сайта magnific-popup, там где брали стили для формы.
Укажем класс ссылки button в magnificPopup ().
- После отправки письма сразу добавляем класс active th.find (.spasibo).addClass (active).
- Через три секунды убираем этот класс th.find (.spasibo).removeClass (active) и закрываем форму $.magnificPopup.close ().
Код common.js
|
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 |
$(function() { $('.button').magnificPopup({ type: 'inline', fixedContentPos: false, fixedBgPos: true, overflowY: 'auto', closeBtnInside: true, preloader: false, midClick: true, removalDelay: 300, mainClass: 'my-mfp-slide-bottom' }); $("form").submit(function() { //Change var th = $(this); $.ajax({ type: "POST", url: "/mail.php", //Change data: th.serialize() }).done(function() { th.find(".spasibo").addClass("active"); setTimeout(function() { // Done Functions th.find(".spasibo").removeClass("active"); th.trigger("reset"); $.magnificPopup.close(); }, 3000); }); return false; }); }); |