15. Creating a Working Email Form

Recall that mention was made of the ACTION attribute of the <FORM>. It was as follows:

The value of the ACTION attribute must be either the URL of a program that processes the data or an email address.

The bold, brick red, highlighted material is what we use here at the University. We use a program called "cgiemail" to handle the forms. This will require a very specific ACTION attribute, but we will deal with that after seeing how we put together the pieces so "cgiemail" can handle the form.

To use "cgiemail" you need to have two files. One is a properly set up FORM file and the other is a TEXT file that will format the precise way the email will be sent. That means that it will contain the information typed in by the sender as well as text to make that information understandable to the receiver. Also, that text file will appear on the senders screen with the information from the form it is in, so that the sender is aware exactly what the receiver will get as an email message.

You already have a FORM file that you set up in the last lesson. Its ACTION attribute is not correct, but we don't need that to construct the TEXT file.

To better follow this lesson, I suggest that you print out both the browser version of the form file from the Exercises in Lesson 14 on Forms and the code for that file. It will make it easier if you can refer to the names of the VARIABLES (the NAME attribute in each field) as we write the TEXT file for this lesson. Remember, its code is on the "answers" page, so you can print that out (it is a frame, so select it and tell the browser to PRINT) and then you will have the names of the variables.

The name of the form from from the Lesson 14 exercises is FormPage.html. We want now to create a TEXT file in SimpleText (or some other text editor) and name it the same, except the extension should be ".txt" rather than ".html". That is, in this case, FormPage.txt.

The NAMES from that form are:

NameField A TEXTFIELD where the sender is asked to type the name of the writer.
EmailField A TEXTFIELD where the sender is asked to type in the email address of the writer.
Gender Male or Female choice which the sender chooses by clicking on one of two RADIO BUTTONS.
Humanities, SocialSci,
SciMath, and Professions
Interests which the sender chooses by clicking on CHECKBOXES. Multiple checks allowed.
OtherInterest A TEXTFIELDwhich is a used to add an interest not included in the check boxes.
DeptMenu To indicate a department to forward the message to. Choice made in a DROP DOWN MENU.
PersonMenu To indicate a person to forward the message to. Choice made in a SCROLLING MENU. Multiple choices allowed.
SubjectField A TEXTFIELD where the sender puts the subject of the message.
LargeMessageField This is a TEXT AREA where the message itself it written.

Usually you don't put anything in a form that is not used in the email message to be sent. You want all the information provided by the sender to appear in the message, or you wouldn't ask for it. To be sure all the information entered by the writer is sent, each of the variable NAMES must appear in the TEXT file surrounded by brackets, [. . .]. The information will then be sent as part of the email message.

Actually, you could get all the information by doing only that, but usually you like to put some context into the message, so the information makes sense to the receiver. Thus we begin to construct the TEXT file, "FormPage.txt."

The very first thing that must appear on the top line of the TEXT file is:

To: webmeister@uor.edu
( or your own email address)

That is, the email address to which the message is to be delivered. After that it is pretty free form.

Just to get things started off right, I would put in the variable NAMES in the order I would like them to appear in the message. You may repeat them, if there is good need to for stylistic or content reasons.

To: webmeister@uor.edu
[NameField]
[Subject]
---------------------------------------------------------------
[NameField]
[EmailField]
[Gender]
[Humanities] [SocialSci] [SciMath] [Professions] [OtherInterest]
[DeptMenu]
[PersonMenu]
[SubjectField]
[LargeMessageField]

Note here that I have repeated the variables NameField and Subject to make the top of the message look more like a regular email message, then I have divided the "address" portion from the rest by the dashed line.

Now let's add some ordinary text to make this look better when it is received.

To: webmeister@uor.edu
From: [NameField]
Subject: [Subject]

------------------------------------------------------------------------------
Name [NameField]

Email address? [EmailField]

Gender [Gender]

Interests [Humanities] [SocialSci] [SciMath] [Professions] [OtherInterest]

Department to Forward to [DeptMenu]

Person to Forward to [PersonMenu]

Subject of the Message: [SubjectField]

THE MESSAGE:
[LargeMessageField]
------------------------------------------------------------------------------
PLEASE USE THE "BACK" BUTTON TO RETURN TO THE WEB
------------------------------------------------------------------------------
Thank you for contacting us.

The University of Redlands
1200 E Colton Avenue, Box 3080
Redlands, CA 92373

909-793-2121

Of course what you put in is up to you. The "PLEASE USE THE "BACK" BUTTON . . . is just helpful information for the sender, and the ending is web courtesy.

So now the TEXT file is finished and can be saved, all that is left is to put in the correct ACTION attribute in the FORM file.

As noted in the last lesson, the </FORM> tag has two "attributes" that must be there for the form to function. They are ACTION="xxxxxxxxx" and METHOD="POST." We put in an email address in the ACTION attribute in the last lesson just to let things work a little. Now we will look at using the URL of the program we use at the University to processes the data.

That program we use is called "cgiemail" and is a CGI program. CGI stands for "Common Gateway Interface" and means that the program can be used across computer platforms and various networks. This program is installed in newton.uor.edu and in order to use it, it must be placed in a very special way in the ACTION attribute.

The trickiest part of the HTML form is getting the ACTION set correctly. Start with the total URL of your e-mail text file. In this case, the TEXT file will be in the directory "class" and its name is FormPage.txt." Below is the URL for the file. To enable us to move on to the "cgiemail" requirements, consider it split it into two parts.

First cgiemail .gif

Now you insert the information for "cgiemail" in the middle. In our case, that information is /cgi-programs/cgiemail/. That tells the computer where the "cgiemail" program is to be found.

The final ACTION looks like this:

2nd cgiemail .gif

Putting that into the ACTION attribute of FormPage.html completes the setup for an email form.

<FORM ACTION="http://newton.uor.edu/cgi-programs/cgiemail.cgi/class/FormPage.txt" METHOD="POST">


If you would like to try it and see how it works, use this link.

NOTE!!!

When I was making FormPage.txt and testing it, I could not get the [SubjectField] at the top of the text file to work. I copied the same variable representation from where it was later in the file, and it still did'nt work. Finally, I just put another space in front ot it, and lo and behold, it worked fine. This is another one of those peculiarities that exist in HTML that are not documented. That is why you need to be a bit "experimental" when you troubleshoot.

Exercises 15

Using the form you created in the last lesson, put in a correct ACTION attribute using the directory "class" on newton.uor.edu. Then create a text file to go with it. Test it to make sure it works.

In order to test your files, you will need to "ftp" (File Transfer Protocol) them to newton.uor.edu. You can do this using an "ftp client." On the Macintoshes in the labs "Fetch" is available under the Apple Menu. On the PCs in the NT lab, "Windows FTP (32 bit)" is or has been recently installed. If you know how to use "command line" ftp on the PC you may use that. Under RESOURCES FOR HTML on the Table of Contents menu to the left is a file that explains generally how to use an ftp client to put your files on newton.uor.edu. It uses "Fetch" as the example.


If you want to see my answers , click here.

You may "expand" the answers window by lifting the bar to make the window larger in order to see the answers better.

After reading the answers, to put things back the way they were, use the BACK button or scroll down to the link at the bottom of the "Answers" page.