Всплывающая контактная форма Быстрый заказ для Opencart

Всплывающая контактная форма Быстрый заказ для Opencart

Я уже рассказывал, как сделать всплывающую форму обратной связи в модальном окне вот в этой статье. Там для защиты от спам-ботов используется вариант просто ПОСТАВЬТЕ ГАЛОЧКУ, ЕСЛИ ВЫ ЧЕЛОВЕК. Сразу получил просьбы сделать такую же, но с каптчёй или проверочным кодом, чтобы понадёжнее защитить от спама. Ну вот здесь я и расскажу, как сделать такую форму. Назвать её можно "Заказать звонок", "Перезвонить мне" или "Быстрый заказ". Ну, думаю, ясно, что использовать можно как угодно. Ориентироваться буду на Opencart 2, но ставить форму можно практически на любой сайт, будь то Wordpress или Joomla, лишь бы шаблон был сделан с применением Bootstrap.

Как сделать всплывающее модальное окно в Opencart 2.0.x?

вывод модального окна в Bootstrap У нас подключён Bootstrap, вывод модали делается в нём таким кодом:

<code><div class="modal">   <div class="modal-dialog">     <div class="modal-content">       <div class="modal-header">         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>         <h4 class="modal-title">Modal title</h4>       </div>       <div class="modal-body">         <p>One fine body…</p>       </div>       <div class="modal-footer">         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>         <button type="button" class="btn btn-primary">Save changes</button>       </div>     </div>   </div> </div></code>

Выглядеть будет как на картинке. Достаточно поместить в конец файла footer или просто в конец шаблона перед тегом </body> и где-нибудь вывести кнопку вызова.

ссылкой:

<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>

Быстрый заказ для Opencart

Это основа. теперь приделаем нужные нам поля формы. Я ориентируюсь на Opencart, но специально не создаю модуль, а предлаю универсальное решение для различных CMS и сайтов. Вот готовый код для формы обратной связи в модальном окне, который помещаем, как и говорил, перед закрывающим </body>:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h1 id="myModalLabel">Мы Вам перезвоним</h1>
      </div>
        <div class="modal-body">
<form action="http://site.ru/options.php" method="post">
 <form class="form-horizontal col-sm-12">
    <div class="form-group">
          <label>Имя</label>
  <input class="form-control required" placeholder="Как к Вам обращаться?" data-placement="top" data-trigger="manual" data-content="Имя должно быть длиной не менее 3-х символов." type="text" name="fio" required="" ></div>
<div class="form-group">
<label>Номер телефона:</label>
 <input class="form-control phone" placeholder="Укажите Ваш телефон 8 xxx xxx xx xx" type="text" name="email" required=""></div>
 <div class="form-group">
 <label>Тема вопроса:</label>
 <textarea class="form-control" placeholder="Что Вас интересует.." type="text" name="ask"
required=""></textarea></div>
 <div class="form-group">
<label>Введите числа с картинки: </label>
        <?php
        $i=1;
        do
        {
        $num[$i] = mt_rand(0,9);
        echo "<img src='img/".$num[$i].".gif' border='0' align='bottom' vspace='5px'>";
        $i++;
        }
        while ($i<6);
        $captcha = $num[1].$num[2].$num[3].$num[4].$num[5];
        ?>
<input name="captcha" type="hidden" value="<?php echo $captcha ;?>">
<input name="pr" style=" margin-bottom:11px" type="text" size="6" maxlength="4"></div>
          <div class="form-group">
          <button type="submit" class="btn btn-success pull-right">Отправить!</button>
          <button class="btn" data-dismiss="modal" aria-hidden="true">отмена</button>
          </div>
         </form>
        </div>
    </div>
  </div>
</div>
</div>

форма обратной связи для Opencart в модальном окне, быстрый заказВот так будет выглядеть наша форма ЗАКАЗАТЬ ЗВОНОК, или озаглавьте как Вам нужно.  Три поля: ИМЯ, ТЕЛЕФОН, СООБЩЕНИЕ и проверочная captcha из 5 цифр.

Поясню немного. Хотя в нашей форме и будет проверка на правильность заполненности всех полей (а к заполнению обяхательны именно все), но лучше сделать подсказки, чтобы человек каждый раз не вводил заново при ошибке или невнимательности. Это будет удобней и эстетичней. Поэтому в конце каждого поля стоит required="" , подсказка для заполнения.

Вот этот код :

        while ($i<6);

        $captcha = $num[1].$num[2].$num[3].$num[4].$num[5];

отвечает за то, сколько цифр будет выводиться в каптче. Т.е. хотите больше, правьте. Строка:

