Styling Forms with CSS

When you don’t quite get it, styling forms with CSS can be a real pain. But once you get your head around it you will see that there’s nothing really too difficult about it.

In this tutorial you will see how to create this contact form and style it so that it looks like this. In the future I am going to make some further guides on how to take the information entered and send it to yourself using PHP or ASP, but that’s for another day.

Right, so first of all we’re going to need our form. I am going to use this one. Your free to use this code if you don’t have a form of your own. Here’s the code for the form:

<form action=”” method=”post”>
	<label for="user_name">Your Name</label>
	<input type="text" name="user_name" class="inputbox"/>
	<label for="user_email">Your Email</label>
	<input type="text" name="user_email" class="inputbox"/>
	<label for="user_message">Your Message</label>
	<textarea name="user_message"></textarea>
	<input type="submit" value="submit" name="submit" class="submit"/>
</form>

Now as you can see the form is very simple and doesn’t look very good at all just yet. We’re going to fix that though.

First of all, we’re going to give the form a css class so that we can style it and all the elements within it. To do this we simply change:

<form action=”” method=”post”>

To:

<form action=”” method=”post" class="webform">

You will notice I added a class to our form rather than an id. This is simply because you might want to use more than one form on your page and using a class will keep the page valid whether you have one form or ten.

Simple, eh? Now lets start styling.

In our CSS document, we’re going to add a style for our form. So we add:

.webform{}

All of our styling will go between the { and the }. Now, I dont want my form to be too wide so I’ll add a width to my CSS.

.webform{
	width:400px;}

Next, we’ll add a font, a font colour and a background colour.

.webform{
	width:400px;
	font:11px Arial, Helvetica, sans-serif;
	color:#777;
	background-color:#fff;}

Now that the basic styling for our form is done, we can add some styling to the labels and inputs. First of all we will tackle the labels with the following CSS.

.webform label{
	display:block;
	width:300px;
	font-weight:bold;}

All the CSS above is pretty simple, we used the “display:block;” so that all the labels will start on a new line. This means we dont have to add any breaks (
tags) after every line. After we added the styling to our labels you can see that the form is starting to look a lot better. Now for the inputs.

.webform .inputbox{
	height:18px;
	width:250px;
	padding:4px 3px 2px 3px;
	margin:2px 0 10px 3px;
	border:1px solid #ccc;}

Again, I haven’t used anything to difficult to style the input boxes but they look a lot better! You might have noticed the submit button is a bit screwed up, dont worry, we’ll be fixing that later. But first we will make the textarea look better with the following CSS.

.webform textarea{
	height:80px;
	width:250px;
	padding:4px 3px 2px 3px;
	margin:2px 0 10px 3px;
	border:1px solid #ccc;}

So now the form is looking fine and dandy, apart from that pesky submit button. Lets add a class to it.

Change:

<input type="submit" value="submit" name="submit"/>

To:

<input type="submit" value="submit" name="submit" class="submit"/>

Now our submit button has a class of submit. Now for the CSS.

.submit{
	margin:2px 0 0 3px;
	background-color:#eee;
	height:30px;
	width:80px;
	padding:0;
	border:1px solid #ccc;
	display:block;
	color:#666;}

Again, we have used the “display:block;” style to put the button on a new line without using a break. I have also added a background colour, padding, a border and margin. All of these are pretty simple CSS styles. If you need help with the different CSS styles check out the beginners guide to CSS tutorial.

As you can see, our form is looking very nice now and it has all been done with some simple CSS and minimal extra HTML. You can see the finished CSS form here.