Форма заявки и обратной связи для сайта
31 август 2015

Форма заявки и обратной связи для сайта

Пример готовой формы для сбора заявок с сайта + исходный код (css, php, html)

КАК ДОБАВИТЬ ФОРМУ ОБРАТНОЙ СВЯЗИ НА САЙТ

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

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

Для чего нужна форма обратной связи на сайте?

Форма обратной связи служит для отправки общений владельцу сайта от посетителей.
В специальные поля вводятся специальные данные (имя, электронная почта, текст). Для отправки сообщения на е-мейл владельцу сайта, необходимо нажать на кнопку «Отправить», может быть и другой вариант.


Ещё один плюс в пользу формы обратной связи – возможность сохранить свой е-мейл в тайне от спамеров.
В современном мире спам, это настоящий бич, который заставляет прятать е-мейл от посторонних глаз за семью печатями. Спам боты круглосуточно рыскают по сайтам в поисках новых электронных адресов для отправки на них спама. Если он найдёт е-мейл владельца сайта, то на этот адрес начнут сыпаться кучи нежелательной корреспонденции. В скором времени, на нём будет невозможно найти действительно нужную почту.

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

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

СОЗДАЕМ ФОРМУ ОБРАТНОЙ СВЯЗИ НА HTML

Итак, допустим у вас уже есть сайт, и вы хотите создать форму, при заполнении которой, пользователь сможет получить от вас обратную связь. Для этого, в первую очередь создается сам каркас с использованием html, css и php кода.

Вставляем в нужное место на сайте следующий код:


<div id="inline">
<h2>Онлайн заявка</h2>
<form id="contact" action="#" method="post" name="contact">
<input id="name" class="txt" name="name" type="name" placeholder="Ваше имя" />
 <input id="phone" class="txt" name="phone" type="phone" placeholder="Ваш телефон" /> 
<input id="email" class="txt" name="email" type="email" placeholder="Ваш e-mail" /> 
<textarea id="msg" class="txtarea" name="msg" placeholder="Ваше сообщение:"></textarea>
 <button id="send">Отправить</button>
</form>
</div>

По желанию вы можете добавить дополнительные поля для ввода информации, либо убрать уже имеющиеся. Настоятельно не рекомендую вам использовать в подобных формах капчу, либо другие защиты от ботов, что затруднит пользователю заполнение формы.

Вставили код и получилось вот так:

Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили (готовая html верстка формы обратной связи):


/* Форма обратной связи */
#inline {
margin-left: 30px;
    width: 80%;
    margin: 0 auto;
    background: #fff;
    padding: 10px 20px;
}
.txt { 
    display: inline-block;
    color: #676767;
    width: 190px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 5px 9px;
    font-size: 15px!important;
    line-height: 1.4em;
}
.txtarea { 
    display: inline-block;
    color: #676767;
    width: 617px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 5px 9px;
    font-size: 15px!important;
    line-height: 1.4em;
    height: 80px;
}
.txt:focus, .txtarea:focus {
 border-style: solid; 
 border-color: #bababa; 
 color: #444; 
 }
input.error, textarea.error { 
    border-color: #973d3d; 
    border-style: solid; 
    background: #f0bebe; 
    color: #a35959; 
    }
input.error:focus, textarea.error:focus { 
    border-color: #973d3d; 
    color: #a35959;
     }
#send { 
    color: #FFFFFF;
    display: block;
    cursor: pointer;
    padding: 5px 11px;
    font-size: 1.2em;
    border: solid 1px #F9F9F9;
    border-radius: 2px;
    background: #70C6B9;
    width: 210px;
    margin-bottom: 20px;
}
#send:hover {
    background: #979797;
}
/* Форма обратной связи */

Так уже гораздо лучше. В любом случае, форму вам надо будет подстраивать под общий дизайн сайта, поэтому у вас она в конечном итоге будет отличаться от моей.

Далее мы можем подключить маску для поля ввода номера телефона, которая визуально облегчит ввод для пользователя.

Выглядит это вот так:

Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.

Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.

<script type="text/javascript" src="js/jquery.maskedinput.js"></script>

Подключаем скрипт перед закрывающимся тегом . Не забудьте поменять путь к файлу на свой.

Хорошо, форма обратной связи создана, стили настроены, теперь нужно повестить на нее обработчик, чтобы уведомления приходили вам на почту.

Для этого перед закрывающимся тегом вставьте следующий скрипт:


