How to Make Beautifull Contact Forms in CSS

Make Beautifull Contact Forms in CSS by this simple css tutorial. Just download this file and make experiments with colors and shadows.Best tutorial of Css forms.

How to Make Beautifull Contact Forms in CSS

CSS CODE

body{
font-family:Arial, Helvetica, sans-serif;
}
#form
{
 background:#59c03d;
 width:300px;
 padding:20px;
 font-size:14px;
 color:#fff;
}
#form h1
{
 font-weight:normal;
 margin:0px;
 padding:0px;
}
#form label
{
 display:block;
 margin:15px 0px 5px 0px;
}
#form input[type="text"]
{
 width:94%;
 padding:8px 2%;
 border:none;
 border:solid 2px #49ae2e;
}
#form .buttons
{
 margin:20px 0px 10px 0px;
}
#form .buttons input[type="submit"],#form .buttons input[type="reset"]
{
 background:#fff;
 border:none;
 color:#666;
 padding:5px 10px;
 font-size:17px;
 cursor:pointer;
}
#form .buttons input[type="submit"]:active,#form .buttons input[type="reset"]:active
{
 position:relative;
 top:1px;
}

HTML Code

 

    
Contact Us
    
    

    Name
    
    

    Email
    
    

    Website
    
    

    Message
    
    

    
    
    

Download File Used in this example View Live Demo

Total Downloads: