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

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

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

Для создания формы обратной связи нам потребуется: 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"><br/>

Теперь в файле 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;}<br>

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

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 документе. Вот и все! Форма готова! Попробуйте отправить сообщение!

Ссылочная оптимизация: внешняя и внутренняя.

Контролируем код и ловим ошибки с Firebug

Понравилась статья? Поделись с друзьями!


Не нашли того, что искали? Воспользуйтесь расширенным поиском!

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail:


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

Комментарий добавил(а): игорь
Дата: 2014-05-08

Здравствуйте Анна,спасибо Вам большое за подробное описание для меня не опытного очень полезная статья.Я вставил форму на разрабатываемый сайт ,поменял поля но у меня при вводе данных пишет Name not correct,подскажите пожалуйста где искать ошибку

Комментарий добавил(а): Админ
Дата: 2014-05-09

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

Комментарий добавил(а): Стас
Дата: 2014-06-22

более менее понятно! но не могу исправить что бы заполнять на русском пишет ошибка(

Комментарий добавил(а): Инна
Дата: 2014-11-10

Здравствуйте! Подскажите пожалуйста в чем может быть проблема. Сделала форму обратной связи на своем сайте, но почему то когда с планшета отправляют данные - не происходит проверки на заполненность поля и приходя просто письма с полями ТЕЛЕФОН ИМЯ но они пустые. На компьютерах, ноутбуках все ок, а вот планшеты и телефоны не работают((

Комментарий добавил(а): Алексей
Дата: 2015-03-06

судя по всему в коде указаны в качестве допустимых символов только латиница в остальных переменная возвращает - False (т.е. некорректные данные) А так спасибо. все супер! ЗЫ: добавил в закладки...

Комментарий добавил(а): Павлуха
Дата: 2015-04-02

Стас, твоя проблема решается очень легко: в myform удаляешь поле var p=/^[a-z0-9_.-]{3,35}$/i; в блоке с Name. как я понял это ограничения по имволам и языку=))))) вуаля за статью спасибо

Комментарий добавил(а): Павлуха
Дата: 2015-04-03

а вообще я не прав! удаление этой строки прерывает проерку корректноси ввода данных. лучше её чуть дополнить: var p=/^[а-яa-z0-9_.-]{3,35}$/i; кайфуем)))))

Комментарий добавил(а): Админ
Дата: 2015-07-12

ывывыфвфы

Комментарий добавил(а): Евгений
Дата: 2015-09-27

Помогите как сделать чтоб пользователь мог в Имя ввести Кириллицу! И еще почему то не присылается на почту сообщения.

Комментарий добавил(а): Леха
Дата: 2016-10-21

А я стал юзать конструктор онлайн форм Тестограф. Там можно быстро создать форму любой сложности. Всем рекомендую: https://www.testograf.ru/ru/blog/forma-obratnoj-svyazi.html

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


Введите сумму чисел с картинки:

Почему стоит подписаться на обновления блога

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail: