Обратная связь

ГлавнаяJava скрипты → Обратная связь

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

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

Если Вы сделали свой сайт интересным, позновательным, и хотите иметь связь с пользователями, то такая форма обратной связи вполне подойдёт для Вашего проекта.

Здесь по каждой ошибке выводятся довольно интересные и красивые сообщения, которые так же можно изменить под свой дизайн. Что рассказывать - вы можете сами всё попробовать в этой форме - Обратная связь.

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

Написать сообщение


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

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

Для установки формы обратной связи на сайт нам понадобятся HTML-форма со стилями и PHP-обработчик этой формы. И сейчас мы рассмотрим коды для этих файлов.

Код для html


<center>
 <form action="send.php" method="post">
 <table class="table2">
<tbody>
<tr>
<th colspan="2" class="zagalovok">Написать сообщение:</th></tr>
<tr><th colspan="2"></th></tr>
<tr><td colspan="2" class="lable">*Ваше имя:</td></tr>
<tr><td colspan="2" class="input">
<input name="name" size="30" maxlength="30" class="input" type="text">
</td></tr>
<tr><td colspan="2" class="lable">*Ваш e-mail:</td></tr>
<tr><td colspan="2" class="input">
<input name="email" size="30" maxlength="30" class="input" type="text">
</td></tr>
<tr><td colspan="2" class="lable">*Сообщение:</td></tr>
<tr><td colspan="2" class="input">
<textarea name="text_message" cols="29" rows="4" class="input"></textarea>
</td></tr>
<tr><th colspan="2"></th></tr>
<tr><td align="right"  class="lable" valign="bootom">*Введите цифры:</td>
<td align="right" valign="center"><?php 
$i=1;
do
{
$num[$i] = mt_rand(0,9);
echo "<img src='img/".$num[$i].".png' border='0' align='center' vspace='5px'>";
$i++;
}
while ($i<5);
$captcha = $num[1].$num[2].$num[3].$num[4];
?>
<input name="captcha" type="hidden" value="<?php echo $captcha ;?>">
<input name="pr" style="margin-bottom:11px;" type="text" size="6" maxlength="4"></td></tr>       
<tr><th colspan="2"></th></tr>
<tr><td colspan="2" align="center"><input name="mail_submit" type="submit" value="Отправить сообщение"></td></tr>
</tbody></table></form></center>

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

Код для style.css


