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

Форма обратной связи в модальном окне плюс второй способ отправки почты через скрипт

Форма обратной связи в модальном окне плюс второй способ отправки почты через скрипт

Делаем вначале структуру модального окна по аналогии как в статье создаем модальное окно.

Всю форму и заголовок добавим в класс тела модального окна modal-body, к этому классу добавим text-center, выравняtм все элементы по центру.

Все дивы будут в классе row.

Добавим новый класс hdl для заголовка третьего уровня h3 формы с названием, задайте ваш вопрос.

В следующей строке row содержится форма form.

  • У формы обязательно будет action=send.php, файл send.php мы сделаем позже с добавлением всех полей формы.
  • Во вторых у формы будет метод method=post.
  1. В форме будет первый input с типом невидимый type=hidden имя будет name=what, это переменная для скрипта send.php и значение value=сделать натяжной потолок, например, в этот параметр пишется название формы или для чего форма, чтобы было понятно из, какой формы пришло письмо на почту. У landing page бывает всегда несколько форм обратной связи.
  2. Второй input делаем во всю ширину col-xs-12. Имя будет name=name, кто отправляет форму. И добавим параметр required, чтобы нельзя было отправить форму без заполненного поля.
  3. Третий input номер телефона name=phone, также будет required и добавим у телефона идентификатор id=phone-mask для маски.
  4. Делаем textarea, где пользователь сможет задать вопрос, который его интересует, с именем name=question для php файла.
  5. Кнопка button для отправки формы с type=submit заказать навесной потолок. Добавим кнопку, которая будет вызывать модальное окно через параметр data-target=#modal-question, такой идентификатор должен быть у модального окна.

Получился код в index.html.

Стилизуем форму в модальном окне.

Сделаем отступ модального окна сверху у класса 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.

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

форма в модальном окне bootstrap

Делаем файл отправки почты send.php.

Форма с action=send.php и методом method=post будет обращаться к файлу, который мы сейчас сделаем.

Вначале пишем все постовые данные, которые принимаем это

  1. $name=$_POST[name]
  2. $phone=$_POST[phone]
  3. $what=$_POST[what]
  4. $question=$_POST[question]

Следующий шаг указываем почту, куда присылать письмо $to=adminemail.

Затем формируем сообщение с темой письма $subject=Заявка с сайта потолок и тело сообщения $message с указание имени, телефона, которые функцией htmlspecialchars () символы преобразуются в html.

Затем при помощи формата преобразования charset=utf-8 передаем текст.

Функция mail отправляет почту.

Последняя функция после отправки header () вызывает окно спасибо за заявку.

Проверяем отправку почты на локальном сервере denwer, как его установить и скачать можно на официальном сайте.

После отправки почты в папке tmp у локального сервера denwer появится новая папка sendmail, в ней будут лежать все отправленные письма их посмотреть можно в outlook почте.

Также можно проверить отправку писем выгрузив форму на хостинг.

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

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

Комментарии запрещены