|
Делам форму заказа товара на своём сайте.
Часть 1.
В конце проделанной работы мы получим страницу с
формами, которые необходимо будет заполнить вашему пользователю у вас на сайте,
после чего он нажимает кнопку "Отправить заказ", и к Вам на E-mail
приходит письмо с сайта с заполненными данными от
пользователя.
Пример
того, что должно получится->
Вопрос:
Как проходит процесс передачи письма с заполненными параметрами?
Ответ:
форма заказа состоит из двух фалов:
-
Первый файл, тот который видит пользователь,
это файл страницы с формами, которые необходимо заполнить
-
Второй фал - обработчик. Написан этот файл на
языке PHP, который работает на сервере. Поэтому
при проверке написанного вами файла необходимо загрузить его на сервер
хостинга, или при возможности на локальный сервер, установленный у Вас на
компьютере.
Итак начнем. Первое, что хотелось бы сказать -
это, что ни чего сложного в этом уроке нет, от Вас потребуется только
внимательность.
Первое, с чего мы начнем, это откроем новую
страницу в Веб-Узле и пропишем следующее в режиме
отображения кода:
| <form
action="send.php" method="post" > |
увеличить
Сразу же поясню, что мы только что дали понять
серверу, что форму, которая расположится ниже будет обрабатывать файл "send.php",
который должен находится в папке, где находится страница с формой заказа. Этот
файл мы создадим позже...
Ниже прописываем строчку, с названием товара, для
которого делается форма заказа. Эту строчку необходимо
будет изменять для каждой формы заказа, сделанной Вами.
Не забывайте об этом, чтобы не приходили письма с
названием товара, который не заказывал пользователь.
| <input
type="hidden" value="Сюда необходимо
вписать название товара, для которого
сделана форма" name="tovar"> |
увеличить
Теперь переходим к визуальной части, которую
будет видеть пользователь, а именно сама форма:
<div
align="center"><!-- Выравниваем по
центру таблицу -->
<!-- Основная таблица -->
<table border="1" width="600" id="table1"
cellspacing="0" cellpadding="0"><!--
Параметры таблицы, можно изменить под
свой сайт -->
<tr>
<td align="center" width="200" valign="top"> </td>
<td align="center" valign="top"> </td>
</tr>
</table>
<!-- Конец основной таблицы -->
</div><!-- Конец выравнивания по
центру таблицу --> |
увеличить
Обратите
внимание, что </Form> (конец формы) должен находится в
конце таблицы после тега её закрытия </table>
увеличить
увеличить
увеличить
увеличить
Нажимаем OK и закрываем
окна настроек
увеличить
| <input
title="Введите количество единиц товара"
name="kolichestvo" size="20" value="1"
style="float: left"> |
-
Таким образом
добавив тег "title" и его параметр
"Введите количество
единиц товара", при наведении на это
поле будет высвечиваться подсказка.
-
Переходим на
строку ниже и в левом столбце пишем "Имя
покупателя", а в правом столбце опять
добавляем форму, как мы это делали раньше
через вставку - Вставка
> Форма >
Поле
-
Нажимаем
правой кнопкой по созданной форме и
переходим к "Свойства поля формы"
-
В открывшемся
окне вводим:
-
Имя -
pokupatel
(имя вводится
обязательно латинскими буквами)
-
Начальное
значение
-
Ширина в
знаках - сколько Вам удобно, например -
60
-
Поле
пароля - нет
-
Переходим на
строку ниже и в левом столбце пишем "Адрес
отправки:",
а в правом столбце опять добавляем
форму, как мы это делали раньше через
вставку - Вставка >
Форма >
Поле
-
Нажимаем
правой кнопкой по созданной форме и
переходим к "Свойства поля формы"
-
В открывшемся
окне вводим:
-
Имя -
otpravka
(имя вводится
обязательно латинскими буквами)
-
Начальное
значение
-
Ширина в
знаках - сколько Вам удобно, например -
60
-
Поле
пароля - нет
-
Таких полей
можно создавать много... Столько, сколько
нужно Вам получить информации от клиента.
Главное, и самое важное - присваивать имена
полям латинскими буквами, и желательно
записывать их, или запоминать в ходе работы.
-
Ниже мы
создадим более сложную форму, где покупатель
должен будет выбрать параметр падающего меню:
-
Переходим на
строку ниже и в левом столбце напишем,
например - "Комплектация:"
,а в правом
столбце опять добавляем форму, но уже
немного другую, а именно -
"Раскрывающийся список"
увеличить
-
Нажимаем правой кнопкой по созданной форме и
переходим к "Свойства поля формы"
-
В открывшемся окне вводим:
-
Имя - komplektaciya
(имя вводится обязательно латинскими буквами)
-
Высота строки - по желанию... Например -
1
-
Разрешен ли выбор нескольких элементов -
да, или нет
-
После этих настроек нажимаем "Добавить"
и вводим варианты
увеличить
C
помощью кнопок "Вверх" и "Вниз" можно перемещать
варианты по позициям.
После необходимых настроек нажимаем
OK и закрываем окна.
-
Последнее, что необходимо сделать - вставить
кнопку "Заказать", после нажатия на которую будет сформировано письмо
с заказом, которое придет к Вам на E-mail
-
Переходим в последнюю ячейку нашей таблицы и
вставляем туда обычную кнопку: Вставка
> Форма > Кнопка
увеличить
увеличить
Нажимаем OK
Добавление от 19.03.2011:
Если у Вас уже сделан сайт, то необходимо к
данной странице применить динамический Веб-Шаблон. Сделать это можно через меню
Формат >
Динамический Веб-Шаблон >
Присоединить динамический Веб-Шаблон...
увеличить
В открывшемся окне необходимо выбрать шаблон,
сделанный в формате .dwt
Переходим к следующей части урока, а именно к созданию
PHP файла который будет обрабатывать всю полученную
информацию.
Перейти ко второй
части урока ->
Автор:
MHz-Serge
Комментировать
урок можно здесь--->> |
