Делаем вначале структуру модального окна по аналогии как в статье создаем модальное окно.
Всю форму и заголовок добавим в класс тела модального окна modal-body, к этому классу добавим text-center, выравняtм все элементы по центру.
Все дивы будут в классе row.
Добавим новый класс hdl для заголовка третьего уровня h3 формы с названием, задайте ваш вопрос.
В следующей строке row содержится форма form.
- У формы обязательно будет action=send.php, файл send.php мы сделаем позже с добавлением всех полей формы.
- Во вторых у формы будет метод method=post.
- В форме будет первый input с типом невидимый type=hidden имя будет name=what, это переменная для скрипта send.php и значение value=сделать натяжной потолок, например, в этот параметр пишется название формы или для чего форма, чтобы было понятно из, какой формы пришло письмо на почту. У landing page бывает всегда несколько форм обратной связи.
- Второй input делаем во всю ширину col-xs-12. Имя будет name=name, кто отправляет форму. И добавим параметр required, чтобы нельзя было отправить форму без заполненного поля.
- Третий input номер телефона name=phone, также будет required и добавим у телефона идентификатор id=phone-mask для маски.
- Делаем textarea, где пользователь сможет задать вопрос, который его интересует, с именем name=question для php файла.
- Кнопка button для отправки формы с type=submit заказать навесной потолок. Добавим кнопку, которая будет вызывать модальное окно через параметр data-target=#modal-question, такой идентификатор должен быть у модального окна.
Получился код в 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 39 40 |
<section> <div class="container"> <div class="row"> <button type="button" class="btn btn-mod" data-toggle="modal" data-target="#modal-question">Заказать натяжной потолок</button> </div> </div> </section> <div class="modal fade" id="modal-question" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body text-center"> <div class="row"> <div class="hdl"> <h3>Задайте ваш вопрос.</h3> </div> </div> <div class="row"> <form action="send.php" method="post" class="form-question"> <input name="what" type="hidden" value="Сделать навесной потолок"> <div class="col-xs-12"> <input type="text" name="name" required placeholder="Имя..." class="form-control form-input"> </div> <div class="col-xs-12"> <input type="text" name="phone" id="phone-mask" required placeholder="Телефон..." class="form-control form-input"> </div> <div class="col-xs-12"> <textarea name="question" placeholder="Ваш вопрос..." id="" cols="30" rows="3"></textarea> </div> <div class="col-xs-12"> <button type="submit" class="button">Заказать потолок</button> </div> </form> </div> </div> </div> </div> </div> |
Стилизуем форму в модальном окне.
Сделаем отступ модального окна сверху у класса modal-dialog свойством margin-top: 10%.
Уберем у кнопки синюю обводку outline: none, когда она в фокусе &:focus.
У заголовка hdl Сделаем синий цвет.
Вынесем крестик закрытия окно за форму, для этого классу modal-header добавим отступ вверх margin-top: -40px.
Во вторых у класса самого крестика close сделаем свойства прозрачности opacity: .8, чтобы был лучше видно и сместим вправо margin-right: -30px.
Оформим input у формы, пишем класс modal-content у него input[name=phone] отступ сверху margin-top: 15px, добавим изображение телефона background-image: url (.../img/smartphone.png), изображение не должно повторяться background-repeat: no-repeat.
Отступы для картинок background-position-x: 5px и background-position-y: 5px.
Отступ у текста input зададим свойством padding: 5px 25px.
Добавим фиолетовую рамку три пикселя и сделаем прозрачность opacity: .6, но при наведении и в фокусе opacity: 1.
Копируем стили input телефона и делаем для имени пользователя, только меняем картинку на человечка.
У textarea будет рамка и такой же отступ сверху margin-top: 15px.
Последнее, это стилизуем кнопку button[type=submit] делаем также во все окно по ширине width: 100%.
Добавляем цвет синий при наведении прозрачный background-color: transparent.
Код в 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 |
.btn &:focus outline: none .hdl color: blue .modal-dialog margin-top: 10% .modal-header margin-top: -40px border-bottom: none .close text-shadow: none color: blue opacity: .8 margin-right: -30px font-size: 30px .modal-content border-radius: 0 input[name="phone"] margin-top: 15px background-image: url("../img/smartphone.png") background-repeat: no-repeat background-position-x: 5px background-position-y: 5px padding: 5px 25px border-radius: 0 border: 3px solid #b641b0 opacity: .6 &:hover &:focus opacity: 1 input[name="name"] margin-top: 15px background-image: url("../img/user.png") background-repeat: no-repeat background-position-x: 5px background-position-y: 5px padding: 5px 25px border-radius: 0 border: 3px solid #b641b0 opacity: .6 &:hover &:focus opacity: 1 textarea margin-top: 15px border: 3px solid #b641b0 button[type="submit"] border: 3px solid #b641b0 background-color: blue color: #b641b0 font-weight: bold width: 100% padding: 5px 20px text-transform: uppercase margin-top: 15px &:hover background-color: transparent color: blue |
Форма, которая получилась в модальном окне в браузере.
Делаем файл отправки почты send.php.
Форма с action=send.php и методом method=post будет обращаться к файлу, который мы сейчас сделаем.
Вначале пишем все постовые данные, которые принимаем это
- $name=$_POST[name]
- $phone=$_POST[phone]
- $what=$_POST[what]
- $question=$_POST[question]
Следующий шаг указываем почту, куда присылать письмо $to=adminemail.
Затем формируем сообщение с темой письма $subject=Заявка с сайта потолок и тело сообщения $message с указание имени, телефона, которые функцией htmlspecialchars () символы преобразуются в html.
Затем при помощи формата преобразования charset=utf-8 передаем текст.
Функция mail отправляет почту.
Последняя функция после отправки header () вызывает окно спасибо за заявку.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php $name=$_POST['name']; $phone=$_POST['phone']; $what=$_POST['what']; $question=$_POST['question']; $to="admin@yandex.ru"; $subject="Заявка с сайта потолок"; $message= "Письмо из формы <br />Пользователь хочет:" .htmlspecialchars($what)."<br /> Имя: ".htmlspecialchars($name)."<br /> Телефон: ".htmlspecialchars($phone)."<br /> Вопрос: ".htmlspecialchars($question); $headers = "From: site.ru <site-email@site.ru>\r\nContent-type: text/html; charset=utf-8 \r\n"; mail ($to, $subject, $message, $headers); header('Location: thank.html'); exit(); ?> |
Проверяем отправку почты на локальном сервере denwer, как его установить и скачать можно на официальном сайте.
После отправки почты в папке tmp у локального сервера denwer появится новая папка sendmail, в ней будут лежать все отправленные письма их посмотреть можно в outlook почте.
Также можно проверить отправку писем выгрузив форму на хостинг.