www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

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

Логотип Софт

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

Многостраничная форма обратной связи

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

Ваше имя:

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

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

Рис.1. Исходная форма обратной связи

Разобьем её на три части (страницы). Первая страница, назовем её 1.html, будет такая - рис.2:

Для заказа крокодила заполните следующую форму:
Ваше имя:


Рис.2. Первая часть формы обратной связи - ввод имени

Соответствующий ей HTML-код выглядит так:
<!--Форма для ввода имени -->
<form method="post" action="1_name.php">
<strong>Ваше имя:</strong><br />
<input type="text" name="name" size="30"/>
<br />
<br />
<input type="submit" value="Далее"/>
</form>

После ввода имени и нажатия кнопки Далее происходит переход на страницу 1_name.php, которая выполняет программу отправки первого письма с введенным именем и выводит вторую часть формы для продолжения допроса посетителя - рис.3:

Укажите ваш e-mail:


Рис.3. Вторая часть формы обратной связи - ввод e-mail

Полный код этой страницы приведен ниже:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<?php
if (isset($_POST['name'])) {$name = $_POST['name'];}

$to = "pupkin@rambler.ru";//Укажите ваш реальный адрес
$headers = "Content-type: text/plain; charset = windows-1251";
$subject = "Заказ крокодила - имя";
$message = "Имя пославшего - $name";
$send = mail ($to, $subject, $message, $headers); //Отправка письма с именем
if ($send == 'false')
{
echo "<p><b>Возникла ошибка.";
echo "<p><b>Вернитесь к <a href=1.html>оформлению заказа</a> или свяжитесь с нами по телефону.";
exit;
}
?>
<!--Форма для ввода e-mail -->
<form method="post" action="2_mail.php">
Ваш e-mail:<br />
<input name="email" type="text" size="30" />
<br />
<br />
<input type="submit" value="Далее" />
</form>
</body>
</html>

Как видим, в РНР-части страницы (все, что заключено между <?php и ?>) задается отправка письма с именем. При ошибке предлагается вернуться назад к заполнению формы, а в случае успешной отправки выводится вторая часть формы обратной связи для ввода e-mail. После нажатия кнопки Далее будет вызвана страница 2_mail.php. HTML-код этой страницы практически аналогичен 1_name.php, только теперь вместо имени идет отправка введенного е-mail и предлагается ввести текст сообщения:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<?php
if (isset($_POST['email'])) {$email = $_POST['email'];}

$to = "pupkin@rambler.ru";//Укажите ваш реальный адрес
$headers = "Content-type: text/plain; charset = windows-1251";
$subject = "Заказ крокодила - e-mail";
$message = "Е-mail пославшего - $email";
$send = mail ($to, $subject, $message, $headers); //Отправка письма с именем
if ($send == 'false')
{
echo "<p><b>Возникла ошибка.";
echo "<p><b>Вернитесь к <a href=1_name.php>оформлению заказа</a> или свяжитесь с нами по телефону.";
exit;
}
?>
<!--Форма для ввода сообщения -->
<form method="post" action="3_mess.php">
Ваше сообщение:<br />
<textarea name="mess" rows="2" cols="30"></textarea>
<br />
<br />
<input type="submit" value="Отправить" />
</form>
</body>
</html>

Результат выполнения этой программы с последней, третьей частью формы обратной связи следующий - рис.4:

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


Рис.4. Третья часть формы обратной связи - ввод сообщения

После ввода сообщения допрос посетителя закончен и нажатием кнопки Отправить выполняется заключительная отправка третьего письма - страница 3_mess.рнр. На всякий пожарный, для самых блондинистых блондинок привожу и её код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<?php
if (isset($_POST['mess'])) {$mess = $_POST['mess'];}

$to = "pupkin@rambler.ru";//Вставьте ваш адрес
$headers = "Content-type: text/plain; charset = windows-1251";
$subject = "Заказ крокодила - сообщение";
$message = "О крокодилах - $mess";
$send = mail ($to, $subject, $message, $headers); //Отправка письма с сообщением
if ($send == 'true')
{
echo "<b>Спасибо за заказ крокодила!<p>";
echo "<a href=index.html>Нажмите,</a> чтобы вернуться на главную страницу";
}
else
{
echo "<p><b>Возникла ошибка.";
echo "<p><b>Вернитесь к <a href=1.html>оформлению заказа</a> или свяжитесь с нами по телефону.";
}
?>
</body>
</html>

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

Для практического применения описанный способ не годится и надо обеспечить получение одного письма со всеми введенными посетителем данными. Сделать это, понимая принцип создания многостраничной формы обратной связи, совсем просто, и страницы получаются менее громоздкими. Об этом подробно будет рассказано в следующей статье.

15.09.2012 г.

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

Задать вопрос автору





Яндекс.Метрика

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: создание формы обратной связи, форма обратной связи, скрипт формы обратной связи, продвижение сайта