Pure CSS3 and HTML web form design

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.

 

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.

 

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.

Leave a Reply

Your email address will not be published. Required fields are marked *