This a CSS3 based web form design. It was used only CSS and HTML to rich the result. Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a basic web form into something beautiful.
I will try to create a simple yet modern form, while maintaining the code easy to customize. Here is the result of all the code. And did I said that the form is also responsive? Well, it is.
Here we have the code used to build a simple HTML form. You may want to add a DOCTYPE to your html document if you worry about Internet Explorer.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="wrapper"> <form action="#" id="form"> <label for="name">Name</label> <input type="text" id="name" /> <label for="email">Email</label> <input type="text" id="email" /> <label for="telephone">Telephone</label> <input type="text" id="telephone" /> <label for="message">Message</label> <textarea name="message" id="message" cols="30" rows="10"></textarea><br /> <input type="submit" value="Send" name="submit" id="submit" /> </form> </div> |
Note that the web form does not have javascript in there. We used only valid XHTML to create it.
Here we have the css code used to build the form.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
#wrapper { font-family:verdana; margin: 30px auto ; padding: 30px; background: #4D6879; /* You can change the main color of thew form here. */ font-size: 14px; width:100%; max-width:500px; box-sizing: border-box; } label { display: block; font-size: 24px; padding: 13px 0; color: #fff; text-shadow: 1px 1px 1px #666; } input { height: 18px; padding: 20px; width: 100%; box-sizing: border-box; -webkit-border-radius: 6px; -khtml-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 0 10px #444; -moz-box-shadow: 0 0 10px #444; box-shadow: 0 0 10px #444; border: 1px solid #fff; } textarea { height: 150px; width: 100%; box-sizing: border-box; padding: 15px; border: 1px solid #fff; -webkit-border-radius: 6px; -khtml-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 0 10px #444; -moz-box-shadow: 0 0 10px #444; box-shadow: 0 0 10px #444; } input[type="text"]:hover, textarea:hover { border: 1px solid #fff; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25) inset, 0 0 5px rgba(255, 255, 255, 0.4); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25) inset, 0 0 5px rgba(255, 255, 255, 0.4); box-shadow: 0 0 20px rgba(0, 0, 0, 0.25) inset, 0 0 5px rgba(255, 255, 255, 0.4); } input#submit { text-align: center; color: #fff; height: 50px; padding: 0; text-shadow: 1px 1px 1px #000; font-size: 18px; text-transform: uppercase; margin-top: 50px; border: 1px solid #000; background: #000; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3b3b3b), color-stop(100%, #000000)); background: -webkit-linear-gradient(top, #3b3b3b 0%,#000000 100%); background: -moz-linear-gradient(top, #3b3b3b 0%,#000000 100%); background: -o-linear-gradient(top, #3b3b3b 0%,#000000 100%); background: -ms-linear-gradient(top, #3b3b3b 0%,#000000 100%); background: linear-gradient(top, #3b3b3b 0%,#000000 100%); opacity: 0.5; } input#submit:hover { color: #ccc; cursor: pointer; opacity: 0.8; } label { text-transform: uppercase; font-size: 14px; } |
Subtle background gradients give depth to the fields while shadows lift them from the page. Even more impressive is that this is done without any images at all.
If you pay attention to the code you will not only obtain a lightweight and beautiful web form design, but you will also learn and understand new CSS3 techniques, such as box-shadow, gradients, opaque colors, and rounded corners.
This web form was tested and works great all major browsers.
You can see the demo form here:
Like you can see below, just by modifying one single line you can change the form theme.
You work it further and add some more features. For example implement some font you like from Google Font Directory.