BeWebmaster

Create More Attractive Forms

Ad

Using CSS you can make your forms look much more attractive to the user. It is very easy to do as you will see in this little tutorial. There are three steps to creation of this  form

  • Create Images
  • Create CSS file
  • Create form and include CSS to your page

Create Images

First you need to create images you want to use for your form background. For faster loading, it is best practice to keep these images very small in size. You should make them very opaque, so that the text typed in the form is visible. Most commonly used in textfields are some textures or inner shadows, and images are often found within textareas of the forms.

Create CSS file

Because you should use same form formatting for every page on your web site, it is advisable to make external CSS file. That way if you need to make any changes to it, you have to do it only once and to only one file. We will create two CSS classes, one for the textfield, and one for the textarea of the form.
Type this in your text editor:

.formfield {
background-image: url('shadeform.gif');
font-size : 12px;
font-family: "Verdana", Helvetica, sans-serif;
color : #000000;
border:1px solid #000000;
}
.formarea {
background-image: url('face.jpg');
font-size : 12px;
font-family: "Verdana", Helvetica, sans-serif;
color : #000000;
border:1px solid #000000;
}

Replace image names shadeform.gif and face.jpg with names of images you created.
Once done, save the file with .css extension, (for example form.css) in the same folder where you saved your images.

Create form and include CSS to your page

Add this line between the head tags of the page that displays the form:
<link href="form.css" rel="stylesheet" type="text/css">

Replace form.css with name of the css file you created. If your file is located in different folder than your form page, than include path to your file. (folderName/cssFile.css)

Than make these changes to your form:
Add class="formfiled" within your textfield tags and class="formarea" within your textarea tags.

Here is an example:
<input name="name" type="text" id="name" size="38" class="formfield">
<textarea name="Comments" cols="38" rows="13" class="formarea"></textarea>