http://www.catswhocode.com/blog/top-10-css-3-forms-tutorials

 

 

http://gazpo.com/2011/02/form/

 

 

http://css-tricks.com/tips-for-creating-great-web-forms/

 

 

http://cssglobe.com/cssg-collections-web-forms/

http://cssglobe.com/collections/forms/ 

 

 

body{ background:#f8f8f8; font:13px Trebuchet MS, Arial, Helvetica, Sans-Serif; color:#333; line-height:160%; margin:0; padding:0; text-align:center; } h1{ font-size:200%; font-weight:normal; } h2, h3, h4, h5, h6{ font-weight:normal; margin:1em 0; } h2{ font-size:160%; } h3{ font-size:140%; } h4{ font-size:120%; } a{ text-decoration:none; color:#f30; } a:hover{ color:#999; } table, input, textarea, select, li{ font:100% Trebuchet MS, Arial, Helvetica, Sans-Serif; line-height:160%; color:#333; } p, blockquote, ul, ol, form{ margin:1em 0; } blockquote{ } img{ border:none; } hr{ display:none; } table{ margin:1em 0; width:100%; border-collapse:collapse; } th, td{ padding:2px 5px; } th{ text-align:left; } li{ display:list-item; } #container{ margin:0 auto; background:#fff; width:600px; padding:20px 40px; text-align:left; } /* form 1 */ #form1{ margin:1em 0; padding-top:10px; background:url(../images/form1/form_top.gif) no-repeat 0 0; } #form1 fieldset{ margin:0; padding:0; border:none; float:left; display:inline; width:260px; margin-left:25px; } #form1 legend{display:none;} #form1 p{margin:.5em 0;} #form1 label{display:block;} #form1 input, #form1 textarea{ width:252px; border:1px solid #ddd; background:#fff url(../images/form1/form_input.gif) repeat-x; padding:3px; } #form1 textarea{ height:125px; overflow:auto; } #form1 p.submit{ clear:both; background:url(../images/form1/form_bottom.gif) no-repeat 0 100%; padding:0 25px 20px 25px; margin:0; text-align:right; } #form1 button{ width:150px; height:37px; line-height:37px; border:none; background:url(../images/form1/form_button.gif) no-repeat 0 0; color:#fff; cursor:pointer; text-align:center; } /* // form 1 */ /* form 2 */ #form2{ margin:1em 0; color:#fff; width:320px; /* customize width, this form have fluid layout */ } #form2 h3{ margin:0; background:#57a700 url(../images/form2/form_heading.gif) repeat-x; color:#fff; font-size:20px; border:1px solid #57a700; border-bottom:none; } #form2 h3 span{ display:block; padding:10px 20px; background:url(../images/form2/form_ico.gif) no-repeat 93% 50%; } #form2 fieldset{ margin:0; padding:0; border:none; border-top:3px solid #000; background:#000 url(../images/form2/form_top.gif) repeat-x; padding-bottom:1em; } #form2 legend{display:none;} #form2 p{margin:.5em 20px;} #form2 label{display:block;} #form2 input, #form2 textarea{ width:272px; border:1px solid #111; background:#282828 url(../images/form2/form_input.gif) repeat-x; padding:5px 3px; color:#fff; } #form2 textarea{ height:125px; overflow:auto; } #form2 p.submit{ text-align:right; } #form2 button{ padding:0 20px; height:32px; line-height:32px; border:1px solid #70ad2e; background:#5aae00 url(../images/form2/form_button.gif) repeat-x; color:#fff; cursor:pointer; text-align:center; } /* // form 2 */ /* form 3 */ #form3{ margin:1em 0; background:url(../images/form3/form_bg.jpg) no-repeat 0 0; width:542px; height:364px; /* fixed size (envelope graphic) */ overflow:hidden; } #form3 h3{display:none;} #form3 fieldset{ margin:0; padding:0; border:none; float:left; display:inline; width:200px; margin-left:34px; padding-top:80px; } #form3 fieldset.last{ width:254px; margin-left:17px; } #form3 legend{display:none;} #form3 p{margin:.5em 0;} #form3 label{display:block;} #form3 input, #form3 textarea{ width:192px; border:1px solid #ddd; background:#fff url(../images/form3/form_input.gif) repeat-x; padding:3px; } #form3 textarea{ width:246px; height:200px; overflow:auto; } #form3 p.submit{ margin:0 34px; clear:both; position:relative; } #form3 button{ padding:0; position:absolute; left:0; top:-3.5em; width:95px; height:36px; text-indent:-8000px; overflow:hidden; border:none; background:url(../images/form3/form_button.gif) no-repeat 0 0; color:#fff; cursor:pointer; } /* // form 3 */ /* form 4 */ #form4{ margin:1em 0; padding-top:1.5em; color:#246878; width:350px; /* customize width, this form have fluid layout */ background:#fbfaf4 url(../images/form4/form_bg.gif) repeat-y; } #form4 h3{ margin:0 20px; height:28px; text-indent:-8000px; background:url(../images/form4/form_heading.gif) no-repeat 0 0; } #form4 fieldset{ margin:0; padding:0; border:none; padding-bottom:1em; } #form4 legend{display:none;} #form4 p{margin:.5em 20px;} #form4 label{display:block;} #form4 input, #form4 textarea{ width:302px; border:1px solid #dfdfdf; background:#fff; padding:5px 3px; } #form4 textarea{ height:125px; overflow:auto; } #form4 p.submit{ text-align:right; } #form4 button{ margin:0; padding:0; text-indent:-8000px; overflow:hidden; width:88px; height:56px; border:none; background:url(../images/form4/form_button.gif) no-repeat 0 0; cursor:pointer; text-align:left; } /* // form 4 */ /* form 5 */ #form5{ margin:1em 0; padding-top:10px; } #form5 fieldset{ margin:0; padding-top:.5em; border:none; border-top:1px solid #f1f1f1; } #form5 legend{ background:#fff; padding:0 5px; font-style:italic; } #form5 p{ clear:both; margin:.5em 0; overflow:hidden; } #form5 label{ float:left; width:60px; display:block; text-align:right; margin-right:10px; } #form5 input, #form5 textarea{ margin:0; width:250px; border:1px solid #ddd; padding:3px 5px 3px 25px; } #form5 input#name{background:#fff url(../images/form5/form_name.gif) no-repeat 5px 50%;} #form5 input#email{background:#fff url(../images/form5/form_email.gif) no-repeat 5px 50%;} #form5 input#web{background:#fff url(../images/form5/form_url.gif) no-repeat 5px 50%;} #form5 textarea#message{background:#fff url(../images/form5/form_note.gif) no-repeat 5px 6px;} #form5 textarea{ height:125px; overflow:auto; } #form5 p.submit{ clear:both; margin:1em 0; padding:.5em 70px; border-top:1px solid #f1f1f1; } #form5 button{ height:28px; line-height:28px; border-top:1px solid #999; border-left:1px solid #999; border-right:1px solid #333; border-bottom:1px solid #333; background:url(../images/form5/form_button.gif) no-repeat; padding:0 10px 0 25px; color:#333; cursor:pointer; text-align:left; font-size:11px; font-weight:bold; } /* // form 5 */

Form 1

Contact form

Name

Email

Website

Message

Send

Form 2

Contact Us

Contact form

Name

Email

Website

Message

Send

Form 3

Contact Us

Contact form

Name

Email

Website

Message

Send

Envelope graphic found at youthedesigner.com

Form 4

Contact Us

Contact form

Name

Email

Website

Message

Send

Form 5

Contact form

Name

Email

Website

Message

Send