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

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

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

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

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

Посмотрите на php-код в предыдущей статье, даже просто на комментарии к строкам, и вы легко определите проверяемые параметры. Например, для строки ввода имени проверяется количество введенных букв (не может быть более 20 символов) или их отсутствие (empty). Аналогично проверяются и другие разделы формы.

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

Дополнительное удобство проверки формы с помощью 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;
// регулярное выражение для проверки отправителя
var reg_sender = /[a-z]+/i;
// объявляем переменную, куда будет заноситься текст сообщения об ошибке
var error_msg = "Некорректно заполнены поля: ";
//проверка поля отправитель
if(reg_sender.exec(sender) == null && sender ==""){
error_msg += "Ваше имя ";
return_value = false;
}
//проверка поля почтовый ящик
if(reg_mail.exec(mail) == null){
error_msg += "Ваш e-mail ";
return_value = false;
}
//проверка поля текст сообщения
if(msg == ""){
error_msg += "Ваше сообщение ";
return_value = false;
}
//проверка на наличие ошибок, если возникла ошибка, выводим текст сообщения
if(!return_value)
alert(error_msg);
return return_value;
}//-->
</script>

Данный скрипт необходимо вставить в HTML-код страницы, лучше всего между тегами <head>...</head>.

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

Рис.1. Сообщение в Internet Explorer при попытке отправить пустую форму

Рис.2. Сообщение в Opera при попытке отправить пустую форму

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

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

26.11.2009 г.

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

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

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