Структура HTML Формы

Каждая строка у нас помещена в DIV контейнер, так гораздо удобнее располагать метки рядом с полем ввода. Вся форма помещена в DIV шириной 660px по центру страницы.

Структура CSS Формы

Вся анимация выполнена с новыми свойствами CSS 3. Все фоны выполнены обыкновенными градиентами. Обратите внимание на анимацию кнопки. Тени при наведении тоже выполнена на CSS3.

/* form styles */
form .row {
display: block;
padding: 7px 8px;
margin-bottom: 7px;
}
form .row:hover {
background: #f1f7fa;
}

Form label {
display: inline-block;
font-size: 1.2em;
font-weight: bold;
width: 120px;
padding: 6px 0;
color: #464646;
vertical-align: top;
}
form .req { color: #ca5354; }

Form .note {
font-size: 1.2em;
line-height: 1.33em;
font-weight: normal;
padding: 2px 7px;
margin-bottom: 10px;
}

Form input:focus, form textarea:focus { outline: none; }

/* placeholder styles: http://stackoverflow.com/a/2610741/477958 */
::-webkit-input-placeholder { color: #aaafbd; font-style: italic; } /* WebKit */
:-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 19+ */
:-ms-input-placeholder { color: #aaafbd; font-style: italic; } /* Internet Explorer 10+ */

Form .txt {
display: inline-block;
padding: 8px 9px;
padding-right: 30px;
width: 240px;
font-family: "Oxygen", sans-serif;
font-size: 1.35em;
font-weight: normal;
color: #898989;
}

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

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

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

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

В файле send.php править следующие строки: $to = "[email protected]"; $subject= "Message from site.ru"; $header="From: site.ru";;

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html, body { height: 100%; padding: 0; margin: 0; } body { background: #d3dce1; font-family: "Roboto", sans-serif; font-size: 14px; } .outer { display: table; width: 100%; height: 100%; text-align: center; } .middle { display: table-cell; vertical-align: middle; } .inner { text-align: center; width: auto; padding: 0 15px; } .login-wr { position: relative; margin: 0 auto; background: #fff; max-width: 550px; box-shadow: 3px 3px 24px #999; padding: 15px 15px 15px 15px; } h2 { text-align: left; font-weight: 200; font-size: 1.6em; margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid #eeeeee; color: #474747; } .form { padding-top: 20px; text-align: left; } input, input { margin-bottom: 25px; height: 40px; outline: 0; -moz-outline-style: none; } button { height: 40px; outline: 0; -moz-outline-style: none; } input { background: url("img/user.png") no-repeat left 10px center; } input { background: url("img/email.png") no-repeat left 10px center; } textarea { background: url("img/pencil.png") no-repeat left 10px top 10px; } textarea { width: calc(100% - 55px); height: 120px; border: 1px solid #bbb; padding: 10px 10px 10px 45px; font-size: 14px; } input, input { width: calc(100% - 45px); max-width: 250px; border: 1px solid #bbb; padding: 0 0 0 45px; font-size: 14px; } input:focus, input:focus { border: 1px solid #2196f3; } p { padding-bottom: 10px; } button { width: 100%; max-width: 150px; background: #e6ebee; border:none; border-bottom: 5px solid #d3dce1; color: #333; font-size: 14px; font-weight: 200; cursor: pointer; transition: box-shadow .4s ease; }

$(function() { $("#loader").hide(); $("form").submit(function(e) { var name = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); var data = "name=" + name + "&email=" + email + "&message=" + message; if(data) { $.ajax({ type: "POST", url: "./send.php", data: data, beforeSend: function(html) { $("#loader").show(); $("#submit").hide(); }, success: function(html){ $("#loader").hide(); $("#result").html(html); } }); } return false; }); });

1. Плагин для создания онлайн форм «jFormer»

Создание контактных форм: обратной связи, комментирования, форма входа, форма регистрации с проверкой правильности ввода информации.

2. Пошаговая форма регистрации с использованием jQuery

Аккуратная форма с пошаговым заполнением. Снизу указан индикатор заполнения формы.

3. Пошаговая форма

Заполнение формы в несколько шагов с проверкой правильности заполнения.

4. Контактная форма для сайта

Проверка правильности ввода ифнормации осуществляется «на лету» перед отправкой сообщения с использованием javascript.

5. Анимированное переключение между формами на jQuery

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

6. Выезжающая PHP форма обратной связи

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

7. PHP форма регистрации с использованием jQuery и CSS3

Форма с проверкой правильности ввода информации.

8. PHP форма регистрации в стиле Facebook

Симпатичная форма регистрации, реализованная с помощью CSS, PHP и jQuery.

9. jQuery контактная форма «SheepIt»

Реализована возможность перед отправкой сообщения добавлять новые поля.

10. Контактная форма «Fancy AJAX Contact Form»

Симпатичная аккуратная PHP форма обратной связи с проверкой правильности ввода информации. Технологии: CSS, PHP, jQuery.

11. Система авторизации/регистрации на сайте

12. Форма отправки данных

С проверкой правильности заполнения.

13. Плагин jQuery «Contactable»

Для реализации выезжающей формы обратной связи для быстрой отправки сообщения.

Форма обратной связи, или если по другому, один из самых важных элементов любого сайта. И конечно же, как и все другие элементы пользовательского интерфейса, контактные , должны быть как-то внешне стилизованы и оформлены, дабы привлечь внимание пользователей и расположить к общению.
Предлагаю на ваше обозрение парочку вариантов стилей форм обратной связи, исключительно средствами 3, без использования дополнительных изображений в оформлении. Ничего лишнего, лишь короткие фрагменты кода (сниппеты) для контактных форм, выполненных в светлых и тёмных тонах.

1. Контактная форма в тёмных тонах

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

Html каркас формы стандартный, необходимые поля ввода и кнопка «Отправить», для связки с CSS, каждому элементу формы присвоен определённый класс, ничего сложного, разобраться будет нетрудно.

< form> < input name= "name" placeholder= "Укажите ваше имя!" class = "name" required /> < input name= "emailaddress" placeholder= "Укажите ваш Email!" class = "email" type= "email" required /> < textarea rows= "4" cols= "50" name= "subject" placeholder= "Введите ваше сообщение:" class = "message" required> < input name= "submit" class = "btn" type= "submit" value= "Отправить" />

CSS

По стилям особо расписывать ничего не буду, отмечу лишь одно, в оформлении использовал некоторые свойства CSS3, линейный градиент, эффект тени, слегка скруглённые углы и т.д., постарался добиться некой кроссбраузерности для этих свойств, но в старых версиях браузеров, форма будет выглядеть всё же несколько иначе ((.

/* Базовый стиль формы */ form { margin: 0 auto; max- width: 95 %; padding: 30px 30px 6px 30px; border: 1px solid rgba(0 , 0 , 0 , .2 ) ; - moz- border- radius: 5px; - webkit- border- radius: 5px; border- radius: 5px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; background: rgba(0 , 0 , 0 , 0.5 ) ; - moz- box- shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; - webkit- box- shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; box- shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; overflow: hidden; } /* Поле сообщения */ textarea{ background: rgba(255 , 255 , 255 , 0.4 ) ; width: 100 %; height: 110px; border: 1px solid rgba(255 , 255 , 255 , .6 ) ; - moz- border- radius: 4px; - webkit- border- radius: 4px; border- radius: 4px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; display: block; font- family: "Open Sans" , sans- serif; font- size: 18px; font- weight: 300 ; color: #fff; padding- left: 25px; padding- right: 20px; padding- top: 12px; margin- bottom: 20px; overflow: hidden; } /* Поля ввода */ input { width: 100 %; height: 48px; border: 1px solid rgba(255 , 255 , 255 , .4 ) ; - moz- border- radius: 4px; - webkit- border- radius: 4px; border- radius: 4px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; display: block; font- family: "Open Sans" , sans- serif; font- size: 18px; font- weight: 300 ; color: #fff; padding- left: 20px; padding- right: 20px; margin- bottom: 20px; } input[ type= submit] { cursor: pointer; } input. name { background: rgba(255 , 255 , 255 , 0.4 ) ; padding- left: 25px; } input. email { background: rgba(255 , 255 , 255 , 0.4 ) ; padding- left: 25px; } input. message { background: rgba(255 , 255 , 255 , 0.4 ) ; padding- left: 25px; } ::- webkit- input- placeholder { color: #fff; } :- moz- placeholder{ color: #fff; } ::- moz- placeholder { color: #fff; } :- ms- input- placeholder { color: #fff; } input: focus, textarea: focus { background- color: rgba(0 , 0 , 0 , 0.2 ) ; - moz- box- shadow: 0 0 5px 1px rgba(255 , 255 , 255 , .5 ) ; - webkit- box- shadow: 0 0 5px 1px rgba(255 , 255 , 255 , .5 ) ; box- shadow: 0 0 5px 1px rgba(255 , 255 , 255 , .5 ) ; overflow: hidden; } /* Стили для кнопки отправить */ . btn { width: 138px; height: 44px; - moz- border- radius: 4px; - webkit- border- radius: 4px; border- radius: 4px; float: right; border: 1px solid #253737; background: #416b68; background: - webkit- gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68)); background: - webkit- linear- gradient(top, #6da5a3, #416b68); background: - moz- linear- gradient(top, #6da5a3, #416b68); background: - ms- linear- gradient(top, #6da5a3, #416b68); background: - o- linear- gradient(top, #6da5a3, #416b68); background- image: - ms- linear- gradient(top, #6da5a3 0%, #416b68 100%); padding: 10. 5px 21px; - webkit- border- radius: 6px; - moz- border- radius: 6px; border- radius: 6px; - webkit- box- shadow: rgba(255 , 255 , 255 , 0.1 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; - moz- box- shadow: rgba(255 , 255 , 255 , 0.1 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; box- shadow: rgba(255 , 255 , 255 , 0.1 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; text- shadow: #333333 0 1px 0; color: #e1e1e1; } . btn: hover { border: 1px solid #253737; text- shadow: #333333 0 1px 0; background: #416b68; background: - webkit- gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68)); background: - webkit- linear- gradient(top, #77b2b0, #416b68); background: - moz- linear- gradient(top, #77b2b0, #416b68); background: - ms- linear- gradient(top, #77b2b0, #416b68); background: - o- linear- gradient(top, #77b2b0, #416b68); background- image: - ms- linear- gradient(top, #77b2b0 0%, #416b68 100%); color: #fff; } . btn: active { margin- top: 1px; text- shadow: #333333 0 -1px 0; border: 1px solid #333333; background: #ffCC00; background: - webkit- gradient(linear, left top, left bottom, from(#ffCC00), to(#ff6600)); background: - webkit- linear- gradient(top, #ffcc00, #ff6600); background: - moz- linear- gradient(top, #ffcc00, #ff6600); background: - ms- linear- gradient(top, #ffcc00, #ff6600); background: - o- linear- gradient(top, #ffcc00, #ff6600); background- image: - ms- linear- gradient(top, #ffcc00 0%, #ff6600 100%); color: #fff; - webkit- box- shadow: rgba(255 , 255 , 255 , 0 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; - moz- box- shadow: rgba(255 , 255 , 255 , 0 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; box- shadow: rgba(255 , 255 , 255 , 0 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; outline: none; }

/* Базовый стиль формы */ form { margin: 0 auto; max-width: 95%; padding: 30px 30px 6px 30px; border: 1px solid rgba(0,0,0,.2); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background: rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5); box-shadow: 0 0 13px 3px rgba(0,0,0,.5); overflow: hidden; } /* Поле сообщения */ textarea{ background: rgba(255, 255, 255, 0.4); width: 100%; height: 110px; border: 1px solid rgba(255,255,255,.6); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display:block; font-family: "Open Sans", sans-serif; font-size:18px; font-weight: 300; color:#fff; padding-left:25px; padding-right:20px; padding-top:12px; margin-bottom:20px; overflow:hidden; } /* Поля ввода */ input { width: 100%; height: 48px; border: 1px solid rgba(255,255,255,.4); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display:block; font-family: "Open Sans", sans-serif; font-size:18px; font-weight: 300; color:#fff; padding-left:20px; padding-right:20px; margin-bottom:20px; } input { cursor:pointer; } input.name { background: rgba(255, 255, 255, 0.4); padding-left:25px; } input.email { background: rgba(255, 255, 255, 0.4); padding-left:25px; } input.message { background: rgba(255, 255, 255, 0.4); padding-left:25px; } ::-webkit-input-placeholder { color: #fff; } :-moz-placeholder{ color: #fff; } ::-moz-placeholder { color: #fff; } :-ms-input-placeholder { color: #fff; } input:focus, textarea:focus { background-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5); -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5); box-shadow: 0 0 5px 1px rgba(255,255,255,.5); overflow: hidden; } /* Стили для кнопки отправить */ .btn { width: 138px; height: 44px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; float:right; border: 1px solid #253737; background: #416b68; background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68)); background: -webkit-linear-gradient(top, #6da5a3, #416b68); background: -moz-linear-gradient(top, #6da5a3, #416b68); background: -ms-linear-gradient(top, #6da5a3, #416b68); background: -o-linear-gradient(top, #6da5a3, #416b68); background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%); padding: 10.5px 21px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; text-shadow: #333333 0 1px 0; color: #e1e1e1; } .btn:hover { border: 1px solid #253737; text-shadow: #333333 0 1px 0; background: #416b68; background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68)); background: -webkit-linear-gradient(top, #77b2b0, #416b68); background: -moz-linear-gradient(top, #77b2b0, #416b68); background: -ms-linear-gradient(top, #77b2b0, #416b68); background: -o-linear-gradient(top, #77b2b0, #416b68); background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%); color: #fff; } .btn:active { margin-top:1px; text-shadow: #333333 0 -1px 0; border: 1px solid #333333; background: #ffCC00; background: -webkit-gradient(linear, left top, left bottom, from(#ffCC00), to(#ff6600)); background: -webkit-linear-gradient(top, #ffcc00, #ff6600); background: -moz-linear-gradient(top, #ffcc00, #ff6600); background: -ms-linear-gradient(top, #ffcc00, #ff6600); background: -o-linear-gradient(top, #ffcc00, #ff6600); background-image: -ms-linear-gradient(top, #ffcc00 0%, #ff6600 100%); color: #fff; -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; outline: none; }

Может и это вам будет интересно:

2. Контактная форма в светлых тонах

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

HTML

Как и в первом варианте, структура Html контактной формы стандартная, элементы формы с определёнными классами, соответствующими классам в CSS.

< form> < input name= "name" placeholder= "Укажите ваше имя!" class = "textbox" required /> < input name= "emailaddress" placeholder= "Укажите ваш Email!" class = "textbox" type= "email" required /> < textarea rows= "4" cols= "50" name= "subject" placeholder= "Введите ваше сообщение:" class = "message" required> < input name= "submit" class = "button" type= "submit" value= "Отправить" />

CSS

При формировании базовых размеров форм и внутренних элементов, использовал процентные значения для ширины width , благодаря чему, форма легко подстраивается под размеры контейнера в котором она будет расположена. Цветовая гамма кнопки «Отправить», её размеры и расположения, легко меняются, достаточно поэкспериментировать с определёнными значениями.

/* Базовые стили формы */ form{ margin: 0 auto; max- width: 95 %; box- sizing: border- box; padding: 40px; border- radius: 5px; background: RGBA(255 , 255 , 255 , 1 ) ; - webkit- box- shadow: 0px 0px 15px 0px rgba(0 , 0 , 0 , .45 ) ; box- shadow: 0px 0px 15px 0px rgba(0 , 0 , 0 , .45 ) ; } /* Стили полей ввода */ . textbox{ height: 50px; width: 100 %; border- radius: 3px; border: rgba(0 , 0 , 0 , .3 ) 2px solid; box- sizing: border- box; font- family: "Open Sans" , sans- serif; font- size: 18px; padding: 10px; margin- bottom: 30px; } . message: focus, . textbox: focus{ outline: none; border: rgba(24 , 149 , 215 , 1 ) 2px solid; color: rgba(24 , 149 , 215 , 1 ) ; } /* Стили текстового поля */ . message{ background: rgba(255 , 255 , 255 , 0.4 ) ; width: 100 %; height: 120px; border: rgba(0 , 0 , 0 , .3 ) 2px solid; box- sizing: border- box; - moz- border- radius: 3px; font- size: 18px; font- family: "Open Sans" , sans- serif; - webkit- border- radius: 3px; border- radius: 3px; display: block; padding: 10px; margin- bottom: 30px; overflow: hidden; } /* Базовые стили кнопки */ . button{ height: 50px; width: 100 %; border- radius: 3px; border: rgba(0 , 0 , 0 , .3 ) 0px solid; box- sizing: border- box; padding: 10px; background: #90c843; color: #FFF; font- family: "Open Sans" , sans- serif; font- weight: 400 ; font- size: 16pt; transition: background . 4s; cursor: pointer; } /* Изменение фона кнопки при наведении */ . button: hover{ background: #80b438; }

/* Базовые стили формы */ form{ margin:0 auto; max-width:95%; box-sizing:border-box; padding:40px; border-radius:5px; background:RGBA(255,255,255,1); -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45); } /* Стили полей ввода */ .textbox{ height:50px; width:100%; border-radius:3px; border:rgba(0,0,0,.3) 2px solid; box-sizing:border-box; font-family: "Open Sans", sans-serif; font-size:18px; padding:10px; margin-bottom:30px; } .message:focus, .textbox:focus{ outline:none; border:rgba(24,149,215,1) 2px solid; color:rgba(24,149,215,1); } /* Стили текстового поля */ .message{ background: rgba(255, 255, 255, 0.4); width:100%; height: 120px; border:rgba(0,0,0,.3) 2px solid; box-sizing:border-box; -moz-border-radius: 3px; font-size:18px; font-family: "Open Sans", sans-serif; -webkit-border-radius: 3px; border-radius: 3px; display:block; padding:10px; margin-bottom:30px; overflow:hidden; } /* Базовые стили кнопки */ .button{ height:50px; width:100%; border-radius:3px; border:rgba(0,0,0,.3) 0px solid; box-sizing:border-box; padding:10px; background:#90c843; color:#FFF; font-family: "Open Sans", sans-serif; font-weight:400; font-size: 16pt; transition:background .4s; cursor:pointer; } /* Изменение фона кнопки при наведении */ .button:hover{ background:#80b438; }

Вариантов оформления контактных форм масса, главное иметь чуточку фантазии и базовые знания CSS. На страницах моего блога, вы можете найти другие, и примеры стилистики форм обратной связи.
Для особо невнимательных, хочу, в который уже раз, пояснить: представленные в статье формы, это всего лишь внешняя оболочка, чтобы формы реально выполняли свои функции, к ним необходимо прикрутить скрипт-обработчик, коих полно разбросано в «интернетах», так что убедительная просьба, не писать в комментариях, что формы не работают и т.п., всё прекрасно работает, просто нужно понимать что, куда и зачем))).

С уважением, Андрей.