Website Design Blog. Evoart

Forms use to be a real nightmare before we were able to sprinkle a drop of CSS upon them. Even now its safe to say that my least favourite part of building a website is making all the forms function. But at least these days I can have some fun with forms make them look pretty good. In this quick little how-to, I’ll show you how you can add some simple, but effective CSS styling to your forms to make them look beautiful and elegant.

Forms without CSS Styling

Forms without any CSS styling look really shoddy. Frankly these days if I see a form thats left to its default look I just think the web designer couldn’t be bothered to finish the site off. Below you can see a quick example of a what I mean. A nasty looking form with no styling applied (apart from to the text).

Simple Form with CSS Styling

Making a form look good isn’t difficult to achieve. All you need to know is how to apply a little CSS. After reading this little article you should be able to create something like this, or even better!

Step 1: Applying your own border styles

The first step we need to take is to give the ‘input’ form fields our own border. ‘Input’ fields are the one line fields typically used for name, telephone, and email areas. I’ll show you how to style larger ‘textareas’ (used for adding comments and inquiries) towards the end of this article.

As you can see from the bad form example above the default look of a form field looks quite nasty, with only a two pixel border on the left and top edges of the field to give it that old fashioned ‘beveled’ look. Below you can see the CSS code I use to give ‘input’ fields my own look.

.border {
border-style:solid;
border-width:1px;
border-color:#cccccc;color:#666666;
background-color:#F2F2F2;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:160%;
height:20px;
width:320px;
}

To apply this style to the ‘input’ fields just give them the class ‘border’. This is shown below.

<input name=”name” type=”text” class=”border”>

Its pretty easy to work out what everything in the CSS does. The reason for the background color being #F2F2F2 at this time is because we’re about to apply a nifty little ‘hover’ effect.

Step 2: Making the style change on ‘hover’.

Unfortunately there is only support for this effect currently in IE7 and Firefox I believe. Im not 100% sure about Opera, but its a lovely little touch none the less. If you take a look at my demo example and hover over the fields, you can see what happens.

We can achieve this effect simply by adding input:hover to our CSS. Then just add the styles you wish. The example below will make the background of the input form fields go white when a user hovers over them. Its best to make the change in style subtle.

input:hover {
background-color:#fff;
}

Step 3: Changing the style when the field is clicked on.

Now all we need to do is change the style of the form field when the user clicks inside a particular field. This is equally as easy to do and all we need to use is the ‘focus’ property.

input.border:focus {
background: #fff;
border: 1px solid #595959;
}

Again the code above applies a white background and this time a slightly darker border to the ‘input’ fields when they’re clicked on. This a great accessibility aid, as the user can easily tell which field their currently filling in. I know that seems pretty obvious for us web geeks, but maybe not so obvious for the less web savy amongst us.

Step 4: Appling a style to all ‘textarea’ fields.

So we’ve successfully styled or ‘input’ fields. Now we need to do the same for our ‘textarea’ fields. As I briefly mentioned at the beginning of this article ‘textarea’ fields are multi line text boxes, and are the ones typically used for entering comments and inquires.

To style these we do exactly the same, but replace all instances of ‘input’ with ‘textarea’. You will also need to give the styles a different class name. So lets use ‘borders’ instead of ‘border’. The styles below are exactly the same as the ones we used in step 1. This is just because its being used as part of the same form so we need to keep the appearance the same really.

.borders {
border-style:solid;
border-width:1px;
border-color:#cccccc;
color:#666666;
background-color:#F2F2F2;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:160%;
height:130px;
width:320px;
}

Next you’ll want to apply the class ‘borders’ to your ‘textarea’ fields. This is shown below.

<textarea name=”comment” class=”borders”></textarea>

Step 5: The same again for ‘hover’ and ‘focus’.

Don’t worry, we’re almost there now guys. Just as we did in Steps 2 and 3 above we’re going to change the styles when the ‘textarea’ field is hovered over and clicked on. The CSS is exactly the same, apart from the class name.

textarea:hover {
background-color:#fff;
}

…and

textarea.borders:focus {
background: #fff;
border: 1px solid #595959;
}

Final Step: Jazzing up the submit button

Well done sticking with it this far! The final thing we need to do is style the submit button. Here we’ll be using two images - one for the default look, and one for the rollover. Here are the two images I used in my demo.

We’ll call the class for the button ‘formborder’.

<input name”submit” type=”submit” class=”formborder” value=”submit”>

The CSS below styles our button.

.formborder {
border-style:solid;
border-width:1px;
border-color:#fff;
color:#fff;
background-image:url(http://evoart.info/images/form_button.jpg);
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:130%;
height:30px;
width:89px;
padding-bottom:1px;
}

.formborder:hover {
border-style:solid;
border-width:1px;
border-color:#fff;
color:#fff;
background-image:url(http://evoart.info/images/form_button_over.jpg);
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:130%;
height:30px;
width:89px;
padding-bottom:1px;
}

I think its pretty easy to work out what everything in the code above does. I’d advise you to just experiment with the fonts you use, the background images, and size of the button and anything else. Obviously the design of your button is highly dependent on the design of the site the form is being used on.

Final thoughts…

I hope this little how-to/tutorial has helped those of you who didn’t know about styling forms. Although we all hate them, forms are a crucial part of a website so its important to make them look good. If you have any questions or thoughts please comment below and also feel free to have a look at the source code of the demo.