www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Создание формы обратной связи
• Создание формы обратной связи на сайте
• Проверка ввода формы обратной связи
• Простая форма обратной связи с проверкой введенных данных
• Создание анкеты на сайте
• Проверка формы обратной связи "на лету"
• Отправка файлов через форму обратной связи
• Капча в форме обратной связи
• Простая капча для формы обратной связи
• Заказ товаров и услуг через форму обратной связи
• Форма обратной связи - отправка писем на разные адреса
• Проблемы с кодировкой в форме обратной связи
• Создание кнопок в форме обратной связи
• Календарь в форме обратной связи
• Оформление формы обратной связи
>> смотреть все статьи о создании формы обратной связи
Многостраничная форма обратной связи
Довольно часто при заполнении длинной формы обратной связи требуется разбить её на несколько частей, переход к которым обычно идет по кнопке Далее или Продолжить. Как всегда, способов реализации этого существует несколько. Для начала, рассмотрим простейшее решение "в лоб", когда каждая страничка с частями формы обратной связи отправляется отдельным письмом. Издеваться будем над созданной ранее простейшей формой обратной связи - рис.1:
Рис.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:
Рис.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=utf-8" />
</head>
<body>
<?php
if (isset($_POST['name'])) {$name = $_POST['name'];}
$to = "pupkin@rambler.ru";//Укажите ваш реальный адрес
$headers = "Content-type: text/plain; charset = utf-8";
$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=utf-8" />
</head>
<body>
<?php
if (isset($_POST['email'])) {$email = $_POST['email'];}
$to = "pupkin@rambler.ru";//Укажите ваш реальный адрес
$headers = "Content-type: text/plain; charset = utf-8";
$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=utf-8" />
</head>
<body>
<?php
if (isset($_POST['mess'])) {$mess = $_POST['mess'];}
$to = "pupkin@rambler.ru";//Вставьте ваш адрес
$headers = "Content-type: text/plain; charset = utf-8";
$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:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru