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

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

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

Форма обратной связи - примеры использования

При создании формы обратной связи на сайте можно изменять не только её внешний вид, но и функциональность в зависимости от конкретных задач. Для этого удобно использовать различные атрибуты тегов полей ввода <input>, <select> и др. Рассмотрим несколько простых и полезных примеров. Как всегда, они действующие и их HTML-код можно посмотреть (и позаимствовать) в исходном коде данной страницы.

 1. Вывод подсказки при наведении указателя мыши на поле формы обратной связи. Для этого необходимо указать текст подсказки в атрибуте title тега <input>:

Ключевые слова:

 2. Вывод подсказки непосредственно в ячейке формы с помощью атрибута value тега <input>. Здесь же показано и использование тега <select> для выбора вариантов ответа о времени обратного звонка из выпадающего списка:

Полный HTML-код этого примера следующий:
<table width="200" border="1" align="center" cellpadding="3" cellspacing="0">
<tr>
<th bgcolor="#FFCC66" >ОБРАТНЫЙ ЗВОНОК</th>
</tr>
<tr bgcolor="#FFFFCC">
<td width="200" ><p style="font-size:12px">Введите Ваш номер телефона, и мы свяжемся с Вами в удобное для Вас время</p>
<form action="" method="post" onsubmit="return checkForm(this);">
<input name="name" type="text" value="Ваше имя" />
<br />
<input name="phone" type="text" value="Номер телефона" />
<br />
<select name="time" size="1" >
<option>09.00 - 11.00</option>
<option>11.00 - 13.00</option>
<option>13.00 - 15.00</option>
<option>15.00 - 17.00</option>
<option>17.00 - 19.00</option>
<option>19.00 - 21.00</option>
</select>
<br />
<br />
<input type="submit" value="Отправить" />
</form></td>
</tr>
</table>

Обратите внимание на значение атрибута size тега <select>: если ему присвоено значение "1", то выводится выпадающий список, как в приведенном примере, а при любом другом значении - обычный список с полосой прокрутки. Если вам необходимо выбирать несколько элементов из списка, то установите атрибут multiple. В этом случае, конечно, список всегда имеет обычную форму с полосой прокрутки, даже если установлено size=1. Подробнее об особенностях применения тега <select> рассказано в статье "Выбор нескольких элементов в теге <select> формы обратной связи".

 3. Для обратной связи с посетителем обычно просят его указать адрес электронной почты. Между тем, многие посетители вполне обоснованно стараются не указывать свой e-mail, опасаясь спама, который начнет поступать на их почтовый ящик. В этом случае рекомендуется предлагать альтернативный вариант - ввод номера телефона:

Укажите ваш e-mail или телефон (для ответа):

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

 4. При оформлении формы обратной связи можно использовать любые средства дизайна, встраивая форму на страницу сайта как обычный HTML элемент. При этом для сохранения правильной верстки желательно указывать значения атрибута size - ширина поля ввода в символах (по умолчанию 20 символов), а также maxlength - максимально допустимое число символов в строке, чтобы ограничить словесный водопад посетителя сайта.

 5. В случае необходимости предоставить пользователю возможность выбора между несколькими фиксированными параметрами используют флажки и переключатели. Флажки позволяют выбрать любое количество параметров, а переключатели - только один из списка. Тип элемента управления указывается в атрибуте type тега <input>: checkbox - флажок, radio - переключатель. Следующий пример показывает различие в применении флажков (слева) и переключателей (справа):

Код этого примера также понятен, надеюсь, без пояснений:
<table width="90%" border="1" align="center" cellpadding="3" cellspacing="0" >
<tr bgcolor="#FFCC66">
<th width="50%">Укажите интересующие вас<br />
страховые компании:</th>
<th>Выберете вид страхования:</th>
</tr>
<tr bgcolor="#FFFFCC">
<td><input name="company" type="checkbox" value="Росгосстрах"/>
Росгосстрах<br />
<input name="company" type="checkbox" value="Ренессанс"/>
Ренессанс<br />
<input name="company" type="checkbox" value="СОГАЗ"/>
СОГАЗ<br />
<input name="company" type="checkbox" value="Ингосстрах" />
Ингосстрах<br />
<input name="company" type="checkbox" value="МАКС" />
МАКС</td>
<td valign="top"><input name="company" type="radio" value="Каско"/>
Каско<br />
<input name="company" type="radio" value="Осаго"/>
Осаго<br />
<input name="company" type="radio" value="Имущество"/>
Имущество<br />
<input name="company" type="radio" value="Жизнь" />
Жизнь </td>
</tr>
</table>

 6. Оформление текстого поля. Для его создания используется пара тегов <textarea >...</textarea> со следующими атрибутами:

• name - имя текстового поля;
• rows - количество строк в поле;
• cols - количество колонок в поле;
• wrap - параметры переноса слов: soft - автоматический перенос в текстовом поле, но в данных формы сообщение передаётся одной строкой, hard - автоматический перенос и в поле и в передаваемых данных, off - перенос только вручную;
• readonly - при установке этого атрибута текстовое поле недоступно для редактирования (используется для демонстрации примеров сообщения);
• disabled - также делает текст недоступным для редактирования, но элемент управления и текст отображаются бледным серым цветом.

Если вы хотите задать в поле текст по умолчанию, то просто введите его между тегами <textarea >...</textarea>.

Оставьте здесь своё сообщение

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

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

27.07.2010 г.

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