A contact form is pretty much a necessity for any website these days, creating one is fairly simple. Making them look good is where the real skill lies. By using some simple Css rules your forms can really rock!
This is what we are aiming to end up with;
Preview
The Mark-up
There are many elements that make up a form, some of which are neglected or seen as not necessary. But its important to include these for Accessibility reasons, lets take a look at a simple contact form.
<form action="index.html" method="post"> <fieldset> <legend>Contact Form</legend> Please fill in your details <label for="name">Name * Required</label> <input name="name" type="text" /> <label for="email">Email * Required</label> <input name="email" type="text" /> <label for="url">Url</label> <input name="url" type="text" /> <label for="message">Message * Required</label> <textarea cols="20" rows="5" name="msg"></textarea> <input name="submit" type="submit" value="Send" /> <input type="reset" value="Clear" /> </fieldset> </form>
This will give us a basic form structure, I am not going to explain what each tag does, as this tutorial aim is how to style them.
However if you wish to find out a little more, there is a great explanation on Forms over at W3schools.com
Adding extra markup
As there are many tags within the form there will be many styles that need to be created.
However as many of the tags will be styled the same, it would be easier to group them. That way we can drastically cut down the number of rules within our Css.
How are we going to do this? Simple, we can use our trusty unordered list <ul> and list tags <li>.
First we need to decide what elements we wish to group. The logical answer would be our <input> and our form <labels>, Lets do that.
<ul> <li><label for="name">Name * Required</label></li> <li><input name="name" type="text" /></li> <li><label for="email">Email * Required</label></li> <li><input name="email" type="text" /></li> <li><label for="url">Url</label></li> <li><input name="url" type="text" /></li> </ul> <ul> <li><label for="msg">Message * Required</label></li> <li><textarea cols="20" rows="5" name="msg"></textarea></li> </ul>
You may have notice that I have used 2 unordered lists, this is so we can style the <textarea> separately.
The Reset
Now in order to style our elements effectively its a good idea to use a Css Reset file, there are many out there, personally I just like to use this quick shorthand (put this at the top of your Css file);
/* CSS RESET */ * { /* This applies to all elements */ margin: 0; padding:0; }
More info on Css Reset can be found here
Styling the input elements
Now we need to start adding our Css rules to our unordered list. So what rules are we going to add?
Firstly we will remove the bullets, the indent, and the padding, these are styles set to the element automatically.
We also need to separate our form elements a little better, so they have some room to breathe. For this we will add some styling to the <li> elements
ul { list-style: none; /* Removes the Bullets */ list-style-position: inside; padding:0; /* Aligns with the edge of the Form Field */ } li { margin:10px 0; /* Adds 10px Margin to the Top + Bottom */ }
So that’s our unordered list elements are all sorted, lets take a look at styling some of our <input> elements. Again by default these already have styles associated with them (width, height, border etc.) so we need to over ride a few.
Now because we only want to access the <input> and <textarea> tags within our unordered list we have to declare this in our Css;
li input, textarea { /* Sets Rules for 2 Elements */ height:15px; padding:5px; border:1px solid #E8E8E8; width:288px; }
Lets take a look at what each element is doing;
The Width , Height and Border should be self explanatory, the Padding however, allows us to have the cursor in the center of the <input> box, it just makes it a little more stylish.
Now obviously we need to change some of the rules for our <textarea> as this is going to contain the message that people will leave us and naturally needs to be larger than our other <input> elements. For this we just create a new rule for just the <textarea>
textarea { font-family: Arial, sans-serif; /* Changes default font */ font-size: 12px; height:150px; }
Styling the Buttons
So we have styled the elements for input, now we need to give our buttons a little makeover, these have rules added to them by default so once again we need to over ride them.
Now in order to separate them to the rest of our <input> rules, we are going to add some classes to them.
<input class="button" name="submit" type="submit" value="Send" /> <input class="reset" type="reset" value="Clear" />
Now we can reference them both in our Css (you can set the colors to match your site);
.button { border:1px solid #E8E8E8; padding:5px 10px; margin:0 5px 0 0; cursor: pointer; /* Changes the cursor behavior */ background: #AC0000; color: #FFFFFF; } .reset { border:none; padding:5px 10px; margin:0 5px 0 0; cursor: pointer; background: #FFFFFF; color: #AC0000; }
Styling the rest
Right so, we have styled the elements within the form itself, lets go out a little bit and look at our <fieldset> and <legend> tags. Firstly the <legend>;
For this we are just going to add some padding and border rules;
legend { border: 1px solid #E8E8E8; padding:5px 15px; }
Now our <fieldset> tag, for this we are just going to set the width, by default this inherits the width of the containing element, as there is no containing element we will set this ourselves.
We’ll also give it some padding (note: the margin is just to move the form away from the edge, it will not be necessary if its in a containing element that already has a margin set).
fieldset { border:1px solid #E8E8E8; padding: 10px; margin: 10px; /* Used to move form away from the edge */ width:300px; }
Finishing it off
If some inputs by the user are required for the form to process its a good idea to indicate this. So lets put a <span> tag around our “*required” prompt, I’ll use the Name label as an example, but you can do it to each if you wish.
<li><label for="name">Name <span>* Required</span></label></li>
Now we can add some style to it;
span { color: #AC0000; font-size: 10px; }
So that’s about it, if you want to learn some more I have included some resources below, and there are plenty more tutorials out there detailing how to handle form using various dynamic languages.
Good Luck!
Download
Other Resources
Style Web Forms Using CSS – SitePoint
Prettier Accessible Forms – A List Apart
PHP Forms and User Input – W3 Schools