Скрипт анкеты для сайта

Органы управления

Анкеты создаются при помощи форм (Form — по английски это и есть анкета). На форме могут находиться несколько органов управления. Например, поле для ввода текста, кнопки и т.д. Форму можно применять для работы с JavaScript или для создания анкет, которые будет высылать вам результаты заполнения. В этом разделе мы рассмотрим именно последнюю возможность.

Создать форму во FrontPage очень просто. Для этого надо зайти в меню и выбрать Insert > Form Field > — и какой-нибудь орган управления, например — One-Line Text Box. FrontPage автоматически создаст форму, вставит в нее кнопки обновления и стирания результатов и, разумеется, наш заказанный орган управления One-Line Text Box. Границы формы при редактировании будут обведены пунктиром. Вот результат:

Кнопка Submit будет отсылать результаты, а кнопка Reset будет очищать форму. Если названия кнопок не нравятся, их можно поменять. Можно добавить другие органы управления в эту форму. Для этого поставьте курсор внутрь формы и добавьте еще один орган управления.

Чтобы настроить орган управления, нужно сделать на нем двойной щелчок мышкой. После этого появится окно настроек. Рассмотрим органы управления и некоторые их настройки. У каждого органа есть имя (Name). Имя должно быть уникальным, чтобы можно было различать органы управления.

Кроме этих видимых органов управления есть еще и невидимые органы. Они могут понадобиться для задания разных параметров в анкете, о которых читателю знать не надо. Вот как выглядит невидимый орган в HTML:

INPUT type=" hidden " name=" subject " value=" Тема письма " >

Здесь невидимый орган управления (тип — hidden) с именем "subject" содержит значение "Тема письма".

Отправка результата (1-ый способ)

После нажатия на кнопку Submit форма отправляет результат заполнения. Для этого происходит вызов скрипта на указанном сервере, который дальше уже решает, что делать с результатом (Скрипт — это специальная программа на сервере). Чаще всего результат переправляется по указанному E-mail или записывается в специальный файл на сервере, который будет доступен только вам. Как вызвать скрипт и как передать ему параметры, это уже зависит от конкретного скрипта. Но в большинстве случаев скрипты получают параметры от органов hidden и отправляют вам имена и значения всех видимых органов.

Вот что делает FrontPage при создании формы:

Но это подходит только для серверов полностью поддерживающих FrontPage. А если сервер не поддерживает FrontPage, то стирайте все, что помечено красным и выясняйте, как это делается для сервера, который вы собираетесь использовать. Вот как это делается для сервера провайдера CITYLINE.

form action=" http://www.cityline.ru/cgi-bin/formmail.ru " >
input type=" hidden " name=" recipient " value=" E-mail куда высылать результат " >
input type=" hidden " name=" subject " value=" Тема письма " >
input type=" hidden " name=" redirect " value=" Адрес страницы куда надо перейти после отправки результатов " >

А здесь видимые органы управления

В параметре action задается адрес используемого скрипта. Еще здесь бывает параметр method, который может иметь значение GET или POST. Он задает формат обращения к скрипту. Нужен ли этот параметр для вашего скрипта или нет, вам тоже надо узнать.

После запонения и отправки анкет подключенных с серверу CITYLINE я получаю примерно такие письма:

Below is the result of your feedback form. It was submitted by
() on Sunday, February 7, 1999 at 23:56:20
—————————————————————————
Читайте также  Сколько звуков в слове буквы ответ

NAME: Андрей Тушев

HOW_I_FIND: Нашел на Rambler ‘е

TEXT: Мне понравился мой сайт.
—————————————————————————

Английский текст заглавными буквами — это имена органов управления. То, что идет после двоеточия, это значение элемента управления. Все остальное — это уже творчество скрипта, который используется в данном случае. Еще раз отмечу, что вид результата полностью зависит от скрипта и от параметров, которые вы установили.

Отправка результата (2-ой способ)

Есть и другой, более простой, но иногда менее предпочтительный способ отправки формы. При этом способе вы используете почтовую программу (например Outlook Express), которая установлена у посетителя вашей анкеты. Результат заполнения будет помещен в папку исходящих писем, как обычное письмо.

При этом, браузер пользователя должен быть настроен на почтовую программу, и сама почтовая программа должна быть настроена. А если это не так, то анкета не будет отправлена. Кроме того, при такой отправке вам станет известен E-mail отправителя (браузер предупредит отправителя об этом), что может не всем понравиться. Вот как должен выглядеть HTML для такой анкеты:

Органы управления анкеты

Как видите, вместо адреса скрипта указана ссылка на почтовую программу. В параметрах надо указать E-mail, куда должны придти письма с результатами и тему письма. Параметры enctype и encoding задают кодировку письма.

После того как пользователь заполнит анкету и отправит свою почту, вы получите письмо примерно такого вида:

Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов Ваш браузер не поддерживает технологию iframes. Для навигации используйте верхнее меню

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

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

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

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

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

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

Читайте также  Саи не удалось открыть холст
Рис.1. Пример формы обратной связи для расчёта КАСКО

Заполнение формы посетителем проверяем, для простоты, только для двух полей: "Ваше имя" и "Ваш E-mail и/или телефон (для ответа)", причём ограничимся наличием в этих полях любых букв или цифр. Соответствующий скрипт JavaScript и HTML-код приведенной формы обратной связи, естественно, можно посмотреть (команда CTRL+U) и скопировать для повседневных нужд в исходном коде данной страницы. Напомню, что в браузере IE для просмотра исходного кода надо выбрать в меню Вид-Источник. Если же вас вдруг заинтересуют расценки КАСКО, то отправить запрос и получить ответ можно здесь. Кстати, там же вы можете найти форму обратной связи с мгновенным онлайн расчетом ОСАГО с помощью JavaScript. Создание такого расчета подробно описано в статье Заказ товаров и услуг через форму обратной связи.

