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

/ 👁 5338

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

дополнительные материалы к урокам

демо версия урока

Для создания формы обратной связи нам потребуется: html документ, php-обработчик и javascript, который будет проверять правильность заполнения полей формы. Для оформления внешнего вида формы потребуется css файл.
1. Итак начнем с создания самой формы. Для этого создадим html файл и назовем его например myform.html. Откроем его в редакторе, которым Вы пользуетесь. Я буду работать в Dreamweaver.
2. Между теговмы и будем создавать нашу форму, используя тег form. В данном примере мы создадим форму обратной связи, в которую пользователь будет вводить свое имя, e-mail, сообщение и по желанию номер своего телефона(если он хочет, чтобы с ним связались таким образом). Но далее при проверке мы сделаем это поле необязательным, то есть его можно будет и не заполнять. Таким образом код нашей формы должен выглядеть следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4​.01 Transitional//EN" "http://www.w3​.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Форма для Сайта!</title>
</head>
<body>
<form method="post" name="myform" action="#">
<table align="center" id="form_table">
<tr><td><p>Your name:<span class="yes">*</span></p></td><td><input type="text" name="name" id="name" size="30"></td></tr>
<tr><td><p>Your E-mail:<span class="yes">*</span></p></td><td><input type="text" name="email" id="email" size="30"></td></tr>
<tr><td><p>Your Phohe:</p></td><td><input type="text" name="phone" id="phone" size="30"></td></tr>
<tr><td><p>Your Message:<span class="yes">*</span></p></td><td><textarea name="message" id="message" cols="28" rows="5"></textarea></td></tr>
<tr><td></td><td><input type="image" src="" class="img_btn"></td></tr><
</table>
</form>
</body>
</html>

 

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

3. Теперь поработаем немного над внешним видом нашей формы. Для этого нам нужно создать и подключить css файл. Итак создаем файл с расширением css и назовем его style.css (в уроке я сохраняю его в том же каталоге что и основной файл.) Теперь подключим его к html-документу, прописав между тегами следующую строчку:

<link rel="stylesheet" type="text/css" href="style.css">

 

Теперь в файле style.css пропишем простые css-свойства для нашей формы. Я использовала для фона background-image с однопиксельной вертикальной картинкой, которая повторяется по оси х, тем самым образуя однородную градиентную область. Вы можете найти ее в дополнительных материалах, либо сделать свою под свой дизайн. (А может быть фоновая картинка Вам вообще не понадобится). Так же я использую скругленную рамку вокруг всей формы и полей для ввода (здесь опять же все индивидуально. Оформляйте как нужно Вам). Далее стили текста. И звездочку * делаем красной, чтобы была более заметна. Это наши обязательные поля. Вот Мой код:

#form_table{
	border:1px solid  #69C; border-radius:5px;
	background-image:url(bg.png);
}
p{font-family:Verdana, Geneva, sans-serif 14px; color:#003; font-weight:600;}
.yes{color:red;}
#name,#email,#phone,#message{border:1px solid #69C; border-radius:3px;}

 

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

4. Теперь нужно сделать проверку для нашей формы. Проследить чтобы пользователь заполнил все обязательные поля и ввел корректный e-mail адрес. В какой то мере такая проверка защитит от спама. Итак здесь нам помогут javascript и библиотека jquery.
Для начала подключим библиотеку jquery. Ее можно скачать с сайта http://jquery.com/. На сайте нужно перейти в Downloads и скачать последнюю версию библиотеки (она постоянно обновляется). Причем скачивать нужно Minified. После того как скачали помещаем библиотеку в тот же каталог, где расположен и наш документ, а в html-документе между тегами head подключаем.

<script type=’text/javascript’  src=’jquery-1.9.0.min’></script>

 

Если будете класть ее в отдельную папку со скриптами, не забывайте прописать свой путь.

5. А теперь и сам скрипт, который будет проверять правильность введенной информации. Я расположила его прямо в нашем html-документе после подключения библиотеки и до закрытия . Но при желании вы можете разместить его в отдельном js файле (тогда не забудьте его подключить в html-файле). Код:

<script>
$(document).ready(function() {
$(".img_btn").click(function(){
ver=true;
name=$("#name").val();
var p=/^[а-яa-z0-9_.-]{3,35}$/i;
if(!p.test(name)){
a="Name not correct!";
ver=false;
}
email=$("#email").val();
var p=/^[a-z0-9_.-]+@([a-z0-9-]+.)+[a-z]{2,4}$/i;
if(!p.test(email)){
a="E-mail not correct!";
ver=false;  
}
message=$("#message").val();
if(message == 0){
a="Message is empty!";
ver=false;  
}
b="Message was send!";
if(ver)
{
alert(b);
return true;  
}
else{
alert(a);
return false;  
}
});
});
</script>

 

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

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

Код приведен с комментариями так что думаю разобраться будет не сложно.
Теперь вернемся в html-файл и пропишем внутри action название файла обработчика.

<form method="post" name="myform" action="mysender.php">

 

После удачной отправки сообщения появится надпись Your Message sent! Этот php код можно разместить на странице с навигацией сайта, чтобы после отправки пользователь мог перейти в один из пунктов меню вашего сайта. Главное, чтобы файл с этим кодом имел такое же название, что и в action в нашем html документе. Вот и все! Форма готова! Попробуйте отправить сообщение!

Leave a Reply