<form action="http://site.ru/options.php" method="post">

 нуждается в правке. Вы должны прописать адрес СВОЕГО сайта. За отправку, как видим, отвечает файл options.php Вот и создаём его с таким содержимым:

<meta http-equiv='refresh' content='2; url=http://site.ru/'>
<meta charset="UTF-8" />
<title>Сообщение отправлено</title>
<?php
/* Проверяем существуют ли переменные, которые передала форма обратной связи.
   Если не существуют, то мы их создаем.
   Если форма передала пустые значения мы их удаляем */
if (isset($_POST['fio'])) {$fio = $_POST['fio']; if ($fio == '') {unset($fio);}}
if (isset($_POST['ask'])) {$ask = $_POST['ask']; if ($ask == '') {unset($ask);}}
if (isset($_POST['email'])) {$email = $_POST['email']; if ($email == '') {unset($email);}}
if (isset($_POST['pr'])){$pr = $_POST['pr']; if ($pr == '') {unset($pr);}}
if (isset($_POST['captcha'])){$captcha = $_POST['captcha'];}
/* Проверяем заполнены ли все поля */
if (isset($fio) &&  isset($email) &&  isset($ask) && isset($pr))
{
/* Убираем все лишние пробелы, а также преобразуем все теги HTML в символы*/
$fio = htmlspecialchars(trim($fio));
$email = htmlspecialchars(trim($email));
$ask = htmlspecialchars(trim($ask));
/* Проверяем правильность ввода капчи */
  if ($captcha == $pr)
  {
/* Формируем сообщение */
$address = "email@site.ru";
$sub = "Сообщение с сайта";
$mes = "Автор назвался: $fio \nОставил такой телефон: $email \nТема вопроса: $ask \n ";
/* Отправка сообщения */
$verify = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$fio");
      if ($verify == 'true')
     {
       echo "<body>
<div style='margin-top: 30px'><table border='0' width='450' align='center' cellpadding='20' cellspacing='6'>
<tr>
<td>
<div style='margin'><div align='center' style='color:#3498db; font-size:24px;'>Спасибо за обращение! Мы перезвоним Вам в самое ближайшее время и ответим на все интересующие Вас вопросы!</div>
<p><div align='center' style='color:#FFFFFF' >Спасибо за покупку!</div>
<p style='color:#fff'><div align='right'><i><b style='color:#444444'>C уважением, администрация - site.ru</b></i></div>
</tr>
</td>
</table></div>";
      }
      else
      {
      echo "<h1><span style='color:#d9230f'> <strong>Сообщение не отправлено!</strong></span></h1>";
      }
  }
  else
  {
  echo "<h1><span style='color:#d9230f'> <strong>Вы не правильно ввели цифры с картинки!</strong></span></h1>";
  }
}
else
{
echo "<h1><span style='color:#d9230f'> <strong>Вы заполнили не все поля!</strong></span></h1>";
}
?>

  Это тоже готовый, отрытый где-то на просторах интернета. Дал бы ссылку на автора, да не помню, где взял, так что сорри. В этом файле правим первую строку

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

 Прописываем адрес своего сайта. И строку, где пишем свой e-mail:

$address = "email@site.ru";

 Всё. Файл options.php кидаем в корень сайта. Остались ещё картинки с цифрами. Вот, нарисовал я, как мог. Если хотите, рисуйте свои. Папку img с картинками тоже кидаете в корень сайта.

Простая регистрация и качайте картинки:

Запись только для зарегистрированных

 

 

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

Добрый день, а подскажите как сделать чтоб сообщение об отправке заявки (успешное или об ошибке) отображалось в том же всплывающем окне а не на чистой странице?

А чтобы сообщение об отправке заявки (успешное или об ошибке) отображалось в том же всплывающем окне, нужно маленько по-другому. Придётся ещё статью написать. По идее-то ocmod нужно написать, да беда в том, что каждый кнопку вызова формы по-своему ставит, куда ему нужно. Так что вот этим ручным способом лучше выходит и под любую CMS с bootstrap- шаблоном.

Добрый день! В поле сообщения вывожу следующую строку

(нужно что бы автоматически подхватывать название товара и вставлять его в сообщение)

Не могу понять как вставить название переменной(name="message") Если вставить его за , то он просто попадает в текст сообщения. А если заключить в кавычки, то выводимый текст невозможно редактировать в поле сообщения. Не подскажите как решить данную проблему. Буду очень благодарен. P.S. Надеюсь я смог понятно объяснить свою проблему)

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

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

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

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

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