Getting Started
Editors
Design Tips
Home

Getting Started
Editors
Design Tips
Home

The Basics
Adding Color
Adding Images
Backgrounds
Links
Text Format
Page Format
Tables
Frames
>>Forms

Audio
Meta Tags
JavaScript
Cut & Paste JScripts
Style Sheets
IE with Style
IE Form Colors
MS Trans. Effects
Special Character Set

Graphic Designs
Fonts
Midis

Forms can be a great asset to your site, especially if you want information about the people who visit your site. The first thing you will need to understand is that forms require a handler. This means that your form will not work without some method of processing the input. Remember your basic computer rules of I/O? Well, forms give the input so something else has to handle the output.

The first and most primitive way of handling form output is via your e-mail client. This method is easy to use, but it is very hard to understand the output, especially if you have a lot of information to process. I will give you examples of this method in just a moment.

The second and most efficient way of handling form output is via a CGI (Common Gateway Interface) script. Although it is best, CGI scripts are tedious to configure and you must have access to your server's cgi-bin. You can also use free form handlers that can be found all over the Internet. This is one site that I have found most reliable. CGI For Me. If you would like to learn about CGI programs written in perl, or would like to know how to configure and use them, the best source of free perl scripts and FAQs is at Matt's Script Archive.

OK, now on to making forms.

The first line of code for ever form you will create you must tell the browser that you are requesting information via a web based form, how the form is to be handled, and what method you will be using. We will always use the POST method here. The other method is GET which is appended information and is a lot more difficult to use.

The Code

<FORM ACTION="mailto:you@youraddress.com" METHOD="post">

The ACTION= specification tells the form what type of handler you are using and the METHOD= specification tells the form to post the information to the e-mail client and then send it to the address given.

Next you need to have the input "blocks" for your visitor's information:

Your Name: <INPUT TYPE="text" NAME="name" SIZE=35>

Lets look closer:
The input tells the form that it is receiving the information, the type= tells the form what kind of input block, the name=" " gives the block a unique name, and the size= speicifies how large or small the input box is.

Note:
Always put text above or before the input specification so that your visitor will know what type of information you are requesting.

Let's put another box in this form:

Your E-mail: <INPUT TYPE="text" NAME="email" SIZE=35>

This time you have given the input box a different name. This lets the form handler know that it is a different information block and should be kept separate.

Now you must give the visitor a way to send the form:

<INPUT TYPE="submit" NAME="submit" VALUE="Submit">

Notice you ahve a new type of block and an added specification value=. This is the generally accepted submit code for all types of web based forms. You can use any value you want because it is only the text that will be displayed on your submit button. It is also nice to give the visitor a chance to clear the form and start over:

<INPUT TYPE="reset" NAME="clear" VALUE="Oops, clear it">

This will earse all the information that the visitor type in the form.

Now end your form:
</FORM>

If you do not end the form you will have a blank page from the point you inserted the form.

Here's what you have:

Now, the information you will get in your e-mail will look like this:

name=test&email=yourname%40yourserver.com&submit=Submit

This is the exact e-mail I received when I tested this form. Now, this is how you interpret this information. All the information blocks are separated by the & symbol. The first block is name=test. Test is what I typed in the first input box of the form, therefore, "name" is the name of the first block and 'test' is what the visitor would have typed in. The next block is email=yourname%40yourserver.com. (will read as your email address) "Email" is what I named the second block and yourname@yourserver.com is the the email address you will use for the form. The %40 is the system code for the @ symbol. The last block is submit=Submit. I named the submit button "submit" and gave it a value of Submit. Rather awkward huh? But it works.

Now that you have the basic form, lets have some fun! Let's add a drop down selection box for rating your site:

You can add the following codes anywhere between <FORM> and </FORM>.

How do you rate my site?
<SELECT NAME="rating">
<OPTION VALUE="Great">Great
<OPTION VALUE="Superb">Superb
<OPTION VALUE="The Best">The Best </SELECT>

Here's what you get:

So far you have the visitor's name, e-mail address, and a rating system, let's give the visitor a chance to send you his/her comments about your site:

Comments:
<TEXTAREA NAME="comments" COLS=15 ROWS=5 WRAP="true"></TEXTAREA>

It will look like this:

What is your sex? <INPUT TYPE="radio" NAME="sex" VALUE="male">Male
<INPUT TYPE="radio" NAME="sex" VALUE="female">Female
<INPUT TYPE="radio" NAME="sex" VALUE="uncert">Uncertain

And this is what you have:

If you would like to have information sent along with the form automatically but don't want the visitors to see the information you would use a hidden block:

<:INPUT TYPE="hidden" NAME="form" VALUE="Posted from http://www.yoursite.com/form.html">

This will not be seen in the form and the visitor will not know that the information is being sent unless they have looked at the source code.

Using CGI to Handle Forms

To use a cgi based form handler, you will first need to have a CGI e-mail program in the cgi-bin of your hosting service. For information about the cgi-bin and your service, contact your server administrator. Next you will need to configure (personalize) the program. Always edit and upload CGI files as ASCII text. I use Notepad with Windows 95 to edit all of my CGI files. Use the help file that is provided with the CGI program to configure it properly.

The last step is to link your CGI program to your form:

<FORM ACTION="http://www.yoursite.com/cgi-bin/formmail.cgi" METHOD="post">

The rest of the form will be the same as explained above. If you have chosen to use Free Form, CGI For Me, or another free CGI server, once you have created your account, you will be given instructions on using the service. They will give you all the information you need for your form to work without problems.