Форма обратной связи html5

Форма обратной связи html5

Форма обратной связи для сайта на HTML5 + CSS3 + jQuery + php. Валидация и экранирование введенных данных, проверка правильности ввода полей формы обратной связи.

Форма обратной связи HTML5 + CSS3 + jQuery + php

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

Форма обратной связи будет состоять из 3 полей ввода данных — имя, адрес электронной почты и текст письма. Все поля будут обязательны для заполнения, отправить пустое письмо будет нельзя. Поле ввода адреса электронной почты дополнительно будет проходить валидацию на правильность ввода. Данные будут представлены в html коде, стили оформления формы обратной связи будут прописаны в отдельном CSS файле. По принципу данного скрипта возможно создание по аналогии большего или меньшего количества полей ввода.

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

Итак, мы завершаем цикл уроков по версте сайта с нуля с flat дизайном. Напомню, что на первом уроке мы верстали шапку сайта. На втором уроке — секцию с картинкой на весь экран. На третьем уроке — галерею с работами портфолио. На четвертом уроке — трехколоночный макет. И как завершающим этапом, сегодня мы делаем верстку формы обратной связи и подвала.

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

Вот, что у нас должно получиться.

Я не буду здесь приводить весь код, он слишком большой. Код целиком и готовый результат вы можете увидеть на jsfiddle.

Читайте также:  Частота кадров 50i 50p в чем разница

Моя задача показать вам принципы верстки, так сказать логику, как думает верстальщик, глядя на макет. Сначала он мысленно разбивает весь макет на большие секции. Затем каждую секцию внутри делит на маленькие блоки. Смотрите на скриншоте ниже.

Сама форма обратной связи помещена в теге div с классом part_2_of_3 и занимает она две трети от ширины родителя.

Затем идет второй блок в теге div с классом part_1_of_3. Занимаемая им ширина — соответственно одна треть от родительского блока.

.con <
display: block;
float:left;
margin: 3% 0 3% 1.5%;
>
.con:first-child <
margin-left:0; /* прижатие блока с формой к левому краю */
>
.part_2_of_3 <
width: 66%; /* ширина блока с формой */
>
.part_1_of_3 <
width: 32%; /* ширина блока с информацией */
>
.cont-form <
padding-bottom: 25px; /* отступ снизу от формы блока */
>
.cont-form div <
padding: 5px 0 15px;
>
.cont-form input[type="text"],.cont-form input[type="email"],.cont-form textarea <
width: 42%; /* ширина полей для ввода текста и емейла */
padding: 15px;
display: block;
outline: none;
background-color: #fff; /* цвет ячеек формы */
color: #888282; /* цвет вводимого текста формы */
font-size: 0.8em; /* размер шрифта вводимого текста формы */
float:left;
margin-right: 2em; /* отступ справа */
font-family: Verdana, sans-serif;
font-style: italic; /* вводимый текст курсивом */
border: 2px solid #cacaca; /* граница ячеек формы */
>
.cont-form input[type="email"] <
margin-right: 0em; /* отступ справа */
>
.cont-form textarea < /* значения для текстовой области формы */
padding: 18px; /* все поля в текстовой области */
display: block;
width: 93%; /* ширина формы текстовой области */
height:180px; /* высота формы текстовой области */
background-color: #fff; /* wdtn фона текстовой области */
outline: none;
color: #888282; /* цвет вводимого текста в текстовую область */
font-size: 0.8em; /* размер шрифта текстовой области */
font-style: italic; /* курсив для текстовой области формы */
border:2px solid #cacaca;
margin-bottom: 2em;
>
.cont-form input[type="submit"] <
font-family: Verdana, sans-serif;
font-size: 1em;
color:#fff;
padding: 0.7em 1.4em;
margin-right: 2%;
background-color: #a97b7b;
border:none;
display: block;
cursor: pointer;
outline: none;
text-transform: uppercase; /* трансформация в заглавные буквы */
float: right;
>
.comp_add p <
font-size:0.8em;
color:#525252;
line-height: 1.8em;
margin-bottom: 2%;
>
.comp_add a <
font-size:1.1em;
color:#525252;
line-height: 1.8em;
margin-bottom: 2%;
>
.list2 li img <
margin-top: 4px;
float:left;
>
.list2 li .icon <
float:left;
padding-left: 1em;
>

Читайте также:  Что означает перевернутый смайлик с улыбкой

Верстка подвала

С версткой подвала дело обстоит намного проще. Внутри тега footer, находится блок div с копирайтом и ссылкой.

footer <
background: #303441;
padding: 24px 0;
>
.copy_val <
font-size: 0.714em;
line-height: 1.7em;
color: #666d89;
text-align: center;
>
.copy_val a <
color: #eee;
>
.copy_val a:hover <
color: #a97b7b;
>

Полный код представлен на фиддле

Смотрите ниже, что в итоге получилось. До новых встреч!

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

В этой статье вы научитесь оформлению контактной формы с помощью HTML5 и CSS3.

Прежде всего

Что такого крутого в этой контактной форме? Чем же она отличается от всех других?

Я бы сказал так… в этой форме мы не концентрируем внимание на функциональность. Фишка в этой статье в том, как оформить форму с помощью CSS3.

form-wrapper и form-inner нам понадобятся, когда мы будем писать CSS код.

Вместо того, чтобы добавлять CSS классы для каждого элемента формы, я воспользуюсь следующим CSS селектором: input[type="text"].

Его цель состоит в том, чтобы увеличить удобство и простоту использования.

HTML5

Тут же мы будем использовать новый HTML5 атрибут placeholder. Это очень прикольная штука.

Используя новые возможности CSS3, такие как box shadow и gradient, мы можем создать интересный фон. Далее следует CSS:

Кнопка

Ниже вы найдёте CSS3 код, для оформления кнопки:

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.red-team-design.com/html5-css3-envelope-contact-form
Перевел: Станислав Протасевич
Урок создан: 28 Июня 2011
Просмотров: 39861
Правила перепечатки

Читайте также:  Как в экселе поставить прочерк в ячейке

5 последних уроков рубрики "CSS"

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Ссылка на основную публикацию
Утилиты асус для ноутбука
Драйверы и утилиты от производителя для ноутбуков и нетбуков ASUS под операционную систему Windows 10 / 8.1 / 8 /...
Теплопроводность олова и меди
Все изделия, используемые человеком, способны передавать и сохранять температуру прикасаемого к ним предмета или окружающей среды. Способность отдачи тепла одного...
Терминальные лицензии windows server 2008 r2
Установка сервера терминалов в 2008/2008R2 2 часть / активация сервера терминалов 2008 r2 Установка сервера терминалов в 2008/2008R2 2 часть...
Утилиты для виндовс 10 64 бит
Скачать антивирус NOD32 на компьютер Windows 10 бесплатно на русском языке для защиты ноутбука или ПК от вирусов и потенциального...
Adblock detector