If you’re creating a website, one of the most important pages you will need to design is the contact form. Interaction with your potential clients or target demographic is vital to the success of your site, and so it’s only natural that you’d want one which is simple, functional and good looking. Read on if you’d like to learn more about creating this form in clean and simple CSS3 without using any images.
The markup
As always with my tutorials, the markup will be as simple as possible.
<form class="css3Form"> <h1>Contact me</h1> <ul> <li><input type="text" value="Your Name"/></li> <li><input type="text" value="Email Address"/></li> <li><textarea rows="5"> Comments </textarea></li> </ul> <input type="button" class="button" value="Send" /> </form>
The CSS
We start with the CSS for the form. Please note that CSS3 will be extensively used, this will not work in IE8 or other older browsers (but it will still fall back gracefully).
.css3Form ul li { margin:10px 0; box-shadow: 1px 1px 0 0 #949494; -moz-box-shadow: 1px 1px 0 0 #949494; -webkit-box-shadow: 1px 1px 0 0 #949494; border-radius: 18px 18px; -moz-border-radius: 18px 18px; -webkit-border-radius: 18px 18px; float:left; clear:both } .css3Form input, .css3Form textarea { margin:0; width:300px; padding: 8px 10px; font-size:16px; color:#b3b3b3; border:solid 1px #585858; text-shadow: 1px 1px 0 #4b4b4b; border-radius: 18px 18px; -moz-border-radius: 18px 18px; -webkit-border-radius: 18px 18px; box-shadow: inset 1px 1px 3px 0 #000; -moz-box-shadow: inset 1px 1px 3px 0 #000; -webkit-box-shadow: inset 1px 1px 3px 0 #000; background:-moz-linear-gradient(0% 100% 90deg,#7e7e7e, #5e5e5e); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5e5e5e), to(#7e7e7e)); } .css3Form .button { width:150px; border:solid 1px #bababa; color:#363636; font-weight:bold; font-size:18px; border-bottom-color:#363636; background:-moz-linear-gradient(0% 100% 90deg,#5f5f5f, #9e9e9e); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9e9e9e), to(#5f5f5f)); box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; text-shadow: 1px 1px 0 #9d9d9d; }
If you find any of the above styles incomprehensible, check out some of my earlier tutorials which explain these CSS3 properties in simple terms: CSS3 Buttons, CSS3 Navigation
There you go, a simple yet gorgeous form created using just CSS.
Whats happening to me?
I have just said out loud “Woa thats a sexy form”