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.

  • http://www.test.no Rune

    Funker dette da ?

  • http://www.dalehay.com Dale

    Do you have a quick example to show of this?

  • http://www.jamesowers.co.uk James

    Sorry, here’s a link to the finished form:
    http://jamesowers.co.uk/pages/form/

  • http://divinedes.com Max Monastyrev

    After I finish styling the form, it doesn’t matter what I do, I have to use the phpmail function right? I mean, no matter if its Ajax?

  • http://www.jamesowers.co.uk James

    If you want to send the form as an email to someone using PHP, I would advise you to use php mailer: http://phpmailer.codeworxtech.com/

  • ajeet

    this is good

  • http://www.yahoo.com amit

    this is good and sweet

  • http://www.danhbaweb20.com/ Danh ba web 2.0

    I like tutorial !

  • http://www.creditcardsonlineapps.com Starry Nebula

    Thanx for the awesome forms tips!

  • http://aksarabicara.blogspot.com/ Bill

    good post

    Bills last blog post..Get more traffic with SEO

  • Pingback: Recent Links Tagged With "width" - JabberTags()

  • http://www.dfs20.com nxxnyc

    James,

    You rock. I’ve been looking all over the damn web for a good example for about 2 billion years until I stumpled upon your site.

    Thanx again.

  • Pingback: Styling forms with CSS : infoeduindia multimedia collection()

  • http://noneyet Cazzy

    Thanks so much for a great tutorial, I’ve got multiple forms to do!

    Thanks again

  • 3Y

    Thx! simple and easy learning~

  • markmurphy

    Thx :)

    Nicely explained and simple css.

  • Pingback: Styling forms with CSS - Tutorial Collection()

  • http://www.atkinsonco.com Will

    What is the difference between:
    font:11px Arial, Helvetica, sans-serif;

    and

    font-family:11px Arial, Helvetica, sans-serif;
    ????
    I always thought that font was an html rather than a css tag…..

  • http://www.jamesowers.co.uk Jmz

    font-family is used only to define the font to be used, “font:11px Arial, Helvetica, sans-serif;” would be incorrect, it should be “font:Arial, Helvetica, sans-serif;”.

    font allows you to set all the font properties (except color) in one statement. For example you could use “font:bold 11px Arial, Helvetica, sans-serif;”