How to Subscribe
to Student
Newsgroups

Frequently Asked Questions: Web Design Techniques & Tricks

7. Can I make a web page form that delivers the input to my e-mail?

   Update (March 2004): Updated features in the FormWiz tool and new form options required updates to the directions below, in the form of several additional "hidden" form fields.

   Update (March 2002): Many users will find the Innovation Center's FormWiz application at http://www.gc.maricopa.edu/formwiz to be a practical supplement to these directions. FormWiz automates the form creation process even for those who use Netscape Composer and never touch the source code!

   After Library Media Services requested this functionality for their web site in December of 2000, Bobby Sample posted this information to the newsgroup:

   Web authors using the GCWeb, Glory, or Gecko servers can publish on-line forms and collect the information provided by users in their e-mail inbox. A shared script, explained below, can process such forms.

   For this to work, the author is presumed to know how to create form elements using HTML tags. (See Netscape's HTML Tag Reference.) Using this script is a matter of supplying directions to the server program through the use of various "hidden" input values included in the HTML of the page containing the form. For example, these directions include telling the server where to send the e-mail containing the form information. Below is a simple mockup of such a form as it would appear in one's HTML source, followed by further explanation of its elements. (If you want to test the form, copy this text, but change the tags according to the following directions.)

   ---

   <!--required fields-->
   <form action="http://www.gc.maricopa.edu/index/mailform.cfm" method="post">
   <!--values for these five fields are specified by the web author...-->
   <input type="hidden" name="subject" value="Subject line I want on my e-mail results">
   <input type="hidden" name="targetmail" value="my.name@gcmail.maricopa.edu">
   <input type="hidden" name="confirm" value="http://www.gc.maricopa.edu/myfolder/thankyou.htm">
   <input type="hidden" name="fields" value="First_Name,Last_Name,Likes_Coffee,Likes_Tea,Other">
   <input type="hidden" name="thisurl" value="http://www.gc.maricopa.edu/webdev/digest/faq7.htm">

   <!--optional fields not seen on-screen-->
   <!--"requiredfields" specifies fields the user is required to complete-->
   <input type="hidden" name="requiredfields" value="First_Name,Last_Name">
   <!--"requiredoptions1" lists fields from which the user must complete or select at least one (usually for checkbox lists; for additional lists, just add tags named "requiredoptions2," "requiredoptions3", and so on)-->
   <input type="hidden" name="requiredoptions1" value="Likes_Coffee,Likes_Tea,Comments">
   <!--"confirmcontent" provides user with a review of form answers to check prior to final submission-->
   <input type="hidden" name="confirmcontent" value="yes">
   <!--"mailform_archive" sends copies of submissions to a database on the server as a handy backup and means of viewing combined results in tables (if used, "confirmcontent" field must be included as well)-->
   <input type="hidden" name="mailform_archive" value="yes">

   <!--various fields chosen by author for the user to see on-screen-->
   <br>
   First Name:
   <br>
   <input type="text" name="First_Name">
   <p>
   Last Name:
   <br>
   <input type="text" name="Last_Name">
   <p>
   <input type="checkbox" name="Likes_Coffee" value="yes">I like coffee
   <input type="checkbox" name="Likes_Tea" value="yes">I like tea
   <p>
   Other:
   <br>
   <textarea name="Other" cols=80 rows=10 wrap=virtual>
   </textarea>
   <p>
   E-mail:
   <br>

   <!--required fields-->
   <!--"frommail" field may be a hidden input with static value, or else an e-mail address provided by the user for reply purposes as in this example (but the address must be valid for it to work!)-->
   <input type="text" value="" name="frommail">
   <p>
   <!--submit button is required, but the value can be whatever the author wants to appear on-screen-->
   <input type="submit" value="Send it!">
   </form>

   ---

   The initial several lines of code above are required fields. The opening "form" tag must be copied as-is. Here are explanations of the other initial fields:

   • subject: The value must equal whatever the author chooses as the subject line of e-mail that contains form data submitted by the user. A specific subject line may be used to filter incoming e-mail so that all form submissions go into a common folder stored by the author. (This would entail using, for example, the Message Filters options in the Netscape Messenger program.)
   • targetmail: The value must equal the e-mail address of the person to whom the form results must be sent; in some cases, this would be the web author's own address. (To test the form, the author should use his/her own address at least temporarily.) For more than one address, separate addresses with a comma.
   • confirm: The value must equal the URL of a "confirmation" page that the author must create and publish separately to assure the user that the form has been processed. Such a page might say something like, "Thank you for using our form," and include a link back to the author's main web site.
   • fields: The value must equal the names of the fields invented by the author, exactly as they are spelled in the various tags used to create the form, separated by commas. These fields will appear in a list on the e-mail containing the form results. Note that spaces and punctuation cannot be used in the field names, and a field name can't begin with a numeral. However, each underscore ("_") will be converted to a space in the e-mail results for the sake of readability.

   What the user would see if the above form were published are a few open text fields labeled "First Name," "Last Name," "Comments," and "E-mail," and a button labeled "Send it!" The first three of these fields represent some of the possible fields the author might choose to include in the form for the user to fill out -- which may also include form elements such as select menus, radio buttons, check boxes, and so on. The names of these elective fields are the ones that must be listed as the value of the fields field; but these names would be chosen by the author and may be different for every author.

   If the name of one of the visible inputs is missing from the value of fields, the feedback of that input will not be included in the e-mail results. You'll also encounter errors if the names don't match exactly.

   The frommail field is also required. In the above example, this field is for the user to supply his/her own e-mail address, which would be useful for reply purposes after the form results are sent to the web author's e-mail inbox. However, the field may also be supplied as a "hidden" input if the author prefers, with either a null value or a static e-mail address (such as the author's own address). Here is an example:

   <input type="hidden" name="frommail" value="">

   The submit field is required in order to send the form information, but its value can equal whatever the author chooses. The value appears on-screen as the text on the submit button.

   Note that the form can't be tested via local files. If you want to test the form, publish your version on the Web and test it via the public URL (use a temporary file name or delay linking the form until you want the real public to actually find it). This form works for GCWeb, Glory, Gecko, and Network Services pages.

Return to:
Contents of Frequently Asked Questions about Web Development