Делаем контактную форму. HTML5 и CSS3

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

Для того чтобы не возиться с кроссбраузерностью, будем использовать в качестве каркаса HTML5 Boilerplate.
Переходим по ссылке http://www.initializr.com/
Выбираем параметры и скачиваем.
custom boilerplate

В index.html добавляем код формы:

В main.css находим место для авторских стилей(Author’s custom styles) и добавляем стили нашей формы.

Теперь, когда внешний вид формы готов, будем работать с ее содержанием. Для этого создаем файл sendmail.php, там же где находится index.html
Добавляем обработку формы и отправление сообщения на электронную почту:

Теперь переименовываем index.html в contact.php и добавляем код для вывода данных, переданных от sendmail.php. В итоге файл contact.php будет выглядеть так:

Посмотреть, как форма будет выглядеть в итоге можно на моей странице для связи.

One thought on “Делаем контактную форму. HTML5 и CSS3

  1. Pingback: Как сделать свою контактную форму в Wordpress | omyblog.ru

Добавить комментарий

Ваш e-mail не будет опубликован.

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">