Как создать обратную связь на сайте

Обычно, на сайте всегда есть страница с контактными данными фирмы или автора блога, а также присутствует некая форма для общения с администратором сайта. Вот эта форма и есть форма обратной связи, ее также называют и контактная форма. В этой статье я вам покажу, как реализовать данную форму с помощью html и php, используя функцию mail().

Первым делом создаем новый файл с именем contact.php. Открываем этот файл и создаем в нем html каркас нашей формы обратной связи. Внутри тега <body> пишем следующий код:

  <h1> Форма обратной связи </h1>  <form action="<?=$_SERVER[ ' PHP_SELF ' ]?>" name="myForm" method="post" >   <table>      <tr>   <td>Имя: </td>   <td>   <input type="text" name="name" required=" " valu.    
' ]?>"/> </td> </tr> <tr> <td>Сообщение: </td> <td> <textarea cols="30" rows="5" name="message" required=" "> <?=$_POST[ ' message ' ]?> </textarea> </td> </tr> <tr> <td colspan="2" > <input type="submit" name="send" value="Отправить"/> </td> </tr> </table> </form>

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

Вот как выглядит эта простая форма обратной связи:

А теперь давайте разберемся с некоторыми элементами в коде, которого написали выше.

$_SERVER[‘PHP_SELF’] – Элемент, в котором находится адрес текущего файла, относительно корня сайта.

Атрибут required=»» тега input, делает поле обязательным для заполнения. Этот атрибут появился в HTML5, поэтому он не поддерживается браузерами Safari и Internet Explorer версиями ниже 10.


Также есть такой важный момент. Мы написали внутри атрибута value такое значение <?=$_POST[’email’]?>. Это делается для того чтобы пользователь не ввел заново всю информацию в случае если при отправке формы возникнет какая не будь ошибка. Таким образом, мы упростили ему жизнь и сберегли ему нервы :).

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

После обработки, данные будут отправлены администратору на email.

Обработчик формы обратной связи

Сейчас мы займемся обработкой данных, которые были отправлены из формы. И так, c самого начала документа, перед тегом <html>, пишем следующий код:

  <?php     // Проверяем, если была нажата кнопка отправить то идем дальше.   if(isset($_POST["send"])){     /* Присваиваем переданные данные обычным переменным. Таким образом, мы застрахуемся от хостингов, которые не поддерживают глобальные переменные. */   if(isset($_POST["name"])){ $name = $_POST["name"]; }   if(isset($_POST["email"])){ $email = $_POST["email"]; }   if(isset($_POST["subject"])){ $subject = $_POST["subject"]; }   if(isset($_POST["message"])){ $message = $_POST["message"]; }     /* Объявляем переменную, в которой содержится email администратора, которому отправим письмо.    
$to = "admin152@mail.ru"; /* Перед тем как отправить письмо, проверяем, если были заполнены все поля формы. Это делается для браузера Safari и Internet Explorer ниже 10-той версий, так как они не поддерживают атрибут required тега input */ if($name == " ") echo "<strong>Ошибка:</strong> Вы не указали Ваше имя. <br />"; if($email == " ") echo "<strong>Ошибка:</strong> Вы не указали Ваш E-mail. <br />"; if($subject == " ") echo "<strong>Ошибка:</strong> Вы не указали тему сообшения. <br />"; if($message == " ") echo "<strong>Ошибка:</strong> Вы нам написали пустое сообщение. <br />"; ?>

Если все поля заполнены, то можем заняться отправкой письма.

Отправка электронной почты

Письмо отправим с помощью функций mail(), в которой передаем следующие параметры: имя, адрес электронной почты, тема письма и текст письма.

И так, в том же файле contact.php пишем следующий код:

  <?php     // Если все поля заполнены, то можем отправлять письмо .   if($name != " " && $email != " " && $subject != " " && $message != " "){     $header = "От: $name <$email>"; // Указываем имя и email отправителя.     // Отправляем письмо   $send = mail($to,$subject,$message,$header);     if($send) echo "Письмо отправлена успешно!";   else echo "Ошибка при отправке письма.";   }    }// Закрываем блок if (isset($_POST["send"]))   ?>  

Функция mail() возвращает значение 1 если письмо отправлено успешно и значение 0 в противном случае.


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

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Подписаться на новые статьи:

Delivered by FeedBurner

