Веб-дизайн и поисковая оптимизация

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

• Создание формы обратной связи на сайте
• Проверка ввода формы обратной связи
• Простая форма обратной связи с проверкой введенных данных
• Создание анкеты на сайте
• Проверка формы обратной связи "на лету"
• Отправка файлов через форму обратной связи
• Капча в форме обратной связи
• Простая капча для формы обратной связи
• Заказ товаров и услуг через форму обратной связи
• Форма обратной связи - отправка писем на разные адреса
• Проблемы с кодировкой в форме обратной связи
• Создание кнопок в форме обратной связи
• Календарь в форме обратной связи
• Оформление формы обратной связи
        >> смотреть все статьи о создании формы обратной связи

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

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

Проверку с помощью РНР рассмотрим в следующей статье, а сейчас остановимся на проверке в браузере.

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

Дополнительное удобство проверки формы с помощью JavaScript для веб-разработчика - отсутствие необходимости использовать работу с сервером для отладки скрипта. Всё проверяется на локальном компьютере.

Основным способом организации проверки ввода данных является добавление функции JavaScript к созданной форме. Для этого добавим в созданную нами форму обратной связи в теге <form> атрибут onSubmit:

<form action="mail.php" method="post" onsubmit="return checkForm(this);">

Далее определим, что мы хотим проверять при заполнении формы посетителем сайта. Естественно, необходимо проверить наличие текста сообщения и правильность ввода e-mail (или телефона) для ответа. Заполнение графы Имя можно оставить на совести посетителя. В конце концов, не все же любят представляться при обращении. То ли культуры им не хватает, то ли они очень скромные.

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

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

1. Поле Ваш e-mail (для ответа) - наличие следующих обязательных элементов и их последовательности: цифры и латинские буквы, @, цифры и латинские буквы, точка, латинские буквы. Тут, кстати, я вспомнил про начало регистрации доменных имён в зоне .РФ - на многих сайтах придется менять алгоритм проверки формы обратной связи, так как в e-mail теперь могут появиться знаки кириллицы;
2. Поле Ваше имя - просто наличие букв и цифр. (Каких только "ников" не бывает!);
3. Поле Ваше сообщение - также наличие хоть чего-нибудь, кроме пустого места.

<script type="text/javascript">
function checkForm(obj){
var return_value = true;
// заносим значение поля почтовый ящик в переменную mail
var mail = obj.email.value;
// заносим значение поля отправитель в переменную sender
var sender = obj.name.value;
// заносим значение поля сообщение в переменную msg
var msg = obj.mess.value;
// регулярное выражение для проверки почтового ящика
var reg_mail = /[0-9a-z_]+@[0-9a-z_^.]+.[a-z]{2,3}/i;
// регулярное выражение для проверки отправителя (буква a - латинская)
var reg_sender = /[a-я,0-9]/i;
// объявляем переменную, куда будет заноситься текст сообщения об ошибке
var error_msg = "Некорректно заполнены поля:\n";
//проверка поля отправитель
if(reg_sender.exec(sender) == null){
error_msg += "Ваше имя\n";
return_value = false;
}
//проверка поля почтовый ящик
if(reg_mail.exec(mail) == null){
error_msg += "Ваш e-mail\n";
return_value = false;
}
//проверка поля текст сообщения
if(msg == ""){
error_msg += "Ваше сообщение\n";
return_value = false;
}
//проверка на наличие ошибок, если возникла ошибка, выводим текст сообщения
if(!return_value)
alert(error_msg);
return return_value;
}
</script>

Данный скрипт необходимо вставить в HTML-код страницы, лучше всего между тегами <head>...</head>. Обратите внимание, что при проверке поля отправитель в выражении
var reg_sender = /[a-я,0-9]/i;
буква а - латинская, чтобы разрешить ввод и русских и латинских букв (см. статью Проверка формы обратной связи "на лету").

Результат работы скрипта вы можете посмотреть на примере нашей формы обратной связи при нажатии кнопки Отправить сообщение без заполнения полей :

Ваше имя:

Ваш e-mail (для ответа):

Ваше сообщение:

Как говорилось выше, скрипт не будет работать, если в браузере отключена поддержка JavaScript. Поэтому, если пользователь установит галку "Остановить выполнение сценариев для данной страницы" (рис.2), то спокойно может отправлять пустую форму обратной связи. Этим часто пользуются спамеры. Так что всегда полезно продублировать описанную проверку на стороне сервера с помощью РНР.

Конечно, описанным способом вы можете проверить любые поля формы обратной связи, независимо от их количества, например, заполнение анкеты, или оставить необязательные поля без проверки заполнения.

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

26.11.2009 г.

Далее - Создание анкеты на сайте

Ещё статьи по теме "Создание, оптимизация и раскрутка сайта":
• Как раскрутить сайт (серия статей)
• Создание формы обратной связи
• Создание иконки для сайта
• Создание выпадающего меню
• Вебдизайн с jQuery - это очень просто!
• Курсор как элемент веб-дизайна
• Создание гостевой книги на сайте
• Фон для сайта
• Вывод текущей даты на сайте
• Создание бегущей строки на сайте
• Создание "схемы проезда" на сайте
• Ключевые слова и продвижение сайта
• Оптимизация и ускорение компьютера. Обзоры программ

см. все статьи по веб-дизайну >>