Pure CSS and DIV based Contact Us form design
Here is how you can design Pure CSS and DIV based Contact Us form design.
I have used simple design, it is not much complited to understand.
Here is how it look like:
1.)FF
2.)Chrome
3.) IE
Full HTML with CSS source code:
Modify border and colors as you like.
<!DOCTYPE html> <html> <head> <title>Contact Us</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> body{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; } p, h1, form, button{border:0; margin:0; padding:0;} .spacer{clear:both; height:1px;} /* ----------- My Form ----------- */ .myform{ margin:0 auto; width:509px; padding:14px; } /* ----------- form-wrapper ----------- */ #form-wrapper{ background: none repeat scroll 0 0 #C6C6C6; border: 2px solid #8B8B8B; border-radius: 10px; -moz-border-radius: 10px; -op-border-radius: 10px; -webkit-border-radius: 10px; } #form-wrapper h1 { font-weight:bold; margin-bottom:8px; } #form-wrapper p{ font-size:11px; color:#666666; margin-bottom:20px; border-bottom:solid 1px #7E7E7E; padding-bottom:10px; } #form-wrapper label{ display:block; font-weight:bold; text-align:right; width:193px; float:left; } #form-wrapper .small{ color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right; width:193px; } #form-wrapper input,#form-wrapper textarea{ float:left; border:solid 1px #aacfe4; width:284px; margin:2px 0 20px 10px; border-radius: 15px; -moz-border-radius: 15px; -op-border-radius: 15px; -webkit-border-radius: 15px; font-size: 14px; } #form-wrapper input{ height: 25px; padding: 4px 10px; } #form-wrapper textarea{ padding: 10px 10px; overflow: auto; } /* ----------- Form Button ----------- */ #form-wrapper button { background: #2c3e4a; background: -webkit-gradient(linear, left top, left bottom, from(#919496), to(#2c3e4a)); background: -webkit-linear-gradient(top, #919496, #2c3e4a); background: -moz-linear-gradient(top, #919496, #2c3e4a); background: -ms-linear-gradient(top, #919496, #2c3e4a); background: -o-linear-gradient(top, #919496, #2c3e4a); padding: 5px 10px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; margin-left: 315px; color: white; font-size: 20px; text-decoration: none; vertical-align: middle; } #form-wrapper button:hover { background: #3d4b54; color: #ccc; } </style> </head> <body> <div id="form-wrapper" class="myform"> <form id="form" name="form" method="post" action="index.html"> <h1>Contact Us</h1> <p>Please complete the form bellow.</p> <label for="name">Name <span class="small">Add your name</span> </label> <input type="text" name="name" placeholder="Mahesh Prasad" id="name" /> <label for="email">Email <span class="small">Add a valid address</span> </label> <input type="text" name="email" placeholder="mail@example.com" id="email" /> <label for="phone">Phone <span class="small">Add valid 10 digit your mobile no.</span> </label> <input type="text" name="phone" placeholder="8888888888" id="phone" /> <label for="web">Web-site <span class="small">Add your web-site url</span> </label> <input id="web" type="text" placeholder="http://www.example.com" name="web" id="web"> <label for="message">Message <span class="small">Write something to us</span> </label> <textarea placeholder="Write something to us" name="message" id="message" rows="5"></textarea> <button type="submit">Send</button> <div class="spacer"></div> </form> </div> </body> </html>
nilam1allinone
Oct 04, 2013 @ 15:52:13
Thanks for your great information, the contents are quiet interesting.I will be waiting for your next post.
data entry service
Web Development Company in Pune
Jan 02, 2015 @ 17:00:54
It’s hard to come by knowledgeable people in this particular subject, however, you seem like you know what
you’re talking about! Thanks