sozdatisite.ru

Добавлено в закладки: 0


форма обратной связиДля совершенствования своего сайта, важно не только изучать статистику визитов, но и получать некоторые данные и от настоящих людей, посещающих его. Пожалуй, самый упрощённый  метод для сбора подобных сведений – это размещение на сайте формы обратной связи. Сообщения, которые будут оставлять посетители для вас, смогут приходить на указанную вами электронную почту. Отличным плюсом можно отметить то, что визитёру не придется использовать собственную почтовую программу, ему даже не так важно иметь собственный e-mail. Недавно мы писали о том, как настроить рассылку. Сейчас поговорим о форме обратной связи.

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

Ваше имя:
 
Ваш e-mail (для ответа):
 
Ваше сообщение:

 

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


  1. Первое, что потребуется от вас – это проверить, сможет ли поддерживать контора, где размещается ваш сайт, функции PHP. Если же тарифный план этого хостинга не может поддерживать PHP, то вам потребуется перейти на иной тариф, имеющий данную  функцию.
  2. Далее, выбирайте нужную страницу, где вы хотели бы создать форму обратной связи, и вставляете в требуемое пространство расписанный ниже код:

<form method=”post” action=”mail.php”>
<strong>Ваше имя:</strong><br />
<input type=”text” name=”name” size=”30″/>
<br />
<strong>Ваш e-mail (для ответа):</strong><br />
<input name=”email” type=”text” size=”30″ />
<br />
<strong>Ваше сообщение:</strong><br />
<textarea name=”mess” rows=”3″ cols=”25″></textarea>
<p>
<input type=”submit” value=”Отправить сообщение”/>
</p>
</form>

Очевидно, что вся обратная связь формируется при помощи тега <form> с параметрами action=mail.php и method=post. Некоторые строки появляются при помощи  тега <input> с довольно понятными параметрами. То как располагаются отдельные элементы формы, а так же сам текст, шрифты и прочее, можно поменять в соответствии с общей стилистикой всего сайта.


Далее создадим страницу mai.php, которая имеет аналогию обыкновенной HTML, но с расширением .php. Такую страницу нужно разместить в тот же самый каталог сайта, где располагается страница с обратной формой связи. Более полный код указан на рис.2:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″/>
<title>Обратная связь</title>
</head>
<body>
<?php
if (isset($_POST[‘name’])) {$name = $_POST[‘name’];}
if (isset($_POST[’email’])) {$email = $_POST[’email’];}
if (isset($_POST[‘mess’])) {$mess = $_POST[‘mess’];}

$to = “адрес_почты_здесь“; /*Укажите ваш адрес электронной почты*/
$headers = “Content-type: text/plain; charset = windows-1251”;
$subject = “Сообщение с вашего сайта”;
$message = “Имя пославшего: $name nЭлектронный адрес: $email nСообщение: $mess”;
$send = mail ($to, $subject, $message, $headers);
if ($send == ‘true’)
{
echo “<b>Спасибо за отправку вашего сообщения!<p>”;
echo “<a href=”index.html“>Нажмите,</a> чтобы вернуться на главную страницу”;
}
else 
{
echo “<p><b>Ошибка. Сообщение не отправлено!”;
}
?>
</body>
</html>


Стоит  обратить особое внимание на места, которые выделяются красноватым цветом:

  • адрес_почты_здесь  – данный адрес вам нужно заменить на ваш собственный адрес электронной почты.
  • a href=index.html – адрес домашней страницы вашего сайта.

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

Стоит отметить, что только-только установленная форма для обратной связи может заработать не сразу, а иногда и вовсе первые сообщения могут не дойти или же придти только через 1-2 дня. Обычно, спустя какое-то время работоспособность восстанавливается и всё начинает работать нормально. Более того, с определённых хостингов могут не дойти письма на некоторые адреса. Решается данная проблема довольно легко – достаточно обратиться к вашему хостеру.

Ещё один момент, который стоит упомянуть – это проблемы, которые могут возникнуть с кодировкой.
вают случаи, когда вместо текста приходят непонятные символы или же пустые квадраты, что решается подбором вручную необходимой кодировки, что довольно проблематично. В подобных ситуациях можно решить проблему намного проще:  проверьте страницу с формой, имеет ли она кодировку charset=windows-1251. Например, в программе Adobe Dreamweaver это раздел в меню Изменить – > Свойства страницы – > Кодировка.

В примере, указанном ранее, чтобы упростить процесс, сообщение об отправлении данных выходит на пустой странице, что, конечно же, можно поменять. Например, вы вполне способны расположить его на абсолютно любой странице вашего сайта, для того чтобы посетитель смог воспользоваться меню навигации, для дальнейших действий. Чтобы это осуществить, вам потребуется разместить PHP-код, располагающийся от <?php и до ?>, в требуемое место на странице меню  и поменять название на mail.php.

biznes-prost.ru

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

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


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

В форме обратной связи такой проблемы нет. Для отправки сообщения нужно заполнить специальное поле для отсеивания ботов. Это позволяет полностью избавиться от нежелательных писем.
Для создания формы обратной связи можете воспользоваться инструкцией и исходным кодом по созданию формы обартной связи или использовать готовый платный скрипт наподобие 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) . "rn";  $headers .= "Reply-To: ". strip_tags($usermail) . "rn";  $headers .= "MIME-Version: 1.0rn";  $headers .= "Content-Type: text/html;charset=utf-8 rn";  // Формирование тела письма  $msg = "<html><body style=`font-family:Arial,sans-serif;`>";  $msg .= "<h2 style=`font-weight:bold;border-bottom:1px dotted #ccc;`>Новое сообщение</h2>rn";  $msg .= "<p><strong>Имя:</strong> ".$username."</p>rn";  $msg .= "<p><strong>Номер телефона:</strong> ".$userphone."</p>rn";  $msg .= "<p><strong>Почта:</strong> ".$usermail."</p>rn";  $msg .= "<p><strong>Сообщение:</strong> ".$content."</p>rn";  $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 форма обратной связи, форма обратный звонок, виджет обратный звонок.

nabiullin.com

Как создать обратную связь на сайте

Сергей отвечает:

Нашел лишние ковычки, ошибка пропала. Но теперь другая беда… Письмо приходит, все нормально отображается, но поля словно не заполнены. То есть, как буд-то обработчик не подхватывает данные из формы html.
php преобразовал вот так:

<meta http-equiv='refresh' content='6; url=https://***.ru'> <meta charset="UTF-8" /> <?php if (isset($_POST['name'])) {$name = $_POST['name'];} if (isset($_POST['email'])) {$email = $_POST['email'];} if (isset($_POST['sub'])) {$sub = $_POST['sub'];} if (isset($_POST['ring'])) {$ring = $_POST['ring'];} if (isset($_POST['catal'])) {$catal = $_POST['catal'];} if (isset($_POST['body'])) {$body = $_POST['body'];}  {   $address = "***@gmail.com"; $mes = "Имя: $name nE-mail: $email nТелефон: $sub nОбратный звонок: $ring nКаталог: $catal nТекст: $body"; $send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8rnFrom:$email"); if ($send == 'true') {echo "Ваше сообщение успешно отправлено! Через 6 секунд Вы вернетесь на главную страницу";} else {echo "Ошибка, сообщение не отправлено!";}   }  ?>

Проверку заполнения реализовал через html:

<form name="MyForm" action="mail.php" method="post"> <p><input class="input" name="name" type="text" style="width:60%" placeholder="Как к Вам обратиться (Ф.И.О.)" required /> <font face="Arial"><i><font face="Arial"> Ваше имя</font></i></p>   <p><input class="input" name="email" type="email" style="width:60%" placeholder="Адрес электронной почты для ответа" required /> <font face="Arial"><i>Электронная почта</i></font></p>   <p><input class="input" name="sub" type="text" style="width:60%" placeholder="Номер для обратного звонка" /> <font face="Arial"><i><font face="Arial"> Номер телефона</font></i></font></p>  <p><input class="input" name="ring" type="text" style="width:60%" placeholder="да/нет" /> <font face="Arial"><i>Вам перезвонить?</i></font></p>  <p><input class="input" name="catal" type="text" style="width:60%" placeholder="да/нет" /> <font face="Arial"><i>Хотите ли Вы получить электронный каталог?</i></font></p>   <p><font face="Arial"><i>Текст сообщения:</i></font><br /><textarea name="body" cols="1" rows="5" style="width:90%" placeholder="Введите Ваше сообщение" required /></textarea></p> <p><input id="submit" value="Отправить" type="submit" /></p> </form>

Если проверку обязательного заполнения возвращать в php, то выдается сообщение, словно ни одной строчки в форме не заполнено. То есть при обоих вариантах, обработчик словно “не видит” заполнения на странице. Повторюсь, посьмо приходит, отображается корректно, категории “анкеты” имеются, но они пустые. Куда глядеть тут? Подскажите)

