karine.do

2 May 2010

Customize a web form

css, form

For those who want a customized form like my comment form, I'll explain how in this tutorial. Here is a preview of the form we're going to create:

1) Base image

We're going to work from this image in Photoshop (or any other software):

2) Creating the form

Edit the image as you want, as you imagine your form:

Here you go, save as form2_bg.gif, it will be your form's base image background.

3) Cutting the form

We will have to cut out each text field. I obtain 5 images we will use later (name.gif, email.gif, website.gif, message.gif, send.gif)

name.gif
email.gif
website.gif
message.gif
send.gif

4) HTML Code

A basic HTML form, with a CSS class for each field.

<div id="prettyform">
  <form>
    <input class="name" type="text" name="name" value="" />
    <input class="email" type="text" name="email" value="" />
    <input class="website" type="text" name="website" value="" />
    <textarea class="message"></textarea>
    <input class="send" type="submit" name="send" value="" />
  </form>
</div>

5) CSS code, beginning

We start by styling the #prettyform div:

#prettyform {
  background: url(form2_bg.gif) no-repeat; /* your form background */
  width: 500px;
  height: 345px;
  position: relative;
}

We define form2_bg.gif as background. Width and height are your background image sizes. We use position: relative; so that we can position our text fields wherever we want in the div later.

6) Find the coordinates

Imagine the form is a grid and the top left corner is the origin. You will have to find out each text field's coordinates. For example, for "Name", you have to follow the red lines in the following image. The horizontal red line is 312 pixels long and the vertical red line measures 38 pixels, these values are the coordinates of my "Name" field and to translate this into CSS, it would be:

left: 312px; top: 38px;

7) CSS code, end

We first define the shared properties:

#prettyform input, #prettyform textarea {
  position: absolute;
  left: 312px;
  width: 180px;
  border: 0;
}

In my form, the fields have the same width and are aligned at 312 pixels from the left margin so I can put left: 312px; and width: 180px; for all of them. If your fields aren't the same size and not aligned, you will have to position them individually.

Now, let's style each text field: define a background picture for each, its "top" position and its height if needed.

#prettyform input.name {
  height: 26px;
  top: 38px;
  background: url(name.gif) no-repeat;
}
#prettyform input.email {
  height: 26px;
  top: 94px;
  background: url(email.gif) no-repeat;
}
#prettyform input.website {
  height: 26px;
  top: 152px;
  background: url(website.gif) no-repeat;
}
#prettyform textarea.message {
  height: 94px;
  top: 215px;
  background: url(message.gif) no-repeat;
}
#prettyform input.send {
  height: 26px;
  top: 315px;
  background: url(send.gif) no-repeat;
}

To remove the blue focus thing on Safari, you can add this:

input:focus, textarea:focus {
  outline: none;
}

Here you go!

• Download the files