Well, every time we fill out one of those online 'contact us' forms, we use a form. Most forms are sent via a CGI script somewhere along the line. So what exactly is a CGI script? CGI, stands for Common Gateway Interface, and is a computer language that takes bits of information, changes it according to the script, and then outputs it in the new form. CGI is not a computer language in itself, but is written from other computer languages. Perl and C are the two most common languages that CGI scripts are written in.

All forms need a CGI script to take the information that was inputted into the fields of the forms and transform it to whatever the creator would like. For example, a site creator could create a script that takes the users name and outputs it in a letter that is personalized with the users name.

Forms are relatively straight forward to design, but you will need the CGI bit to make it work - having said that, and to contradict myself, there is a method where you don't, but it's not very nice and can look a bit 'amateurish' - without wishing to sound snobish! I will demonstrate that system later on these pages.

So let's design a form. Most of them sit inside a table, this way you can keep everything lined up neatly and take advantage of the (cell)spacing and (cell)padding that a table naturally brings with it.

First draw a table, I want the 'send' and 'reset' buttons seperated at the bottom of the form. Let's have a look at it so far:

<center>
<table border="1" cellpadding="2" cellspacing="2" width="90%">
<tr><!-- Row 1 -->
<td>&nbsp;</td><!-- Col 1 -->
<td>&nbsp;</td><!-- Col 2 -->
</tr><tr><!-- Row 2 -->
<td>&nbsp;</td><!-- Col 1 -->
<td>&nbsp;</td><!-- Col 2 -->
</tr>
</table>
</center>

Of course you can design the table to however you want it to look, the choice is yours. Let's continue by including the information you want. Most people would like to know who is contacting them, obviously! They would also like to return the compliment with a return e.mail address, so let's put those in. For both these requirements you will need a 'text box' that looks like this:

The coding looks like this for the visitors name:
<input type="text" name="Name" value="" size="20">

...and for the visitors e.Mail address:
<input type="text" name="email" value="" size="30">

You can vary the size of the text box, in this instance I have used a size of 20 characters, which is about right for a name, but an e.mail can be longer, so I have used 30 characters.

Also notice how the only other difference is the 'name' part of the script. Each component of the script will require a different 'name'. There are two main reasons for this. The CGI script that 'translates' your form will need a point of reference to operate, and secondly, when the form arrives on your computer, probably in Outlook Express or similar, you need a reference as well, the script will show the result as 'Name - Fred Bloggs', 'email - myemail@provider.com'.

You will need to give them both a heading, so people know what you are asking for, so lets add that:

Your Name:

Your e.Mail address:

What else do you want to know? How about their address? You can do this two ways, depending on how in-depth you want to go. Example one shows just an geographical area which the visitor can select from. This is called a 'drop-down' list or a 'combo box', and looks like this:

Please select: United Kingdom United States France Germany Belgium Italy Other country

This is a common way of saving your visitor time, especially if the country, or part of a country, is all you want to know. The code looks like this:

<select name="country">
<option>Please select:
<option>United Kingdom
<option>United States
<option>France
<option>Germany
<option>Belgium
<option>Italy
<option>Other country
</option>
</select>

Notice how each line is an 'option' which requires only the <option> command, but not a </option> command until the very end. The list can be as long as you want, as long as each <option> is on a seperate line. Don't forget to close the drop-down box with </select>

Also, you don't need the <option>Please select: at the top, but (a) it looks nice (b) helps those not familiar with forms to realise what they have to do, and (c) gives you a 'nil return' if they don't select anything. When your form arrives on your computer and the visitor hasn't selected a country the form will show you 'Please select' rather than a blank space. It may help, but of course I have a way around that, more later!

Another very useful time-saver is the checkbox and radio buttons. They look like this:

Let's take a set of questions in both formats. Try it and see. I have included a 'reset' button for your convenience so you can play about.

By the way, see those horrible 'dotted lines' around the boxes when you click them? Remember you can get rid of those quite easily with the command onfocus="this.blur()" if you want to, same goes for the reset button. Try this one instead:

So what about the coding? I will elaborate on that on the next page....