Ответить

bloggood.ru

Видео 1. Создание формы обратной связи для сайта.

Обращаю внимание! Что бы форма заработала — необходимо, что бы ваш хостинг поддерживал PHP.

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

Код из урока по созданию формы обратной связи

Вот что получилось в итоге в файле index.php

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

<html> <head>  <meta charset="utf-8"/> </head> <body>  <form action="/testform/submit.php" method="POST">  <input name="email" placeholder="Email">  <input name="name" placeholder="Имя">  <input name="phone" placeholder="Телефон">  <textarea name="message" placeholder="Сообщение"></textarea>  <input type="submit" value="Отправить сообщение">  </form> </body> </html>

Содержимое файла submit.php:

Здесь осуществляется базовая проверка формы на заполненность, что бы не отправлять пустые сообщения. Если всё «гуд» — письмо отправляется. И идёт переадресация на страницу-уведомление об успешном отправлении письма.

if (!empty($_POST['name']) AND !empty($_POST['email']) AND !empty($_POST['message']))  {  $headers = 'From: Кротов Роман ' .  'Reply-To: drugoisvet@gmail.com ' .  'X-Mailer: PHP/' . phpversion();    $theme = "Новое сообщение с сайта";     $letter = "Данные сообщения:";  $letter .=" ";  $letter .="Имя: ".$_POST['name'];  $letter .=" Email: ".$_POST['email'];  $letter .=" Телефон: ".$_POST['phone'];  $letter .=" Сообщение: ".$_POST['message'];    if (mail("drugoisvet@gmail.com", $theme, $letter, $headers)){  header("Location: /testform/thankyou.php");  } else {  header("Location: /testform");  }    } else {  header("Location: /testform"); }

Ну а саму страницу уведомление не вижу смысла здесь размещать. Там базовая структура HTML-документа и всего одна строчка текста.

Видео 2. Ajax — отправка письма без перезагрузки страницы.

Для прохождения второго урока, нам понадобится библиотека jQuery. Мы её подключали с официального сайта jquery.com (ссылка ведет на страницу загрузки).

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

master-css.com

Как настроить форму обратной связи на сайте

От автора: приветствую вас, друзья. Данная статья будет продолжением статьи, в которой мы реализовывали отправку данных формы на сервер без перезагрузки страницы. Здесь мы продолжим данную тему и узнаем, как принять данные на сервере и реализовать отправку формы на электронную почту (email). Итак, давайте настроим форму обратной связи и добавим возможность ее отправки на email.

Исходные файлы текущей статьи вы можете скачать по ссылке.

В этом уроке мы сделаем все максимально просто и своими силами. В частности, для отправки писем мы воспользуемся специальной функцией PHP под названием mail(), которая раньше часто использовалась для отправки писем.

Начнем с синтаксиса функции mail. Данная функция имеет три обязательных параметра и два опциональных (не обязательных). Обязательные параметры:

Из опциональных параметров практически всегда используется только первый, который отвечает за заголовки письма: кодировка, отправитель, тип письма и др.

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

Это минимальный код, который уже позволит сформировать сообщение для отправки. Давайте проверим, как он работает:

Как создать обратную связь на сайте

Как видим, код работает, в ответ мы получаем сообщение о том, что письмо отправлено. Поскольку мы работаем на локальном сервере, здесь письма реально не отправляются функцией mail(), они сохраняются в виде текстового файла в специальной папке. В Open Server это папка userdatatempemail. Откроем эту папку и убедимся, что письмо там есть, примерно так оно будет выглядеть:

Как создать обратную связь на сайте

Отлично! Осталось несколько моментов, которые не помешает поправить в JS скрипте. Например, необходимо выводить сообщение не простым текстом, а именно кодом HTML, а также очищать поля формы после отправки сообщения. Итоговый JS код будет таким:

Теперь все гораздо лучше, письмо из формы отправляется и поля формы очищаются:

Как создать обратную связь на сайте

