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


Рубрика: Opencart -> Создание сайта -> Блог
Метки: | | | | | |
Просмотров: 7106
Форма обратной связи во всплывающем окне

 Студия простых и эффетивных решений продолжает работу. Сегодня я предлагаю Вам вариант ФОРМЫ ОБРАТНОЙ СВЯЗИ или ФОРМА И КНОПКА "ЗАКАЗАТЬ ЗВОНОК". Это очень привлекает посетителей и просто необходимо для сайтов с товарами или услугами. Маленькое "но" : форма работает только на тех шаблонах и CMS, где прикручен Twitter Bootstrap. Делал я её для Opencart 2, но пойдёт для любой системы, лишь бы упомянутый Bootstrap был прикручен. Если у Вас нет его, то ради одной этой формы прикручивать не стоит, поверьте мне.

 Возьмём Opencart 2.x.x к примеру. Bootstrap там уже есть по-умолчанию. Делать будем так просто, насколько это вообще возможно, т.е. ни одного лишнего скрипта, дабы не утяжелять сайт.

Как же сделать всплывающую форму обратной связи?

 Итак, в Bootstrap уже есть всё, чем он и хорош, нужно только знать, как это вывести. В принципе напрашивается вариант: пойти на сайт Bootstrap, поглядеть на пример модального окна, сдёрнуть код и вставить туда код обратной связи из contact.tpl, если мы говорим об Opencart. Однако при таком фокусе выскакивают одни ошибки, а значит нужно лезть с более глубокой правкой файлов движка. Поэтому мы сделаем сторонними файлами, просто и безопасно.  Вот такой код для модального окна:

 
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Мы Вам перезвоним</h3>
      </div>
        <div class="modal-body">
            <form id="form" class="form_online" action="mail.php" method="post">
                <div class="form-group"><label class="no">Имя</label>
                <input class="form-control required" placeholder="Как к Вам обращаться?" name="name" required="">
                </div>
                <div class="form-group">
                <label class="no">Email</label>
                <input class="form-control email" placeholder="Введите Email (это необязательно)" name="email" >
                </div>
 
                <div class="form-group">
               <label class="no">Телефон</label>
                <input class="form-control phone" placeholder="Введите номер" name="tel" required="">
                </div>
                <div class="form-group">
                <label class="no">Что Вас интересует?</label>
                <textarea class="form-control" placeholder="Задайте вопрос или укажите доп. контакты (можно оставить пустым)" name="message" ></textarea>
                </div>
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" required=""> Поставьте галочку, если Вы реальный человек
                        </label>
                      </div>
                <button type="submit" required="" class="btn btn-primary btn-lg">Отправить!</button>
            </form>
        </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">отмена</button>
      </div>
    </div>
  </div>
 

презвонить мне, в модальном окне на Bootstrap для OpencartНемного разберём. Функция required="" задаёт обязательность заполнения поля. В примере у нас четыре поля для заполнения и чекбокс. Два поля "Имя" и "Телефон", а так же чекбокс получаются обязательными, т.е. если человек их не заполнит, письмо он отправить не сможет. Ставить галочку в чекбоксе - это для защиты от спам-ботов. Вы можете или убрать функцию required="", если Вам не нужно, или добавить к другим полям.

Этот код помещаем в конец шаблона перед тегом </body> Конкретно в Opencart 2.0.x находим файл footer.tpl и туда и вставляем. Собственно, неважно, какая CMS, лишь бы Bootstrap был подключён.

 Теперь нам нужен файл, который отправит письмо. В начале у нас прописано

<form id="form" class="form_online" action="mail.php" method="post">

Создаём файл mai.php или можете любое другое название с расширением PHP , только не забудьте исправить в строчке, упомянутой выше. Содержимое я просто выдрал из какой-то уже готовой формы, можно и другие найти, не суть важно, главное бросить файл в корень сайта и не забыть прописать его. Ну вот код:

<meta http-equiv='refresh' content='2; url=http://site.ru/'>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$telef = $_POST['tel'];
$mess = $_POST['message'];
$REMOTE_ADDR = $_POST['REMOTE_ADDR'];
$to = "почта@mail.ru";
$subject = "Новый отзыв";
$message = "Имя пославшего письмо: $name.\n Электронный адрес: $email \n Номер телефона: $telef \n Сообщение: $mess .\n IP-адрес: $_SERVER[REMOTE_ADDR]";
mail ($to,$subject,$message,"Content-type:text/plain; charset = utf-8") or print "Не могу отправить письмо !!!";
echo "";
?>
<!doctype html>
<html lang="ru-RU">
<head>
    <meta charset="utf-8">
    <title>Получение письма и продолжение заказа</title>
    <style>
        body {
            background: #fff none repeat scroll 0 0;
            font-family: segoeui,arial,verdana,tahoma;
        }
        a {
            color: #ffffff;
        }
        h1 {
            color: #3498db;
            font-family: Prosto;
            font-size: 200%;
        }
        div {
            color: #000000;
            margin-top: 15%;
            text-align: center;
        }
        .small {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="main">
        <?php if(!$res): ?>
            <h1>Ваше обращение было успешно отправлено</h1>
            <p class="small">Спасибо за обращение! В ближайшее время мы Вам перезвоним</p>
        <?php else: ?>
            <h1>Сообщение не может быть отправлено</h1>
            <p class="small">Ошибка отправки: <?php echo $mail->ErrorInfo; ?></p>
        <?php endif; ?>
        <a href="/"><h1>Вернуться к сайту</h1></a>
    </div>
</body>
</html>

Видите строчку с почтой "почта@mail.ru" ? Меняйте на свою. Файл кидайте в корень сайта. Можете стили поправить, как Вам надо, если понимаете о чём я.

Самая верхняя строка:

<meta http-equiv='refresh' content='2; url=http://site.ru/'>

делает возврат на главную страницу сайта после сообщения об отправке. Измените site.ru на Ваш адрес. Цифра 2 - значит через 2 секунды, ставьте сколько нужно Вам.

Теперь как вызвать модальное окно. В Bootstrap вариантов миллион. Вот так можно:

<a data-toggle="modal" href="#myModal" ><i class="icon-plus"></i> ЗАКАЗАТЬ ЗВОНОК</a>

Это просто ссылка. Или так:

<button class="btn btn-primary navbar-btn" data-toggle="modal" data-target="#myModal">Заказать звонок</button>

Это уже основная кнопка. А если так:

<h1 class="text-center"><a href="#myModal" role="button" class="btn btn-primary btn-lg" data-toggle="modal">Contact Us</a></h1>

Это уже большущая кнопка. В общем, идите на сайт Bootstrap и смотрите варианты, берите, какой понравится. Принцип вызова модального окна с формой, думаю, ясен из примеров.

Помещаете кнопку или ссылку в нужное место на сайте и вуаля. Всё просто, красиво и современно.

А как сделать такую же форму с проверочным кодом (каптчёй) читайте в следующей статье

 

Комментариев: 4 RSS

Писали на скорую руку? Это не будет работать. Читаем http://bootstrap-3.ru/javascript.php

В footer перед нужно обрамить

Без этого кода форма будет висеть в подвале.

А как сделать чтобы на этой же странице происходило отправление формы?

Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)