<script type="text/javascript">
  function validateEmail(email) { 
    var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[ [0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return reg.test(email);
  }
 
  $(document).ready(function() {
    $(".modalbox").fancybox();
    $("#contact").submit(function() { return false; });
    $("#send").on("click", function(){
      var emailval  = $("#email").val();
      var namevl  = $("#name").val();
      var phonevl  = $("#phone").val();
      var msgval    = $("#msg").val();
      var msglen    = msgval.length;
      var mailvalid = validateEmail(emailval);
 
      if(mailvalid == false) {
        $("#email").addClass("error");
      }
      else if(mailvalid == true){
        $("#email").removeClass("error");
      }
  if(mailvalid == false) {
        $("#name").addClass("error");
      }
      else if(mailvalid == true){
        $("#name").removeClass("error");
      }
      if(mailvalid == false) {
        $("#phone").addClass("error");
      }
      else if(mailvalid == true){
        $("#phone").removeClass("error");
      }
      if(msglen < 4) {
        $("#msg").addClass("error");
      }
      else if(msglen >= 4){
        $("#msg").removeClass("error");
      }
      
      if(mailvalid == true && msglen >= 4) {
        // если обе проверки пройдены
        // сначала мы скрываем кнопку отправки
        $("#send").replaceWith("<em>отправка...</em>");
        $.ajax({
          type: `POST`,
          url: `sendmessage.php`,
          data: $("#contact").serialize(),
          success: function(data) {
            if(data == "true") {
              $("#contact").fadeOut("fast", function(){
                $(this).before("<p><strong>Успешно! Ваше сообщение отправлено  :)</strong></p>");
                setTimeout("$.fancybox.close()", 1000);
              });
            }
          }
        });
      }
    });
  });
</script>

Как работает этот скрипт?

  1. Производит проверку введенного e-mail.
  2. Указывает поля, с которыми будет работать.
  3. Проверяет эти поля на заполнения. В случае, если обязательные поля не указаны – выдает сообщение о том, что их нужно заполнить.
  4. Обрабатывает введенную информации и инициирует отправку уведомления на почту.
  5. Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax.

Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.


<?php
$sendto   = "mail@mail.ru"; // Обязательно измените e-mail на свой
$usermail = $_POST[`email`];
$username = $_POST[`name`];
$userphone = $_POST[`phone`];
$content  = nl2br($_POST[`msg`]);
// Формирование заголовка письма
$subject  = "Новое сообщение";
$headers  = "From: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";
// Формирование тела письма
$msg  = "<html><body style=`font-family:Arial,sans-serif;`>";
$msg .= "<h2 style=`font-weight:bold;border-bottom:1px dotted #ccc;`>Новое сообщение</h2>\r\n";
$msg .= "<p><strong>Имя:</strong> ".$username."</p>\r\n";
$msg .= "<p><strong>Номер телефона:</strong> ".$userphone."</p>\r\n";
$msg .= "<p><strong>Почта:</strong> ".$usermail."</p>\r\n";
$msg .= "<p><strong>Сообщение:</strong> ".$content."</p>\r\n";
$msg .= "</body></html>";

// отправка сообщения
if(@mail($sendto, $subject, $msg, $headers)) {
	echo "true";
} else {
	echo "false";
}
?>

Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.

ВСПЛЫВАЮЩАЯ ФОРМУ ОБРАТНОЙ СВЯЗИ ДЛЯ САЙТА

Бывают случаи, когда нужна именно всплывающая форма, которая открывается при нажатии на кнопку. Сделать ее очень просто. В качестве примера возьмем форму, созданную нами ранее и будет работать с ней. Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.


<link rel="stylesheet" type="text/css" media="all" href="fancybox/jquery.fancybox.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>

Добавьте эти строчки перед закрывающимся тегом body, только поменяйте путь к файлам на свой. Далее создаем кнопку, при клике на которую будет вызываться форма.


<a href=”#inline” class=”modalbox”>Обратный звонок</a>

И придаем ей стили.


.modalbox {
    color: #FFFFFF;
    display: block;
    cursor: pointer;
    padding: 10px 11px;
    font-size: 1.2em;
    border: solid 1px #F9F9F9;
    border-radius: 2px;
    background: #70C6B9;
    width: 210px;
    text-decoration: none;
    text-align: center;
    margin:0 auto 20px;
}
.modalbox:hover {
    background: #979797;
}

Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=»#inline».

Без этого всплывающая форма не будет открываться на сайте. После чего прячем созданную нами ранее форму, чтобы она открывалась во всплывающем окне.

Для этого нужно заменить стили #inline со старых на новые.


#inline {
  display:none;
  margin-left: 30px;
    width: 80%;
    margin: 0 auto;
    background: #fff;
    padding: 10px 20px;
}

В итоге получаем вот такую кнопку.

При нажатии на которую открывается всплывающее окно с обратной связью.

Опять же, стили, расположение полей и элементов можно менять так, как вам будет нужно. К примеру, для обратного звонка с сайта достаточно будет оставить всего 2 поля – имя и телефон, а остальные поля убрать.

Не забывайте, что для того, чтобы форма работала, в конце сайта нужно будет добавить обработчик, который опубликован выше, и загрузить в корень сайта файл sendmessage.php.

Довольно часто бывает такая проблема, при которой сквозная форма на сайте, перестает отправлять на внутренних страницах. Для того, чтобы этого не происходило, указывайте в обработчике полный пусть к файлу sendmessage.php. Например, вот так:

url: `http://site.ru/sendmessage.php`

Скачать исходные файлы форм обратной связи.

Ключевые слова статьи: добавить форму обратной связи на сайт, верстка формы обратной связи, форма обратной связи html, форма обратной связи php, форма обратной связи почта, добавить форму обратной связи, css форма обратной связи, форма обратный звонок, виджет обратный звонок.

Комментарии

ОтменитьДобавить комментарий