Как видим, все работает. Однако на практике функцию mail использовать для отправки сообщений не всегда получится. Некоторые хостеры не предоставляют услугу отправки писем, часто письма, отправленные с хостинга, попадают в спам или не доставляются до адресата. В этом случае рекомендуется отправлять письма через SMTP популярных почтовых серверов: gmail, yandex и т.п. Как это сделать мы узнаем в следующей статье.

Ну а на этом текущую статью мы завершаем. Дополнительно по работе с формами вы можете посмотреть этот урок. Удачи!

Как создать обратную связь на сайте

webformyself.com

Что представляет собой форма обратной связи на сайте?

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

Обратная связь для сайта (HTML-формата или, например, в виде скриптов PHP либо написанных на другом языке программирования) может быть настроена так, чтобы посетитель онлайнового ресурса смог отразить в сообщении суть своего вопроса, а также указать собственные персональные и контактные данные. Изучим то, посредством каких механизмов могут быть реализованы интерфейсы взаимодействия администраторов сайта и его посетителей.

Способы организации обратной связи на сайте

Запустить сервис обратной связи для сайта можно разными способами. В числе самых распространенных:

— использование бесплатных онлайновых сервисов, генерирующих специальный HTML-код для формы обратной связи;

— использование сервисов, предоставляющих соответствующие HTML-коды, а также скрипты PHP, необходимые для обеспечения функционирования формы обратной связи;

— использование готовых скриптов и их встраивание в HTML-код страниц на сайте.

Первые 2 способа могут подойти пользователям, не имеющим большого опыта в области веб-разработки. В свою очередь, 3-й метод во многих случаях более всего подходит специалистам, которые смогут корректно встроить соответствующий сервис обратной связи для сайта в структуру веб-страниц. Но это очень условные зависимости. Вполне может быть и так, что пользование сервером для генерации HTML-кода на практике окажется более сложной процедурой, чем загрузка готового PHP-скрипта.Рассмотрим то, каким образом указанные возможности могут задействоваться на практике.

Форма обратной связи на сайте как PHP-скрипт

Если пользователю предпочтителен вариант, при котором будет использоваться готовая форма обратной связи для сайта в виде PHP-скрипта, то загрузить ее можно, к примеру, со специализированного сайта script.landman.ru. Основные возможности соответствующих скриптов следующие:

— отправка сообщений пользователями сайта;

— фильтрация спама;

— возможность использовать скрипты в целях заказа тех или иных товаров и услуг.

В состав скриптов, предлагаемых командой разработчиков указанного сайта, входят:

— HTML-форма, ссылка на которую может быть размещена в одном из разделов сайта;

— PHP-скрипт, предназначенный для обработки сообщений от посетителей сайта;

— набор специальных шрифтов для антиспама.

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

Для того чтобы инсталлировать рассматриваемый скрипт, нужно, прежде всего, проверить файл config.php на предмет корректности адреса e-mail администратора сайта, на который будут приходить сообщения от пользователей. Кроме того, в файле Robots.txt следует прописать ограничение индексации папки с используемыми файлами, которая должна быть скопирована в корневой каталог сервера.

Формы без применения PHP

Форма обратной связи для сайта может быть инсталлирована на веб-страницы без применения скриптов PHP либо файлов, сформированных при задействовании какого-либо другого языка программирования, применение которых на конкретном сервере может быть затруднено либо предполагает использование дополнительных ресурсов, которые могут отсутствовать в распоряжении владельца сайта.

В данном случае речь идет как раз таки о генерации специального HTML-кода. Можно использовать тот, что предлагается разработчиками сервиса main-ip.ru/genform. Необходимо перейти по соответствующему адресу, после — ввести необходимые параметры в форму. Затем можно сгенерировать и скопировать код, после чего разместить его на той или иной странице администрируемого сайта.

Решить задачу — как на сайте сделать форму обратной связи, многие современные веб-дизайнеры предпочитают решать именно с задействованием сервиса main-ip.ru/genform, прежде всего, по той причине, что она позволяет осуществить настройку соответствующей формы по многим важнейшим параметрам. Таким как:

— ширина формы;

— наименование поля, в котором вводится имя пользователя, обращающегося к администрации сайта посредством механизма обратной связи;

— наименование поля указания электронного адреса пользователя;

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

— название текстового поля, предназначенного непосредственно для ввода сообщения.