.table2 {background:#87A0AB;padding:20px;border:outset 5px #5c7a7c;border-radius:10px;
-moz-border-radius:10px;-webkit-border-radius:10px;
-webkit-box-shadow:#666 0px 2px 3px;-moz-box-shadow:#666 0px 2px 3px;
box-shadow:#666 0px 2px 3px;behavior:url(PIE.htc);
}
.zagalovok {font-family:'Verdana';font-size:18px;color:#325162;text-decoration:none;font-weight: bold;}
.lable {text-align:left;clear:left;display:block;font-size:13px;font-family:"Verdana";color:#FF2B29;}
.input {text-align:left;background-color:#F0F0F0;border:0px;font-size:14px;font-weight:bold;
font-family: Arial, Helvetica, sans-serif;color:#1C5455;				
}
.warning_table {background:#F0F0F0;border:outset 5px #666666;border-radius:10px;
-moz-border-radius:10px;-webkit-border-radius:10px;
-webkit-box-shadow:#666 0px 2px 3px;-moz-box-shadow:#666 0px 2px 3px;
box-shadow:#666 0px 2px 3px;behavior:url(PIE.htc);
}
.warning_font_big {font:Arial;font-size:30px;color:#B70004;}
.warning_font {font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;color:#333;padding-top:15px;
}
.link {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#B70004;}

Давайте разберём вышеуказанный код по подробней:

  • table2 - Таблица для формы обратной связи
  • zagalovok - Загаловок в форме обратной связи "Написать сообщение:"
  • lable, input - Параметры текста над и в самих полях
  • warning_table, warning_font_big, warning_font, link - Параметры выводимых сообщений

Код обработчика формы Send.php


<?php
/* Проверяем существуют ли переменные, которые передала форма обратной связи. 
    Если не существуют, то мы их создаем.
    Если форма передала пустые значения мы их удаляем */
if (isset($_POST['name'])) {$name = $_POST['name']; if ($name == '') {unset($name);}}
if (isset($_POST['email'])) {$email = $_POST['email']; if ($email == '') {unset($email);}}
if (isset($_POST['text_message'])) {$text_message = $_POST['text_message']; if ($text_message == '') {unset($text_message);}}
if (isset($_POST['pr'])){$pr = $_POST['pr']; if ($pr == '') {unset($pr);}}
if (isset($_POST['captcha'])){$captcha = $_POST['captcha'];}
 
/* Проверяем заполнены ли все поля */
if (isset($name) && isset($email) && isset($text_message) && isset($pr))
{

/* Убираем все лишние пробелы, а также преобразуем все теги HTML в символы*/
$name = htmlspecialchars(trim($name));
$email = htmlspecialchars(trim($email));
$text_message = htmlspecialchars(trim($text_message));

/* Проверяем вводимое поле "Имя", в 
    данном случае только русские буквы */
if(!preg_match("/[А-Яа-я]/i", $name)){{
 {
echo "<link rel='stylesheet' type='text/css' href='style.css'/>
<table width='600' height='300' align='center'>
 <tr>
 <td class='warning_table' width='220' align='center' valign='middle'>
 <img align='center' src='images/warning.png'>
 <div align='center' class='warning_font_big'>Имя должно состоять только<br /> из русских букв!</div>
 <div align='center' class='warning_font' align='left'>Попробуйте ещё раз!</div>
 <p align='center'><a href='index.html' class='all_links'>Вернуться назад</a></div></p>
 </td>
 </tr>
 </table>";
  } 
  return false;}
 return true;
}

/* Проверяемна правильность ввода e-mail  */
if(!preg_match("/[0-9a-z_]+@[0-9a-z_^\.]+\.[a-z]{2,3}/i", $email)){{
 {
echo "<link rel='stylesheet' type='text/css' href='style.css'/>
<table width='600' height='300' align='center'>
 <tr>
 <td class='warning_table' width='220' align='center' valign='middle'>
 <img align='center' src='images/warning.png'>
 <div align='center' class='warning_font_big'>Не правильный формат E-mail!</div>
 <div align='center' class='warning_font' align='left'>Попробуйте ещё раз!</div>
 <p align='center'><a href='index.html' class='all_links'>Вернуться назад</a></div></p>
 </td>
 </tr>
 </table>";
  } 
  return false;}
 return true;
}

/* Проверяем правильность ввода капчи */
  if ($captcha == $pr)
  {

/* Формируем сообщение */
$address = "ваша@почта.ru";  /* Меняем на свою почту */
$sub = "Сообщение с сайта";
$mes = "Автор: $name \nE-mail: $email \n\nТекст сообщения:\n$text_message";

/* Отправка сообщения */
$verify = mail ($address,$sub,$mes,"Content-type:text/plain; charset = Windows-1251\r\nFrom:$email");
      if ($verify == 'true')   
     {
echo "
<link rel='stylesheet' type='text/css' href='style.css'/>
<table width='600' height='300' align='center'>
 <tr>
 <td class='warning_table' width='220' align='center' valign='middle'>
 <img align='center' src='images/Galochka.png'>
 <div align='center' class='warning_font_big'>Поздравляем!</div>
 <div align='center' class='warning_font' align='left'>Ваше письмо доставлено администратору.<br />В ближайшее время с Вами обязательно свяжуться!</div>
 <p align='center'><a href='index.html' class='all_links'>Вернуться назад</a></div></p>
 </td>
 </tr>
 </table>";
      }
      else 
	  {
	  echo "
<link rel='stylesheet' type='text/css' href='style.css'/>
<table width='600' height='300' align='center'>
 <tr>
 <td class='warning_table' width='220' align='center' valign='middle'>
 <img align='center' src='images/warning.png'>
 <div align='center' class='warning_font_big'>ОШИБКА!!!</div>
 <div align='center' class='warning_font' align='left'>Ваше письмо не доставлено. Повторите отправку немного позже!</div>
 <p align='center'><a href='index.html' class='all_links'>Вернуться назад</a></div></p>
 
 </td>
 </tr>
 </table>";
	  }
  }
  else
  {
  echo "
<link rel='stylesheet' type='text/css' href='style.css'/>
<table width='600' height='300' align='center'>
 <tr>
 <td class='warning_table' width='220' align='center' valign='middle'> 
 <img align='center' src='images/warning.png'>
 <div align='center' class='warning_font_big'>Вы не правильно ввели цифры!</div>
 <div align='center' class='warning_font' align='left'>Попробуйте ещё раз!</div>
 <p align='center'><a href='index.html' class='all_links'>Вернуться назад</a></div></p> 
 </td>
 </tr>
 </table>";
  }
}
else
{
echo "
<link rel='stylesheet' type='text/css' href='style.css'/>
<table width='600' height='300' align='center'>
 <tr>
 <td class='warning_table' width='220' align='center' valign='middle'>
 <img align='center' src='images/warning.png'>
 <div align='center' class='warning_font_big'>Вы заполнили не все поля!</div>
 <div align='center' class='warning_font' align='left'>Попробуйте ещё раз!</div>
 <p align='center'><a href='index.html' class='all_links'>Вернуться назад</a></p>
 </td>
 </tr>
 </table>";
}
?>

Здесь вы можете отредактировать сообщение под себя - на своё усмотрение, НО самое главное не забыть поменять в этой строке:
$address = "ваша@почта.ru"; - поменять на свою почту, куда будут приходить вам письма.

И последнее, что осталось сделать - это закачать к себе папку с цифрами для капчи. Скачать её Можно здесь

Поделись ссылкой с друзьями:

Комментарии к статье

Алёна 30-10-2013

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

Admin 02-11-2013

Пардон!
Всё исправил!

Влад 01-12-2013

Уважаемый.
Подскажите, где я запутался. Скрипт установился и письма доходят, но прочесть не могу. send.php пробовал и в 1251 и в utf-8.

Admin 09-12-2013

Помимо того, что кодировку файла send.php нужно пробовать изменить, так ещё и в самом этом файле она прописана. Пробуйте там поменять. У меня сначала работал на Windows-1251, а теперь я поменял кодировку сайта на UTF-8, и так же всё прекрасно работает.

Закен 16-03-2014

Не работают картинки. Не знаю что делать. Всё вроде как надо залил. Но не работают. Только код какой-то идёт:
$i++; } while ($i5); $captcha = $num[1].$num[2].$num[3].$num[4]; ?>

Admin 16-03-2014

Это у вас выскакивает код PHP в исходном виде.
Вам для начала нужно проверить - обрабатываются ли у вас запросы PHP. Как проверить это - написано в статье:
Вывод PHP на HTML странице

Закен 16-03-2014

Картинки работаую уже. Исправил.
Теперь другая проблема. Сообщение на посту не доходят мне. Хотя почту свою в send.php я указал.

Admin 16-03-2014

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

Марина 16-03-2014

ВАУ!!!! Круто!!! все работает! большое спасибо! но есть одно но((( присылает иероглифы.
Изначчально мой хостинг не воспринимает кирилицу, поэтому я закодировала как utf-8. и приходят одни иероглифы((( что делать помогите?

Admin 16-03-2014

Уважаемая, Марина!
Почитайте пожалуйста, внимательно комментарии к этой статье. Что связано с кодировкой по скрипту "Обратная связь" - я здесь уже изложил. И к сожалению больше я Вам ничем помочь не могу. Я же не имею понятия, что Вы там у себя правильно сделали, а какие ошибки допустили.