Boulder Community NetworkIndian Peaks, mountains above Boulder County
  Volunteer!    Feedback
About BCN   Donate

 
Last Update: Wednesday December 28, 2005


Reader Response Forms

This introduction to Reader Response Forms has the following sections -


Introduction to Reader Response Forms

A capability is available for web page programmers on the BCN site to set up a reader response or registration form, where the reader can be asked to fill in various fields such as to request more information or to register for some event. The reader then submits the form via a "Send" button which results in an email message being sent to some specified email address.

A common nomenclature for this capability is "cgi interface." Which is unfortunate because cgi (Common Gateway Interface) is only a means to accomplish this goal and is also used for many other purposes. Consequently, the term "Reader Response Forms" will be used for this capability, instead of "cgi."

The program being supported for this capability is called e-merge. It has been used widely for this capability on many Internet Service Providers.


The HTML User Interface

The <form> html sequence is used to present a request to the reader to enter the required information. The following is a detailed example of the section of code to be put into your html file -

<FORM METHOD="POST" ACTION="/cgi-bin/emerge/xyz/response.txt">
<INPUT NAME="required-subject" TYPE="hidden" VALUE="Reader Response Demo.">
<PRE>
First Name:        <INPUT TYPE="TEXT" NAME="required-fname"  SIZE="35">
Last Name:         <INPUT TYPE="TEXT" NAME="required-lname"  SIZE="35">
Organization:      <INPUT TYPE="TEXT" NAME="required-comp"   SIZE="35">
Street:            <INPUT TYPE="TEXT" NAME="required-street" SIZE="35">
City:              <INPUT TYPE="TEXT" NAME="required-city"   SIZE="35">
State or Province: <INPUT TYPE="TEXT" NAME="required-state"  SIZE="35">
Postal/Zip code:   <INPUT TYPE="TEXT" NAME="required-pcode"  SIZE="35">
Country:           <INPUT TYPE="TEXT" NAME="country"         SIZE="35">
Telephone:         <INPUT TYPE="TEXT" NAME="required-tel"    SIZE="35">
Facsimile:         <INPUT TYPE="TEXT" NAME="fax"             SIZE="35">
Email:             <INPUT TYPE="TEXT" NAME="email"           SIZE="35">
</PRE>
Any comments?<br>
<TEXTAREA NAME="comments" ROWS="5" COLS="72"></TEXTAREA><br><br>
<INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="Send">
<INPUT TYPE="RESET" NAME="RESET" VALUE="Erase">
</FORM>

The above example uses the <pre> tag to show how to line up the field name and input box specifications with as little distracting html as possible. An alternative way to code this sequence is to embed the field name and input box details within a <table> sequence, as follows -

<TABLE width="95%">
<TR><TD>First Name:   *</TD><TD><INPUT TYPE="TEXT" NAME="required-fname"  SIZE="35"></TD></TR>
<TR><TD>Last Name:    *</TD><TD><INPUT TYPE="TEXT" NAME="required-lname"  SIZE="35"></TD></TR>
<TR><TD>Organization: *</TD><TD><INPUT TYPE="TEXT" NAME="required-comp"   SIZE="35"></TD></TR>
<TR><TD>Street:       *</TD><TD><INPUT TYPE="TEXT" NAME="required-street" SIZE="35"></TD></TR>
<TR><TD>City:         *</TD><TD><INPUT TYPE="TEXT" NAME="required-city"   SIZE="35"></TD></TR>
<TR><TD>State:        *</TD><TD><INPUT TYPE="TEXT" NAME="required-state"  SIZE="35"></TD></TR>
<TR><TD>Zip code:     *</TD><TD><INPUT TYPE="TEXT" NAME="required-pcode"  SIZE="35"></TD></TR>
<TR><TD>Country:       </TD><TD><INPUT TYPE="TEXT" NAME="country"         SIZE="35"></TD></TR>
<TR><TD>Telephone:    *</TD><TD><INPUT TYPE="TEXT" NAME="required-tel"    SIZE="35"></TD></TR>
<TR><TD>Facsimile:     </TD><TD><INPUT TYPE="TEXT" NAME="fax"             SIZE="35"></TD></TR>
<TR><TD>Email:         </TD><TD><INPUT TYPE="TEXT" NAME="email"           SIZE="35"></TD></TR>
</TABLE>

To explain each area in detail -

The <form> line specifies the e-merge program that called to process the form plus the location of a parallel email/merge specification file. It is recommended, but not necessary, that this email specification file be put in the same directory as your html files that use it.

For this example, the "action" field through "/cgi-bin/emerge/" specifies the e-merge program and must be specified as given. The rest of the field, beginning with "xyz/response.txt" specifies the directory structure and your file name for the supporting email specification file, in this case "response.txt" which is in the directory "xyz."

For another example, if your full url address is bcn.boulder.co.us/smith/, and your email specification file is jones.txt, the form line would be the following -

<FORM METHOD="POST" ACTION="/cgi-bin/emerge/smith/jones.txt">

In general, this directory specification for the email specification file, sometimes called the "virtual path," begins with whatever directory structure follows the bcn web address, in this case, "bcn.boulder.co.us."

The <input> line name="required-subject" and type="hidden" specification is fixed and must be specified as given above. The value="Reader Response Demo." is an arbitrary title you supply that specifies the title for the form that will be displayed to the reader and is also included in the subsequent email message. Change it to identify the email from your particular form.

