Дизайн формы заказа с помощью CSS


Написать эту статью об оформлении формы заказа, работающую на php скрипте, меня побудили просьбы читателей. Эта запись является логическим продолжением моей старой заметки, где я рассказывал о том, как сделал форму заказа для сайта в лайтбоксе. Сейчас я постараюсь наиболее понятно рассказать читателям блога об оформлении той самой формы с помощью CSS. Форма заказа в лайтбоксе – это html страница отображаемая как iframe в лайтбоксе wp-prettyPhoto.

Содержимое формы

Архив формы заказа

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

К файлу формы прикреплены еще два файла – это файл стилей, form-css.css который прикрепляется с помощью строки

<link rel="stylesheet" type="text/css" href="/form/form-css.css" />

и файл конфигурации config.php, который прикрепляется с помощью строки

require_once("config.php");

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

В файле form-css.css находятся данные оформления формы. В этом файле вы обнаружите мои комментарии.

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