[an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive]

[an error occurred while processing this directive]

HTML Forms Tutorial: Basic/Intermediate

Recommended prerequisite knowledge: basic HTML. What you will learn: how to set up an HTML form and make it interact with a server side script.

Making Your Forms Work
with CGI Scripts

by Judy Fontanella

Forms Add Function to Your Web Site

Forms are an important part of Web design because they allow us to collect data from our visitors. Forms can add interactively to our Web pages and perform a lot of useful functions.

Making Forms Work

In order to create forms, you have to know how to put the form elements on your page. However, there is another important part to creating forms. That is making the form work with a script that will take the data entered by your visitors and process it in some way. Your choice of a script depends upon the purpose of your form. Some forms interact with a JavaScript that is coded into the Web page and is run by the visitor's browser. The large majority of forms are processed by a script that is resident on a remote server, however. When the user fills in his data and then clicks the submit button, the data is sent to the script whose address is coded into the form tag.

The script that the form results are sent to may be on the same server as your Web site, or on another server. Frequently, the script is a CGI (Common Gateway Interface) script that is written in PERL, an ASP (Active Server Pages) script or a PHP (Personal Home Page) script. The script can take the data submitted by the form and add it to a database, send it by email to an address indicated, or return search results based on the user's input. Each script is unique and written to perform specific functions.

Even if your website host does not provide a form processing script, you can use a remote-hosted script to add interactive forms to your site without having to know any CGI or Perl.

Often, when you sign up with a hosting service to host your Web site, they will provide one or more CGI scripts located on their servers for your use. The most often provided type of CGI script is a form processing script that will take the information that is input by a visitor to a Web site and email it to the Web site owner. The hosts usually also provide good instructions on how to make your forms work with their scripts. It's generally just a matter of adding the correct address of the script to your form tag and a few hidden form fields to the form. These hidden form fields are invisible to your visitors. They don't display on your Web page. They are present in the HTML code, though, and carry important information back to the script, such as the email address that the form results should be sent to. In your HTML code, a hidden form field looks like this:

<input type="hidden" name="your_email_address" value="[email protected]">

Making Your Form Work with a Remotely-Hosted Free CGI Script

Just in case your host does not provide a form processing script, all is not lost. You can use a script that is provided for anyone to use freely, as long as they are willing to view a little advertising. There are several such scripts available, but I am going to use the one at http://www.response-o-matic.com as an example. Once you understand the process of making your form work with one script, it will be easier for you to make it work with others.

To send the script to the Response-O-Matic server for processing, you must add the script address to the form tag like this:

<form action=http://www.response-o-matic.com/cgi-bin/rom.pl method="post"> (Your other form fields go here. Include your submit buttons at the end.) </form>

Notice the method=post attribute in the form tag. Some scripts use method=post. Others use method=get. Be sure to follow the instructions for your script. The Response-O-Matic script uses method=post.

Now, there is one other thing you must add to your form to make it work with this particular script. That is the hidden field that tells the script where to send the form results. The hidden field can go anywhere you would like as long as it is between the opening and closing form tags. Now the HTML code for your form looks like this:

<form action=http://www.response-o-matic.com/cgi-bin/rom.pl method="post"> <input type="hidden" name="your_email_address" value="[email protected]"> (Your other form fields go here. Include your submit buttons at the end.) </form>

Be sure to substitute your actual email address for the part that is in red.

Adding Extra Options to Your Form

That’s all that is required to make your form work with the Response-O-Matic script. Easy, isn’t it? The folks at Response-O-Matic wanted to provide you with more options than this, however, so, they added a lot more optional fields that you can add to your form if you want to.

Two of the optional fields are visible fields into which the visitor can type their name and email address. If you name them the exact names that Response-O-Matic specifies, the visitor’s name and email address will be placed in the "From" section of the email that’s sent to you. This makes it much easier to add this visitor to your email address book or to send them a reply. If you were to add these two fields to your form, your code would look like this:

<form action=http://www.response-o-matic.com/cgi-bin/rom.pl method="post"> <input type="hidden" name="your_email_address" value="[email protected]"> Name: <input type="text" name="visitor_name"> Email Address: <input type="text" name="visitor_email_address"> (Your other form fields go here. Include your submit buttons at the end.) </form>

The rest of the optional fields are all hidden fields. They allow you to specify such things as the subject of the email message that you receive, which fields your visitor must fill in before the form will submit, and the appearance of the Thank You page that follows the form submission. For instance, if you wanted to specify the subject of the email, you would add a hidden form field named "email_subject_line". Your code will now look like this:

<form action=http://www.response-o-matic.com/cgi-bin/rom.pl method="post"> <input type="hidden" name="your_email_address" value="[email protected]"> Name: <input type="text" name="visitor_name"> Email Address: <input type="text" name="visitor_email_address"> <input type="hidden" name="email_subject_line" value="Conference Reservation Form Response"> (Your other form fields go here. Include your submit buttons at the end.) </form>

Of course, you would substitute your own subject line for the part that is in green.

Here is a complete chart on all of the available fields for setting up your form with the Response-O-Matic script. More information can be obtained by visiting the Response-O-Matic site at: http://www.response-o-matic.com.

Some Things to Keep in Mind When Working with Forms

Here are some extra points to remember when creating forms:

All of your form elements, including your hidden form fields, MUST be between your opening and closing form tags in order to work. Only one set of form tags per form is allowed.

If you are using a table to layout your form elements, it helps if you put the whole table inside the form tags. That way you won't have improperly nested elements.

Each form processing CGI script is written a little differently. The names that they give to similar hidden form fields may be different, and the number of required hidden form fields may vary. Therefore, when you change the CGI script that you are sending the form results to, you must also change your hidden form fields as well as the script address that is in the form tag. Be sure to type in the name of the hidden fields exactly as the instructions indicate. The names are case sensitive.

Be sure that you give each of your other form fields a descriptive name that you will recognize when you receive the email telling you how your visitors responded to your form. It's a lot more informative to receive the results of a form that say:

Chicken: yes
Beef: no
Soup: yes

Than it is to receive form results that say:
c1: yes
c2: no
c3: yes

Judy Fontanella owns her own Web design company called ArtBytes in San Diego, California. She also teaches both online and face-to-face Web design classes for Palomar Community College in San Marcos, California.