Кроме того, используя страницу генерации HTML-кода для формы обратной связи, можно настроить:

— высоту блока с заголовком формы, его цвета — в HTML-кодировке;

— цвет текста, фиксируемого в заголовке, а также в форме сообщения;

— высоту текстовых областей, предназначенных для ввода сообщения, а также персональных данных пользователя;

— размер шрифта используемой формы.

Таким образом, сервис main-ip.ru/genform — в числе самых удобных для пользователей, которым нужна обратная связь для сайта. HTML-код, который генерируется сервисом, очень легко интегрируется в структуру веб-страниц. Главное — после инсталляции данного кода проверить корректность работы соответствующей формы.

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

Форма обратной связи в Joomla

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

Как сделать обратную связь на сайте с помощью Joomla? Прежде всего нужно войти в главную панель данной системы, после чего выбрать опцию «Контакты». На открывшейся страницы необходимо создать новую категорию данных. Для этого нужно заполнить несколько полей — «Заголовок», а также «Псевдоним». После необходимо отразить в системе тот факт, что соответствующий контакт публикуется. Затем нужно сохранить настройки в системе.

После того как требуемая категория создана, необходимо сформировать веб-страницу, на которой будет расположена форма обратной связи для сайта. Для решения данной задачи вновь необходимо выбрать опцию «Контакты», после чего кликнуть на кнопке «Новый». Затем нужно заполнить необходимые сведения в открывшемся окне, после — отразить тот факт, что данные публикуются. Настройки, опять же, требуется сохранить.

Обратная связь в Joomla: встраивание формы в структуру сайта

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

После этого должна открыться страница, на которой пользователю необходимо зафиксировать наименование пункта меню, а также указать контакты, которые будут ему соответствовать. Введенные настройки нужно будет сохранить. После этого система обратной связи для сайта под управлением Joomla будет доступна пользователям в разделе «Контакты» администрируемого сайта.

Еще одна популярная платформа для работы с онлайновыми порталами — WordPress. Рассмотрим то, как сделать обратную связь на сайте с применением тех инструментов, которые она включает.

Форма обратной связи на WordPress

Рассматриваемая система управления онлайновыми порталами предполагает задействование в целях решения задачи, о которой идет речь, специальных плагинов. В частности, для организации формы обратной связи может использоваться скрипт Contact Form Plugin (его особенности мы изучим чуть позже). Обычно он доступен в меню главной панели управления WordPress в разделе «Плагины».

Необходимо, выбрав соответствующий скрипт, активировать его. После чего выбрать вкладку «Контакты», а затем скопировать код используемого плагина. После этого необходимо выбрать вкладку «Страницы» и выбрать опцию «Добавить новую». Затем вставить в соответствующее поле ранее скопированный код. При необходимости можно настроить внешний вид страницы с контактными данными. Как только она будет подготовлена, то соответствующую страницу можно опубликовать.

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

Настройка обратной связи на WordPress: нюансы

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

— SimpleModal — всплывающая форма обратной связи для сайта;

— Usernoise — очень быстрый плагин с плавающей кнопкой, при нажатии на которую открывается форма для ввода сообщения;

— Contact Form в версии 7.

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

Изучим для примера то, как сделать обратную связь на сайте с применением плагина Contact Form в версии 7.

Настройка формы обратной связи на WordPress: плагин Contact Form 7

Для того чтобы задействовать возможности рассматриваемого плагина в целях решения задачи, о которой идет речь, нужно войти в панель управления WordPress, выбрать опцию «Плагины», после чего кликнуть на кнопке «Добавить новый».

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

Рассматриваемый плагин нужно установить и дождаться сообщения о его успешной инсталляции. Также соответствующее расширение необходимо активировать. После этого в пунктах меню, расположенном в левой части экрана браузера, появится опция Contact Form 7. Если навести на него курсор, то откроется дополнительное меню, в котором необходимо выбрать пункт «Добавить новую». Это нужно для создания нового интерфейса, в структуре которого будет присутствовать форма. Необходимо кликнуть на кнопке, которая называется так же как и пункт — «Добавить новую».

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

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

Добавление созданной с помощью плагина Contact Form 7 форму обратной связи осуществляется так же, как и в случае с любым другим интерфейсом из числа предлагаемых разработчиками WordPress. Можно проверить то, насколько корректно работает новая форма обратной связи, отправив тестовое сообщение. Оно должно быть направлено на e-mail владельца сайта, который указывается при настройке параметров плагина.

