Обратная связь на сайте. Готовая рабочая форма обратной связи

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

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

Обратная связь на сайте. Готовая рабочая форма обратной связи

Здесь файл index.php содержит форму, в котором методом пост происходит выполнение файла mail.php (содержит проверки и скрипт отправки/запись в файл).  По окончанию скрипт перенаправляет нас обратно на страницу, содержащую ФОС (форму обратной связи).

Форма обратной связи html, создание таблицы с полями для ввода и редактирование файла стилей style.css.

Код формы необходимо разместить на странице, на которой мы хотим видеть форму обратной связи. В нашем случае это index.php. Для удобства, я выделю код иным цветом.

<form class="table" id="form1" name="form1" method="post" action="mail.php">
<p class="info">Пункты <strong>отмеченные звездочками обязательны
</strong>для заполнения. Для заполнения полей <strong>допустимо использование только маленьких и больших английских букв и цифр</strong>.
С иными символами или русскими буквами, <strong>запрос не будет обработан</strong>!</p><br />
<p> <strong>Выберите из списка сервер:</strong>
<select name="data" id="select">
<option value="Сервер 1">serv1_r200</option>
<option value="Сервер 2">serv2_r210</option>
</select></p><br />
<p>
<label><strong>Название:*</strong><br />
<input type="text" name="name" id="name" />
изменить имя в дальнейшем нельзя</label>
</p><br />
<p>
<label><strong>Комментарий:</strong><br />
<input type="text" name="text" id="text" />(только англ.)</label>
</p><br />
<p>
<label><strong>Пароль:*</strong><br />
<input type="text" name="pas" id="pas" />
</label>
</p><br />
<p>
<label><strong>Пароль админа:*</strong><br />
<input type="text" name="admpas" id="admpas" />
не менее 4 символов</label>
</p><br />
<p>
<label><strong>Введите ваш реальный e-mail:*</strong><br />
<input type="text" name="mail" id="mail" />
туда будет отправлено письмо с активацией</label>
</p><br />
<p align="center">
<label>
<input type="submit" name="submit" id="submit" value="Отправить запрос" />
</label>
</p>
</form>

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

Внутри тега <form>и располагается наша форма обратно связи</form>.

Значения (class=»table» и class=»info») указывает на стили для этой формы (можете отредактировать так, как вам будет нужно):

.info {
font-size: 14px;
color: #008040;
padding: 5px;
}
.table {
border: gray solid 1px;
margin-top: 10px;
padding: 10px;
font-size: 14px;
}

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

<select name=»data» id=»select»>
<option value=»Сервер 1″>serv1_r200</option>
<option value=»Сервер 2″>serv2_r210</option>
</select>

Скрипт формы обратной связи mail.php и запись значений полей в файл txt

