Applying CSS to website forms

By Inviqa
Experience design

‎

Forms are an essential part of digital products and services, but can look rather drab. With CSS, we can arrange items in a way that's clean and efficient, with an attractive design.

The original form

This form looks horrible! Here's the code behind it:


<form action="#">
    <p>
        <label for="name">Name</label>
        <input id="name" type="text" />
    </p>
    <p>
        <label for="e-mail">E-mail</label>
        <input id="e-mail" type="text" />
    </p>
    <p class="submit">
        <input type="submit" value="Submit" />
    </p>
</form>

Positioning the form with CSS 

The first thing we need to do to the form is make it line up nicely. In the old days this could only be achieved with tables, but not any more, thanks to our old friend, CSS. We'll need to assign some CSS rules like so:

label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}

.submit input
{
margin-left: 4.5em;
}

Now let's go through the CSS, step-by-step. We gave the label a fixed width of 4em, although this should obviously be increased if the prompt text in the form is anything longer than what we've got now ('name' and 'e-mail'). We also specified the width in terms of em and not px so that if users increase the text size the width will increase with the larger letters.

The margin-right: 0.5em CSS command means the labels will have a small amount of spacing after them, so that the text isn't up against the input box.

The submit button has a left margin of 4.5em so that it aligns with the input boxes, which are 5em from the left. This includes the 4em width and the 0.5em right margin of the prompt text.

So, putting that altogether gives us this form:

Looks much better, but it's still rather plain. Let's use some more CSS to jazz up the form so it's more in line with the colour scheme on the page.

Applying colours to the form

The three CSS commands we'll use to make those forms look good are border, background, and color (you can also use any other CSS command, such as font, text size, bold etc.).

So, let's say we want the input boxes in this form to have a dark blue text colour and border, and a pale orange background, and the submit button to have black text, an orange background, and a dark blue border.

In addition to the above CSS, we would add in the following commands:

input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}

.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}

We use 'outset' for the button's border so that it looks like a button. If we used 'solid' it would look flat. Here's how the form comes together:

A word of warning: be careful about using a light text colour for text with input boxes. More and more Internet users are using the Google Toolbar which fills in online forms for you. Whenever a form appears, it automatically turns the background colour of input boxes to yellow. If you've specified white text it would be virtually impossible for your site visitors with this toolbar installed to see what they're writing when completing the form.

If the button still looks the same then your browser doesn't support button re-styling. This is particularly common on the Mac.

Formatting the whole form

We may want to give this form its own title and border. To do this we add the <fieldset>and <legend> commands to the HTML code:


<form action="#">
    <fieldset>
        <legend>This is my form</legend>
        <p>
            <label for="name">Name</label>
            <input id="name" type="text" />
        </p>
        <p>
            <label for="e-mail">E-mail</label>
            <input id="e-mail" type="text" />
        </p>
        <p class="submit">
            <input type="submit" value="Submit" />
        </p>
    </fieldset>
</form>

We'll apply some CSS commands to the fieldset and legend to give the form a blue border and a title with an orange background:

fieldset
{
border: 1px solid #781351;
width: 20em
}

legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px
}

The final form

Drum roll...here is our final form:

This is my form

Here's the CSS we used to make this, all in one place:

label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}

.submit input
{
margin-left: 4.5em;
}
input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}

.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}
fieldset
{
border: 1px solid #781351;
width: 20em
}

legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px
}

Take this further

This article only touches on what you can achieve with CSS and forms. You can pretty much apply any CSS command to a form item, so the only limit is your imagination. Play around with a form and see what you can come up with!

You might also like...