Резюме

Итак, мы изучили то, как на сайте сделать форму обратной связи. Данная задача может быть решена при задействовании скриптов PHP (либо составленных на другом языке программирования), применения сгенерированного кода HTML или при использовании интерфейсов систем управления онлайновыми проектами — таких как Joomla или, к примеру, WordPress.

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

fb.ru

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

Давайте посмотрим, как можно организовать обратную связь в Joomla и WordPress стандартными средствами или с помощью расширений.

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

Так вы можете скачать отдельный модуль обратной связи для Джумлы под названием Rapid Contact, который может дать вам новые возможности и функционал (см. демо). Про настройку и возможности этого модуля сможете прочитать здесь. К тому же, стандартный компонент в Joomla для реализации обратной связи не обладает достаточной гибкостью и не позволяет использовать защиту от спама (капчу), а также не позволяет создавать несколько разных контактных форм на сайте.

Эти проблемы решаются с помощью альтернативного компонента для этого движка под названием aiContactSafev, который позволяет создавать на сайте любое количество форм обратной связи (можно привязать их к разным E-mail адресам) и имеет возможность добавлять поле для загрузки файлов, равно как и любые другие типы полей.

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

Как создать обратную связь на сайте

Этот компонент в своем составе имеет очень гибко настраиваемую капчу (ввод кода при отправке данных для зашиты от спама). Его можно бесплатно скачать для разных версий Джумла, а прочитать про его настройку вы сможете тут.

Теперь давайте поговорим за WordPress. Лично я пока еще не определился с этим и у меня на странице контактов красуется обычный E-mail, что в общем-то не очень здорово, ибо он уже давно попал в спам-базу, и если бы я не сумел привязать почту для домена через Google Apps к обычному ящику в Гмайле, то поток спама меня бы уже давно захлестнул с головой.

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

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

Собственно, по поводу WordPress. Есть один очень популярный и очень мощный плагин, который зовется Contact Form 7. Популярность его просто зашкаливает, а это значит, что что-то в нем такое есть. Правда для реализации функции капчи вам придется поставить еще дополнительный плагин Really Simple CAPTCHA.

Как создать обратную связь на сайте

Форму обратной связи можно будет вставить на любую страницу или в любой пост вашего блога на WordPress, а также в виджет. Фактически это своеобразный конструктор для WordPress, позволяющий обновлять информацию в форме без обновления страницы (на технологии ajax). Лично я испытывал этот плагин на KtoNaNovenkogo.ru примерно пару лет назад, и тогда он мне показался очень тяжелым и неуместно громоздким для реализации стоящих передо мною целей (обратная связь).

Понятно, что за это время Contact Form 7 мог стать уже гораздо более подходящим для реализации стоящих перед нами задач и поэтому предлагаю вам опробовать его в работе самостоятельно, опираясь на довольно подробное описание. Если вы пользуетесь каким-либо другим хорошим и легким плагином, то чиркните, пожалуйста, об этом пару слов в комментариях.

Так, это мы говорили про реализацию обратной связи в Joomla и WordPress с помощью соответствующих расширений.

Но существует еще несколько способов:

  1. Создание формы самостоятельно. Для этого нужно будет написать ее код и оформить внешний вид с помощью Css стилей, а еще написать на Php для нее обработчик (в принципе, знаний, полученных из видеокурса Попова по Php, будет достаточно) и затем добавить CAPTCHA, проверку правильность заполнения полей и что-то еще. Сразу скажу, что сделать это будет не просто.

    Все у того же Евгения Попова есть серия бесплатных уроков на его блоге, посвященных самостоятельному созданию обратной связи для сайта:

    1. Собственно, создание формы
    2. Задание ее внешнего вида
    3. Проверка правильности заполнения полей
    4. Проверка правильности ввода e-mail
    5. Создание полей для загрузки файлов
    6. Форма обратной связи без перезагрузки (Часть 1, 2, 3, 4)

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

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

    Данные скрипты можно будет установить и использовать практически для любого проекта — как статического (на Html), так и динамического (на Cms). В общем-то, довольно-таки удобный и универсальный инструмент, но вам придется, скорее всего, перебрать много вариантов, чтобы найти что-то подходящее именно вам.

  3. Онлайн конструкторы и генераторы скриптов обратной связи. В несколько шагов мастера вы сможете настроить внешний вид вашей будущей формы и получить ее код для установки на свой сайт. Правда это будет только Html часть кода, а обработчик на Php вам придется использовать свой. Но есть онлайн сервисы, которые предлагают использовать для этого сторонние обработчики, расположенные на их сервере.

