If you haven’t completed Part 1 of the Contact Form series, we suggest you do so before continuing on with Part 2.
So in part 1 we looked at the server side scripting that was needed to process our form data, do some simple validation checks and then send our form to an email address. In this part we are going to look at how we can style it to make it look nicer, as frankly the default styling of forms is not very attractive.
So firstly, create a new stylesheet in your editor of choice and link it to our form using this line:
<link rel="stylesheet" type="text/html" href="path/to/your/style-sheet.css">
Please note that I am using HTML4, if you are working in xHTML, you need to close the link tag by adding a forward slash (/index.html) before the end ‘>’.
Get rid of the defaults
When working with forms I find it much easier to get rid of all the default margins and padding that all the browsers give such elements. So I’m just going to get rid of them:
p, input, textarea, label, select, form {
margin: 0; padding: 0;
}
We are not going to win any awards for this, but at least now we have a good starting point.
Put the fields on a separate line
Currently, because form elements display as inline elements by default, all our fields are pushed right up against the text. Whilst I like having the fields on the same line, they look much nicer if they are all in a line. So we can float the to the right, apply some margins and have them line up well:
input, textarea, select {
float: right;
margin: 0 15px 5px 0;
width: 200px;
}
Woah, that looks Weird
If you preview our form in the browser, you will see it’s all over the place. But not to worry, this next step will fix it. We are going to apply some padding and margins to each of the paragraphs.
p {
margin: 10px;
padding: 20px;
color: #0099CC;
background-color: #eee;
}
p#comment {
height: 50px;
}
input, textarea {
padding: 3px;
}
Now, that looks much better already! It’s worth noting that I went back into the HTML and added an id of “comment” to the paragraph that surrounds our textarea, so make sure you’ve done that. Overall it’s looking much nicer. There are a couple of things still to sort out…first I’m not too happy with our font we have there, I think we can do better. And our submit button needs some proper styling.
Fonts
Our fonts look fine as they are, but we can certainly make them nicer. I’m going for Lucida Sans Unicode as my font, with Lucida Grande as my back up plan. We can then add “sans-serif” onto the end, in case of the (very unlikely) event that the user has neither of our first fonts available.
label {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
}
And now our form is looking so much nicer with that font.
The Submit Button
That submit button still stands out like a sore thumb. Firstly, go into the HTML again, find the paragraph containing the submit button, and give it an id of “submitbtn”. Now we are ready to style it:
p#submit {
background-color: transparent;
padding: 0;
}
#submit input {
margin: 0;
float: right;
border: 2px solid black;
padding: 10px;
background-color: #eee;
}
You’ll notice I over-ride some of the properties we set earlier, but as the paragraph does not have any text we need to style it differently. With some basic styles and a bit of positioning, we end up with something that looks like this:
Done for Now
That’s finished for the time being. Hopefully this has shown that you only need some basic CSS and some good colour choices to create a usable and very nice looking form.
Continue to Part 3 and our final tutorial of this series!
