Creating a Form with Notepad or Composer

1.0 Overview

A form on the Web requires two files in your Web directory:

filename.html
This file defines how your form will appear and function on the Web.

filename.form
This file determines the format in which the information that a guest enters into your form will appear when it is e-mailed to you.

For easy identification purposes, these filenames should be identical except for the .html or .form extension. For the purposes of this documentation, we will give our files the names:

  • comment_form.html
  • comment_form.form

(Do not use spaces in your filenames.)

 

2.0 Creating the .html File

We will name our file comment_form.html. Use the text editor of your choice to create this file (e.g., Notepad). Or, if you are familiar with Netscape Composer, you can use the HTML Source view in that program to create a form within an existing page or on a new page. Be sure to type the information carefully, particularly the command lines. Typographical errors will prevent your form from working properly.

2.1 Title, Header, and Hidden Information

You need to give your form a title and a header, just as you would any Web page. You must also enter some information that will tell the browser what to do with the information that your guest enters into your form. Since this setup information will not appear on your form page, it is called "hidden" information.
  1. Open the comment_form.html file using the text editor.

     

  2. Give the Web page that will contain your form a title by placing the following line in your file, between the <HEAD> and </HEAD> tags (if you are using Composer, you can create a title in the Page Title and Properties menu item):

    <TITLE>Send Me Your Comments</TITLE>

     

  3. Give the Web page a header by placing the following line in your file, after the <BODY>tag:

    <H1>Send Me Your Comments</H1>

     

  4. Now you must enter the command that will determine what is done with the information that your guest enters into your form. (The next command, along with the remaining pieces of code on this page, will be placed after the <BODY> tag.) Enter the line:

    <FORM METHOD=POST ACTION="http://www.stolaf.edu/cgi-bin/form-mailto.pl">

     

  5. The following line determines to whom the form information is sent:

    <INPUT TYPE="hidden" NAME="_recipient" VALUE="emailAddress">

    Replace emailAddress with the full e-mail address of the account to which you want the form information mailed. (If it is to be mailed to your personal e-mail account, enter yourLoginName@stolaf.edu. For example, if your login name is fram, your full address will be fram@stolaf.edu.)

     

  6. The following line identifies the .form file that will be used to format the form information that will be mailed to you:

    <INPUT TYPE="hidden" NAME="_formname" VALUE="path/filename">

    Replace path/filename with the path to your comment_form.form file. If it is in your personal UNIX account, replace path/filename with

     

    1. /people/yourLoginName/comment_form.form

     

    If it is in a department's top-level directory, use

     

    1. /stolaf/depts/departmentName/comment_form.form

The beginning of your comment_form.html file should now look something like this:

<TITLE>Send Me Your Comments</TITLE>
<BODY>
<H1>Send Me Your Comments</H1>
<FORM METHOD=POST ACTION="http://www.stolaf.edu/cgi-bin/form-mailto.pl">
<INPUT TYPE="hidden" NAME="_recipient" VALUE="emailAddress">
<INPUT TYPE="hidden" NAME="_formname" VALUE="path/comment_form">

2.2 The Form Body

Now you will create the body of your form--the area in which your guest will enter information. You may wish to make a statement above the form fields. To do so, simply add the text for your statement to your comment_form.html file. In our example, we typed:

Thank you for visiting my World Wide Web pages. If you have comments or suggestions for how I might improve my pages, please fill out this form and send it to me.

Now you are ready to create the fields into which your guest will enter information. The first block of input fields will look best on the page if the headings are right-aligned and the field boxes are neatly aligned in a straight column (see below). To accomplish this, we will use preformatted text, which makes the browser obey your use of spaces to align text.

  1. Type <PRE> to use preformatting.

     

  2. The command to create a blank field is

    <INPUT SIZE=#ofCharacters NAME="fieldName">

    where #ofCharacters is the width of the text area in the display, and fieldName is the name you assign to that field. A field name cannot contain spaces, and field names must be unique; only use a field name once in a form.

    Enter the following lines to create the block of empty fields: 

                  Name: <input size="30" name="name">

 Company or School: <input size="30" name="affiliation">
              City: <input size="30" name="city">
 State or Province: <input size="30" name="state">
           Country: <input size="30" name="country">