The following lines specify the various fields to request information from the viewer, the internal field names to be assigned to each, and the specifications for the data entry boxes that will be displayed to the user.

An optional "required-" phrase can precede each field name. This forces the reader's browser to require non-blank data to be entered into every "required-" field before the form can be sumitted. In the above example, all the following fields must have text entered into them: fname, lname, comp, street, city, state, pcode, and tel, before the form can be sent.

The <TEXTAREA name="comments" ROWS="5" COLS="72"> line specifies a several line data entry box where the reader can enter unstructured data which will be assigned to the field name of "comments."

The following <input type> lines specify "Send" and "Erase" user action buttons. The actual text in the "Send" and "Erase" fields is your choice to identify the action to the viewer.

See most textbooks on HTML coding for the small print on using these tags.


The Email or Merge Specification File

A separate supporting file (in flat ascii or "txt" format) must be created to specify how to format the resulting email message and where to send it. The format of this file, named "response.txt" in the above <form> example, is as follows -

To: a_valid_email_address
From: [email]
Subject: [required-subject]
Errors-To: a_valid_email_address
URL of User:     [$HTTP_REFERER]
Remote Addr:     [$REMOTE_ADDR]
Remote Host:     [$REMOTE_HOST]
First Name:      [required-fname]
Last Name:       [required-lname]
Organization:    [required-comp]
Street:          [required-street]
City:            [required-city]
State/ Province: [required-state]
Postal/Zip code: [required-pcode]
Country:         [country]
Telephone:       [required-tel]
Facsimile:       [fax]
Email:           [email]
[comments]

This file, again - in flat ascii or "txt" format - resides in the same directory as the html file that uses it. Optionally, several html pages may all use this same email specification file, with a different "required-subject" heading for each.

To explain the above fields in detail -

First, the field names from the <form> sequence are specified in the email specification file by enclosing them in square brackets. These fields must be specified with exactly the same spelling as was used in the <form> sequence. For the above example, [required-lname] will be the last name collected by the "Last Name" line in the <form> statement.

The To: a_valid_email_address line specifies where the resulting email message will be sent. This line must be present and must specify a valid Internet address.

The From: [email] line is an optional line to document the email address of the reader sending the form. Note that this works only if the <form> requests an email address. Also note that there is no validity checking on the email address to ensure the user entered a real and valid Internet address.

The Subject: [required-subject] line echoes the value from the <input ... value="Reader Response Demo."> line to allow you to identify what <form> sequence, or what web page, generated the email. In the above example, "Reader Response Demo" will be sent.

The Errors-To: line must be present and must specify another valid email address. If the To: address fails for any reason, the message will be sent to this address. This address should be different from the To: address, and preferably, on a different isp in case of server difficulties. (And, of course, not to some address that is already overloaded with email traffic.)

The following lines specify system values that may be of use to a system administrator in tracing unusual messages and should be included.

HTTP_REFERER: URL of requesting page
REMOTE_ADDR: Internet IP address of remote host
REMOTE_HOST: Internet domain name of requesting host

The remaining lines define your identifiers and the contents of the fields from the form in the email message. Note that in this case, fname, lname, comp, street, city, state, pcode, and tel are all required fields and the user must have entered some non-blank data before the form was sent.


An Example of Reader Response Form Coding

For a real-world example of a Reader Response Form coding, the following form is used in the Y2K site to allow user feedback.

Note that if you go to that page via the above link, return here with the Browser Back Arrow.

<FORM>
<METHOD="POST" ACTION="/cgi-bin/emerge/y2k/y2kbform.txt">
<input name="required-subject" type="hidden" value="Y2K Information Request.">

<TABLE width="95%">
<TR><TH ALIGN=LEFT>What We Want -</TH> <TH>You fill in -</TH> </TR>
<TR><TD>First Name: </TD><TD> <INPUT TYPE="TEXT" NAME="fname"  SIZE=70></TD>
<TR><TD>Last Name:  </TD><TD> <INPUT TYPE="TEXT" NAME="lname"  SIZE=70></TD>
<TR><TD>Street:     </TD><TD> <INPUT TYPE="TEXT" NAME="street" SIZE=70></TD>
<TR><TD>City:       </TD><TD> <INPUT TYPE="TEXT" NAME="city"   SIZE=70></TD>
<TR><TD>State:      </TD><TD> <INPUT TYPE="TEXT" NAME="state"  SIZE=70></TD>
<TR><TD>Zip code:   </TD><TD> <INPUT TYPE="TEXT" NAME="pcode"  SIZE=70></TD>
<TR><TD>Telephone:  </TD><TD> <INPUT TYPE="TEXT" NAME="tel"    SIZE=70></TD>
<TR><TD>Facsimile:  </TD><TD> <INPUT TYPE="TEXT" NAME="fax"    SIZE=70></TD>
<TR><TD>Email:      </TD><TD> <INPUT TYPE="TEXT" NAME="email"  SIZE=70></TD>
</TABLE>

Any comments?<br>
<textarea name="comments" rows=5" cols="60"></textarea><br><br>
<INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="Send the form.">
<INPUT TYPE="RESET" NAME="RESET" VALUE="Erase the form.">
</FORM>


The e-merge program is from http://www.usfca.edu/usf/turner/e-merge/e-merge.html.


Last Update: Wednesday December 28, 2005 , by E. Stiltner
BCN Home Feedback About BCN Donate Search BCN Volunteer!