Designing of Beautiful Contact Form

I hope that this will be an interesting tutorial for you. I want to demonstrate that how I style my form input fields that is cross browser compatible all with just CSS. This is totally a new layout.

All of us creates forms on websites, it may be a blog, e-commerce or even a personal site. The way I did it in the past was declared a background image on the input element which I soon found will not work correctly. Instead I needed to put the background image on a hook like a paragraph tag and absolutely position the input element within the background image thus allowing full control of the position of the text input. Lets checkout first that what we will achieve.

I took the liberty of commenting anything that is not immediately clear in the CSS.

Now let’s take a look at the code.

HTML

CSS

This technique has been tested on IE6,IE7,IE8,FF (latest), Opera (latest), Safari (latest), and Chrome (latest).

Although I know this wasn’t a step by step tutorial but I figure the comments on the stylesheet should explain most of whats going on. But if for some reason you think this does not suffice, please let me know and I will write this out in a tutorial step by step style. Enjoy and have fun!