Integrated CA - Form

If you browse the internet one thing that always have a similar style is the contact form. Its overlooked in the design process and therefore keeps to the regular style.

I got my inspiration for my form from http://victorerixon.dreamhosters.com . I really like it and it so easy to use.

I use floats to position the elements of the form. I used the blue from my swatch as the background colour. I also didnt want to use labels to tell the user what to input instead I used icons I got from the net. I gave the elements padding-left of 100px and then inserted the icons as a background image and positioned it using background-position.

I used a jQuery plugin to validate the form. A valid email must be entered or an error will come up. Also the message input must be filled in, other wise it will give an error "field is required". I styled the error label so it looks like a speech bubble. I used the dark berry colour from my swatch for the error label. The background image changes when a error to a icon with the dark berry colour. One thing I would like to implement but don't know how to is when a field is valid the icon goes to a green to give a user some feed back that the field is valid.

I had one problem with the validation. There is two error labels, one for each field. Unfortunately they over lap. In fig.1 you can see the problem. I found no way over fixing this. One thing I did was use inspect element in chrome. I then gave the second label its own class and positioned it above the the correct field. I thought I could give the field that class name but the jQuery generates the class and omitted my class. In fig.2 you can see how I wanted it to look.

fig.1

fig.2