Indiana State University : Web Development Resources : Creating Web Forms Using Cgiemail

Creating Web Forms Using cgiemail

There are two ways to create a cgiemail web form.

You can use FrontPage 2002 to create your form and apply the cgi script to that form.
You can follow the steps below to create the form using HTML (HyperText Markup Language).

What is cgiemail?

Usually, creating web forms involves writing a complicated form processing script (cgi) that makes the form work. cgiemail simplifies this considerably. Instead of writing cgi script, all you need to do is write a text file. The next section describes what needs to be included in this text file.

The Text File:

The first step in using cgiemail is creating a text file. This file will be used as a template for the email that the form sends. Important: This file should be created in Notepad or a similar text editor program.

Before making the text file, you must know what information the form will collect. The form, "example.txt" (shown in the paragraph below below), will be used throughout this document as an example. This form will be used to collect the following data: name, email, gender, and favorite color.

A text file needs to include header lines, a blank line, and a body.

Contents of the file, "Example.txt":
To: IT-Train@indstate.edu Subject: cgiemail Example From: [email]	<--HEADER LINES
	<--BLANK LINE
Name: [name] Email: [email] Gender: [gender] Favorite Color: [favcolor]	<--BODY

To create a text file such as example.txt:

Go into a text editing program such as Notepad or Wordpad.
The first header line is the "To:" field followed by the address that the email should be sent to. In the example, the first header line is "To: IT-Train@indstate.edu." In this case, the email message will be sent to IT-Train@indstate.edu.
The second header line is the "Subject:" field followed by the text that you want to appear in the subject line of the email message that is generated. In the example, the second header line is "Subject: cgiemail example."
Optional: Include a "From:" field to show who the mail is from. In the example, the third header line is "From: [email]."
Insert a line break so that there is a blank line between the header and the body.
The next four lines are a template for how the email will appear. The words in the brackets (e.g., "name") are variables. When the user submits the form, the values (i.e., the answers) will be submitted as an email message. There are some rules to giving these variables names:
- A variable must start with a letter, not a number or other character.
- Variables may not have special characters (e.g. *,&,^,#,etc.) or spaces in them.
- Try to use all lower case for variable names. If upper case letters are used, you must be consistent and type them exactly the same wherever they are used.
TIP: Try to make variable names short and descriptive of what data they will contain.

The Form:

The next step is building the form. Here is what the form will look like:

The HTML Code Used to Produce the Form

To make the above form, HTML tags must be added to the source of the page directly after the <BODY> tag. Below is an example of how the HTML would look:

<FORM METHOD="POST" ACTION= "http://web.indstate.edu/cgi-bin/cgiemail/it/user-serv/websupport/example.txt">	<--Form Method (Required)
Name:<INPUT NAME="name" size="20"> <BR><BR> Email:<INPUT NAME="email" size ="20"> <BR><BR>	<--Text Input
<INPUT TYPE="RADIO" NAME="gender" value="male">Male <INPUT TYPE="RADIO" NAME="gender" value="female">Female <BR><BR>	<--Radio Buttons
Favorite Color: <SELECT NAME="favcolor"> <OPTION>Blue <OPTION>Red <OPTION>Green <OPTION>Yellow <OPTION>Brown </SELECT>	<--Drop-Down Menu
<INPUT TYPE="SUBMIT" VALUE= "Submit">	<--Submit Button

Form Method

<FORM METHOD = "POST" ACTION = "http://web.indstate.edu/cgi-bin/cgiemail/it/user-serv/websupport/example.txt">

This is the first HTML tag that should be added. It directs the form to the location of the text file. Notice that the address seems longer. The actual location of the text file is "http://web.indstate.edu/it/user-serv/websupport/example.txt". In order for the script to work, the "/cgi-bin/cgiemail/" must be added after the address of the web server but before the subdirectory path on the server.

Note: The example above works for web.indstate.edu; the exact address may vary depending on your server and the location of your file within the subdirectories.

Text Input

Text inputs need to be added for Name and Email. The format used is:

<INPUT NAME = "variable name" size = "number of spaces">

Replace variable name with the name used in the text file. Replace number of spaces with the length wanted for the input. The length used above is 20. The source for Name and Email (without any formatting tags) should look like this:
Name : <INPUT NAME = "name" size = "20">
Email: <INPUT NAME = "email" size = "20">

Radio Buttons

For Gender, radio buttons are used. The format used is:

<INPUT TYPE = "RADIO" NAME = "variable name" value = "value to give variable">

Replace variable name with the name used in the text file. Replace value to give variable with the value the variable would have if this button were checked. There are two choices here so there should be two tags added. Since they are both dealing with the same variable, the name should be the same. Only the values are different. The source, without formatting, should look like this:
<INPUT TYPE = "RADIO" NAME = "gender" value = "male"> Male
<INPUT TYPE = "RADIO" NAME = "gender" value = "female"> Female

Drop-Down Menu

For Favorite Color, a drop-down menu is used. The format used is:

<SELECT NAME = "variable name">
<OPTION> choice
</SELECT>

Replace variable name with the name used in the text file. Replace choice with the color names. The option tag can be used as many times as need between the select tags. Here is what the source should look like:

Favorite Color:
<SELECT NAME = "favcolor">
<OPTION>Blue
<OPTION>Red
<OPTION>Green
<OPTION>Yellow
<OPTION>Brown
</SELECT>

Submit Button

A submit button is needed. When the user clicks submit, it sends the email. The source for a submit button looks like this:

<INPUT TYPE = "SUBMIT" VALUE = "Submit">

Uploading the Files:

After both the text file and the form are made, they both need to be uploaded. It is important that the text file is uploaded into the location that appears in the source of the form. In this example recall that: ACTION="http://web.indstate.edu/cgi-bin/cgiemail/it/user-sev/websupport/example.txt"
This means the text file should be uploaded to http://web.indstate.edu/it/user-serv/websupport/

The Working Form:

Now the form should work. After the user fills out the form and clicks the submit button, all the variables will be given their values and the web browser will display a message showing that the mail has been sent. The message should be similar to this one:

The following message was sent.

To: IT-Train@indstate.edu
Subject: cgiemail Example
From: JohnDoe@indstate.edu

Name: John Doe
Email: JohnDoe@indstate.edu
Gender: Male
Favorite Color: Blue
cgiemail 1.6

cgiemail link:

cgiemail Homepage

This page is maintained by web@indstate.edu