Вы, наверняка, заметили, что в некоторых разделах созданной нами формы-анкеты (например, Марка автомобиля) используются выпадающие (раскрывающиеся) списки. Их создание аналогично обычному полю ввода, только вместо тега применяется с соответствующими атрибутами. Подробно об этом рассказано в статье Форма обратной связи — примеры использования.

Идем дальше. Для того, чтобы заполненная форма-анкета поступила на нужный почтовый ящик, осталось только сделать РНР-файл и указать его имя в атрибуте action=" " тега . Как и раньше, назовём этот файл mail.php. По сравнению с описанным в статье "Простая форма обратной связи с проверкой введенных данных", он получается немного сложнее, но разобраться в нём довольно просто. Ниже приведен полный код страницы mail.php:

Обратная связь

pupkin@rambler.ru ";
$subject = "Заявка КАСКО";
$message = "Имя пославшего: $name

Электронный адрес: $phone

Марка автомобиля: $car

Модель автомобиля: $model

Год выпуска: $year

Месяц выпуска: $month

Мощность: $hp

Противоугонные средства: $antithief

Стоимость: $cost

Автомобиль приобретён в кредит: $kredit

Автомобиль уже на руках: $ruki

Название банка, выдавшего кредит: $bank

Риски: $risk

Количество лиц, допускаемых к управлению: $pilots

Возраст всех лиц, допущенных к управлению: $minage

Минимальный стаж всех лиц, допущенных к управлению: $minexp

Ваш город: $city

Комментарии: $comments
";
$send = mail ($to,$subject,$message);
if ($send == ‘true’)
<
echo " Спасибо за отправку вашей заявки.
В ближайшее время с Вами свяжутся наши менеджеры.

Нажмите, чтобы вернуться на главную страницу";
>
else
<
echo "Ошибка. Сообщение не отправлено!";
>
?>

Вы используете устаревший браузер. Этот и другие сайты могут отображаться в нём некорректно.
Необходимо обновить браузер или попробовать использовать другой.

Name — обязательный элемент, имя формы. Method — как будет обрабатываться наша форма. Action — путь к скрипту, который будет обрабатывать форму, или е-майл куда будут отправлены данные из формы. Т.к. у нас сайт популярный, серьезный, то я предполагаю, что мы, конечно же, установим скрипт для обработки опроса.

Что нам еще знакомо в этой форме? Поля для ввода текста (ФИО и е-майл):

Type=text — мы указали, что имеем дело с полем для ввода текста. Name — имена элементов. Size — размер полей для ввода текста. Maxlength — максимальное количество символов, которое сможет ввести наш посетитель в поле для ввода текста. Value — значение (в поле для ввода е-майл оно = @, чтобы пользователю было яснее, конечно, затем пользователь введет свое значение для того поля).

Читайте также  Служба техподдержки триколор тв номер телефона

Как видите, нам еще далеко до конечного результата.

Какие элементы формы нам еще знакомы тут? Кнопка отправки информации и кнопка сброса:

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

Начнем мы с "переключателей":

Особенность данного элемента формы в том, что разные его значения взаимоисключающи. Т.е. он предоставляет пользователю выбор: ИЛИ — ИЛИ. Или он — мужчина, или она — женщина, и то и другое выбрать не получится.

А теперь разберем код, который мы должны ввести в нашу форму:

Итак, "переключатели" вводятся в нашу форму при помощи знакомого вам тега , type для которого мы указываем radio (type=radio). Name — обратите внимание, что для "переключателей" имя одинаковое, т.к. по сути это один элемент (что мы и подчеркиваем, задавая ему одно имя), зато value (значение) — должно быть обязательно разным.

Теперь поговорим о следующем незнакомом нам элементе формы, о "флажках":

Этот элемент тоже предоставляет пользователю выбор. Чем же он отличается от "переключателей". "Флажки" предоставляют пользователю выбор И — ИЛИ. Т.е. пользователь может отметить один из предложенных вариантов, а может одновременно выбрать несколько вариантов (допустим, ваш посетителю любит как боевики, так и документальные фильмы). "Переключатели" же, как вы должны помнить, дают возможность выбрать только что-то одно из предложенного (ИЛИ — ИЛИ).

Но давайте посмотрим код для этого элемента формы и разберемся в нем:

Итак, как мы видим, во всем виноват знакомый нам тег , только в этот раз его атрибут type принимает значение checkbox (type=checkbox). Name — обратите внимание, имя для каждого "флажка" мы задаем свое, уникальное, зато значение (value) — для всех "флажков" одинаковое.

Если вы хотите, чтобы какой-то флажок или переключатель был выбран по умолчанию, то мы можем ввести в наш код для этого "флажка" или "переключателя" атрибут checked:

Как результат, в форме, предлагаемой посетителю будет уже отмечен пункт "приключенческие":

Конечно же, ваш посетитель сможет убрать эту пометку и выбрать потом свое.

Когда мы разобрались с "переключателями" и "флажками", перейдем к следующему незнакомому нам элементу в нашей форме:

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

Итак, выпадающий список вводится при помощи тега . Каждый пункт выпадающего списка вводится при помощи тега . Name — мы задаем только для тега

Также мы можем изменить разметку выпадающего списка, разбив его пункты на несколько групп, при помощи тега :

Вот и все премудрости с выпадающем списком.

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

Вот так, это выпадающий список, но стоит лишь добавить атрибут size для тега

Волшебство, да и только

Атрибут size определяет число строк в прокручивающемся списке, видимых в один момент времени. Size=4 — в нашем списке четыре видимых строки.

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

Ссылка на основную публикацию
Adblock
detector