<?
$myemail= "admin@sitename.ru";
$refreshpage="index.php";
$maxmsg="2000";
$back_name="
<script language='Javascript'>
alert('Вы не указали название!');
</script>";
$back_pas="
<script language='Javascript'>
alert('Вы не указали пароль!');
</script>";
$back_admpas="
<script language='Javascript'>
alert('Вы не указали пароль админа!');
</script>";
$back_mail="
<script language='Javascript'>
alert('Вы не указали ваш email.');
</script>";
$send_mail ="
<script language='Javascript'>
alert('Ваше сообщение успешно отправлено. Нажмите ОК, страница обновится автоматически.');
</script>";
$data=$_POST['data'];
$name=$_POST['name'];
$text= $_POST['text'];
$pas= $_POST['pas'];
$admpas= $_POST['admpas'];
$mail= $_POST['mail'];
if (!preg_match("#^[a-zA-Z0-9]+$#i", $name)){
die('Для названия канала разрешены только символы a-z, A-Z и цифры');
}
if ($name == "")
{
print "$back_name";
print "
<script language='Javascript'>
<!--
function reload() {location = \"$refreshpage\"}; setTimeout('reload()',
0);
//-->
</script>";
exit;
}
if (!preg_match("#^[a-zA-Z0-9]+$#i", $pas)){
die('Для пароля канала разрешены только символы a-z, A-Z и цифры');
}
if ($pas == "")
{
print "$back_pas";
print "
<script language='Javascript'>
<!--
function reload() {location = \"$refreshpage\"}; setTimeout('reload()',
0);
//-->
</script>";
exit;
}
if (!preg_match("#^[a-zA-Z0-9]+$#i", $admpas)){
die('Для пароля администратора разрешены только символы a-z, A-Z и цифры');
}
if ($admpas == "")
{
print "$back_admpas";
print "
<script language='Javascript'>
<!--
function reload() {location = \"$refreshpage\"}; setTimeout('reload()',
0);
//-->
</script>";
exit;
}
if (!preg_match("#^[a-zA-Z0-9.@-_]+$#i", $mail)){
die('Для указания электронной почты разрешены только символы a-z, A-Z и цифры');
}
if($mail=="")
{
print "$back_mail";
print "
<script language='Javascript'>
<!--
function reload() {location = \"$refreshpage\"}; setTimeout('reload()',
0);
//-->
</script>";
exit;
}
<!-Отправка письма на почту. При этом в теле сообщения находятся перечисленные ниже пункты со значением передаваемой переменной-->
$headers="Content-Type: text/plain; charset=windows-1251\r\n";
$allmsg=
'1.Сервер:'.$data.chr(13).chr(10).
'2.Название канала:'.$name.chr(13).chr(10).
'3.Комментарий:'.$text.chr(13).chr(10).
'4.Пароль канала:'.$pas.chr(13).chr(10).
'5.Пароль админа канала:'.$admpas.chr(13).chr(10).
'6.E-mail:'.$mail.chr(13).chr(10);
mail($myemail, "Сообщение", $allmsg, $headers);
print"$send_mail";
print "
<script language='Javascript'>
<!--
function reload() {location = \"$refreshpage\"}; setTimeout('reload()',
0);
//-->
</script>";
?>
<!--внесение происходит в созданный файл add_doc.txt,
лежащий в каталоге сайта. Скрипт проверяет наличие записи
и ставит курсор на последнюю строку и пишет в нее. -->
<?php
$h = fopen("add_doc.txt","a");
$allmsg = '1.Сервер:'.$data.chr(13).chr(10).
'2.Название канала:'.$name.chr(13).chr(10).
'3.Комментарий:'.$text.chr(13).chr(10).
'4.Пароль канала:'.$pas.chr(13).chr(10).
'5.Пароль админа канала:'.$admpas.chr(13).chr(10).
'6.E-mail:'.$mail.chr(13).chr(10); ;
if (fwrite($h,$allmsg))
echo "Сейчас произойдет обновление страницы";
else
echo "Произошла ошибка при записи данных";
fclose($h);
?>
<!--  внесение записи в текстовый файл add_doc.txt -->

Скрипт абсолютно рабочий, также кратко расскажу про основные моменты.

$myemail= «admin@sitename.ru»; 

Указываем адрес почты, куда мы хотим получать сообщения с сайта.
$refreshpage=»index.php»; 

Указываем страницу, на которую следует вернуться после отправки письма.

$back_name=»
<script language=’Javascript’>
alert(‘Вы не указали название!’);
</script>»;

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

if (!preg_match(«#^[a-zA-Z0-9]+$#i», $name)){
die(‘Для названия канала разрешены только символы a-z, A-Z и цифры’);
}
if ($name == «»)
{
print «$back_name»;
print «
<script language=’Javascript’>
<!—
function reload() {location = \»$refreshpage\»}; setTimeout(‘reload()’, 
0);
//—>
</script>»;
exit;
}

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

Передаваемые значения указаны в комментариях в коде.

Файл add_doc.txt находится в корневой папке сайта. Если вам не нужно создавать такой файл, просто удалите этот кусок из файла mail.php. Сгенерированное письмо на веб-сервере можно увидеть по адресу:

[C:\WebServers\tmp\!sendmail]

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

Пока это все, что я хотел вам рассказать сегодня. До новых встреч.

2 комментария к “Обратная связь на сайте. Готовая рабочая форма обратной связи”
  1. envoy 06.05.2012
    • administrator 07.05.2012

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