<P>

    E-Mail Address: <input size="30" name="email">

    Use spaces to align the colons in a vertical line. (Avoid Tabs; different browsers and computers handle them differently.) Remember: field names cannot contain spaces.

     

  3. Turn off preformatting by entering the line </PRE>.

     

  4. Type the following lines to make the URL field: 
    If you have a home page and would like me to see it,
please enter your URL:
<P>
<INPUT SIZE=60 NAME="url">
<P>

     

  5. Now you will use "radio buttons" to find out which browser your guest uses. You will use the unnumbered list format to list the options in an indented column. The third option, "Other," will be followed by an empty field in which they can type the name of their browser. Enter these lines in your file:

    Which browser do you use?
    <UL>
    <INPUT TYPE="radio" NAME="browser" VALUE="netscape">Netscape
    <BR>
    <INPUT TYPE="radio" NAME="browser" VALUE="explorer">Internet Explorer
    <BR>
    <INPUT TYPE="radio" NAME="browser" VALUE="other">
    Other (please name):<INPUT SIZE=30 NAME="otherbrowser"> </UL>
    <P>

    These lines set up a variable named "browser." If your guest clicks on the button for Netscape, the text string "netscape" is stored in the variable "browser." If your guest clicks on Internet Explorer or Other, the text string "explorer" or "other" (respectively) is stored in the variable "browser." When the form information is mailed to you, the value for the variable "browser" will be listed, thus telling you which browser your guest uses.

     

  6. Next you will ask your guest to rate your Web pages by selecting an option from a pop-down list of choices. Enter the following lines in your file: 
    Please rate my Web pages:
<SELECT NAME="rating">
<OPTION SELECTED VALUE="excellent">Excellent
<OPTION VALUE="good">Good
<OPTION VALUE="fair">Fair

<OPTION VALUE="poor">Poor
</SELECT>
<P>

    These lines set up a variable named "rating." The option that your guest chooses (Excellent, Good, Fair, or Poor) will be stored in the variable "rating" and will be returned to you when the form information is mailed.

     

  7. Now you will create a text area in which your guest can type extended comments. You will make the size of this text area 50 columns by 10 rows. (These dimensions can be changed to suit your needs.) Enter the following lines in your file:

    Please enter any additional comments or suggestions you might have:
    <P>
    <TEXTAREA NAME="comments" ROWS=10 COLS=50>
    </TEXTAREA>
    <P>

     

  8. When your guest is finished entering information in the form, he or she will click on a "Send" button to submit their information. This will cause the information they entered to be e-mailed to the address you specified in Step 6 of Section 2.0. Add this line to create the Send button:

    <INPUT TYPE="submit" VALUE="send">

     

  9. Finally, finish your form by entering the form endtag and a body endtag:

    </FORM>
    </BODY>

     

  10. Save your file and exit.

     

  11. Upload your file to the web server. If viewed in Netscape, the finished comment_form.html page should look like this.

 

3.0 Creating the .form File

Now you will create the comment_form.form file, which will determine the format of the information that is mailed to you.

  1. Create a new file called comment_form.form. To do this in Notepad, open Notepad, click on File>Save As, and save the file as comment_form.form Then enter the following lines of text: 
    Comments on my Web pages
             Name: $name
      Affiliation: $affiliation
             City: $city
State or Province: $state
          Country: $country
           E-Mail: $email
              URL: $url
          Browser: $browser $otherbrowser
           Rating: $rating
Comments:
$comments

    Use spaces to align the colons in a vertical line (but remember that spaces are not allowed in field or variable names). Note the use of a dollar sign followed by a variable name to denote where the value for a variable (the information your guest entered) is to appear in your mail message. The variables you use in this file must agree with the variables named in your .html file.

     

  2. Save your file and exit. Upload this file to the web server.

     

4.0 Conclusion

Your form is now complete. Create a link to it on one of your Web pages, then open a browser and give it a try. If you encounter problems, examine both your comment_form.html and comment_form.form files closely. There is no room for error in HTML. Make sure you have typed everything correctly. When you make changes to your form files, you may need to quit and restart your browser to see them take effect.

 

Back to Top | Contents | IIT Documentation