Php скрипты форм обратной связи для сайта

Итак, давайте рассмотрим сначала несколько скриптов, которые можно бесплатно скачать и установить на свой сайт. Простенький, но довольно наглядный вариант (использующий капчу для защиты от спама) можно будет бесплатно скачать отсюда. Есть вариант обратной связи:

Как создать обратную связь на сайте

Там и форма заказа для сайта:

Как создать обратную связь на сайте

Он представляет из себя архив, содержащий в себе папку, которую нужно будет скопировать в корневую директорию своего сайт (или в любую другую). Далее на странице с контактами вы указываете ссылку с прописанным в ней путем до файла «index.php» из папки «sendmail». Для моего блога это было бы примерно так:_https://ktonanovenkogo.ru/sendmail/index.php (если бы я скопировал каталог со скриптом в корневую папку).

Настройки осуществляются с помощью редактирования содержимого файла «config.php» из директории «sendmail»:

Как создать обратную связь на сайте

В первой строчке вы указываете адрес почтового ящика, на который будут приходить письма, отправленные с помощью этой формы, а во второй строчке указываете желаемую кодировку текста (utf 8, windows 1251). В ряде последних строчек Php кода вы сможете поменять подписи к полям формы обратной связи или заказа. Вот и все.

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

Существует довольно привлекательный скрипт под названием Super AJAX Contact Form (можно использовать его и для заказа), построенный на основе PHP и jQuery с использованием Ajax:

Как создать обратную связь на сайте

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

Установка его на сайт ничем не отличается от описанной ранее и заключается в копировании папки со скриптом в корень, а на странице контактов останется только прописать ссылку до файла «index.php» (для моего блога:_https://ktonanovenkogo.ru/code/index.php).

Настройки формы обратной связи производятся в файле «codeassetsxmlconfig.php», где можно прописать как отдельный E-mail для различных тем, так и один для всех (смотрите об этом подробнее в видеоуроке).

В Super AJAX Contact Form осуществляется проверка правильности заполнения всех полей и сразу же (без перезагрузки страницы — ajax во всей красе) выдаются подсказки над соответствующими полями, что сильно повышает юзабилити обратной связи:

Как создать обратную связь на сайте

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

Как создать обратную связь на сайте

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

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

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

Как создать обратную связь на сайте

Скрипт осуществляет проверку на заполненность всех полей формы, на правильность ввода E-mail адреса, защищает от спама с помощью капчи и позволяет добавлять в практически любые дополнительные поля (загрузка файла, чекбоксы, радиокнопки, поля со множественным выбором и т.д.).

Особенностью установки этого скрипта обратной связи является использование им базы данных, которую вам нужно будет предварительно создать или же использовать уже имеющуюся (его таблицы будут помечены в ней своим префиксом, что поможет их затем без труда удалить при необходимости). Я уже писал про то, как создать базу данных в cPanel или скачать, установить и настроить phpMyAdmin.

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

Конструкторы и генераторы форм обратной связи

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

Как создать обратную связь на сайте

После чего вам нужно выбрать из левой части окна нужные поля для будущей формы и затем, щелкая по ним, произвести их более тонкую настройку (задать подписи полей на русском языке, выбрать ширину поля, сменить тип и ввести предварительный текст):

Как создать обратную связь на сайте

Добавленные поля можно менять местами простым перетаскиванием мыши, удалять и повторно редактировать:

Как создать обратную связь на сайте

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

Как создать обратную связь на сайте

То, что кнопка «Submit» осталась не переведенной, не есть большая проблема, ибо это можно будет сделать непосредственно в полученном коде. Более подробно про работу с этим конструктором обратной связи, его настройку и установку на сайт, вы сможете узнать, скачав этот видеоурок.

Есть одно «но» — с помощью этого онлайн конструктора вы получите только Html код, а вот Php обработчик данных вам придется использовать свой. О том, где взять обработчик, можете узнать из этого видеоурока.

ktonanovenkogo.ru


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector