Using Forms in Your Web Page

Please Note: This tutorial assumes you are thoroughly familiar with creating online fill-in forms, including HTML form design elements.

Albury Local Internet can accept no liability for the use of the information below. You use these examples entirely at your own risk, and no warranty is provided or implied.

Steps for successful form design

  1. Write the HTML code for your form, including all elements - submit and reset buttons, any required password fields etc. If you are using a graphical tool such as FrontPage, be aware that the default routines for creating forms may not be sufficient. You may need to edit the HTML by hand.

  2. Each individual element in your form must have a unique name. Choose names that correspond to the data the element contains.

  3. Responses are forwarded to an email address of your choice. Make sure you know your email address, as you will need it when designing your form.

  4. You do not need to write the CGI program to process your form. This has been done for you. Note that in the interests of greatly increased security, Albury Local Internet's web servers do NOT support the Microsoft FrontPage server extensions. If your HTML code has references to functions that require these extensions, it will need to be modified.

  5. Examine our example below in depth. Items you need to change to suit your own configuration are hyperlinked with detailed explanations.

The Example

Below is a fairly detailed example form with a number of design elements, along with the HTML code used to create it. By copying this code and modifying the appropriate areas, you should be able to get your form up and running fairly quickly. First, here is the form:

Your Name:
Company Name:
Address:
email Address:

The operating system you use:

What is your favourite colour?
Red Green Blue

What flavour ice cream do you like (you can select more than one):
Chcocolate
Strawberry
Caramel
Vanilla
Please enter any comments you may have:
And here's the code that generates the form:

Parts of this code you will need to customise are hyperlinked to full explanations. 


<!--================== Base form setup ====================-->
<form action="http://www.albury.net.au/cgi-bin/forms/form_processor.cgi"
 method="post">
<input type="hidden" name="mailto"             value="username@albury.net.au">
<input type="hidden" name="html_response"      value="Previous">
<input type="hidden" name="email_subject"      value="WWW Form Enquiry">
<input type="hidden" name="variable_order"
 value="name|company|address|email|ostype|colour|choc|straw|cara|van|comm">
<input type="hidden" name="url_of_this_form"
 value="http://www.albury.net.au/~username/">
<input type="hidden" name="required_variables" value="name|ostype">
<input type="hidden" name="background"         value="your_image">
<input type="hidden" name="bgcolor"            value="FFFFFF">
<input type="hidden" name="text_color"         value="000000">
<input type="hidden" name="link_color"         value="FF0000">
<input type="hidden" name="vlink_color"        value="0000FF">
<input type="hidden" name="alink_color"        value="00FF00">
<input type="hidden" name="response_title"     value="Thank You!">
<input type="hidden" name="return_link_name"
 value="Return back previous page...">
<input type="hidden" name="return_link_url"
 value="http://www.albury.net.au/~username">
<input type="hidden" name="database_delimiter" value=",">

<!--===================== End of form setup =======================-->

Your Name:     <input type="text" name="name"     size="40"> <br>
Company Name:  <input type="text" name="company"  size="40"> <br>
Address:       <input type="text" name="address2" size="40"> <br>
email Address: <input type="text" name="email"    size="40"> <br>

The operating system you use:
<select name="ostype">
   <option>DOS</option>
   <option selected>Windows 95</option>
   <option>Windows NT</option>
   <option>BSDI</option>
   <option>Linux</option>
</select>


What is your favourite colour?
<br>
<input type="radio" name="colour" value="red" checked>Red
<input type="radio" name="colour" value="green">Green
<input type="radio" name="colour" value="blue">Blue

What flavour ice cream do you like (you can select more than one):
<br>
<table><td width="110" align="left">
<input type="checkbox" name="choc" checked>Chcocolate<br>
<input type="checkbox" name="straw">Strawberry<br>
<input type="checkbox" name="cara">Caramel<br>
<input type="checkbox" name="van">Vanilla<br>
</td></table>

Please enter any comments you may have:<br>
<textarea name="comm" rows="10" cols="35"></textarea>

<input type="submit" VALUE="Submit Details">
<input type="reset" VALUE="Reset Form">
</form>

The Explanation


The form is controlled by the set of hidden fields contained in it. The data in these hidden fields must be altered to suit your particular site.
  • The mailto directive
    When visitors to your site fill in your form, the data will be sent to an email address. Enter the email address you would like responses to be sent to.

  • The html_response directive
    After visitors to your site have pressed the 'Submit' button, they will be presented with a short 'Thank You' message, and invited to return to your site. In this section, enter the name of your site (not it's URL).

  • The email_subject directive
    Responses sent to the email address in the mailto field [above] will have the subject you specify here.

  • The variable_order directive
    Data submitted by visitors to your site is of the form 'variable=data', eg 'address=123 Smith Street'. This directive specifies the order in which the data is returned to you, within the email message.

  • The required_variables directive
    If you wish to specify that certain parts of your form, eg the Name and Email Address, must be included in the response, put the variable names here. Any responses sent via your form that don't include the required information will generate an error message back to the user filling in the form. In this case the name and operating system type are required.

  • The url_of_this_form directive
    This tells our form processor the address of the page that has your form. Enter the URL of the form page.

  • The background directive
    If you wish to have a background image displayed on the 'Thank You' page, enter the URL of the image here.

  • The bgcolor directive
    If you wish to set the background colour of the 'Thank You' page, enter the RGB code (in Hex) of the colour here.

  • The text_color directive
    If you wish to set the colour of text on the 'Thank You' page, enter the RGB code (in Hex) of the colour here.

  • The link_color directive
    If you wish to set the colour of links on the 'Thank You' page, enter the RGB code (in Hex) of the colour here.

  • The vlink_color directive
    If you wish to set the colour of visited links on the 'Thank You' page, enter the RGB code (in Hex) of the colour here.

  • The alink_color directive
    If you wish to set the colour of selected links on the 'Thank You' page, enter the RGB code (in Hex) of the colour here.

  • The response_title directive
    This directive sets both the title and the heading of the 'Thank You' page.

  • The return_link_name directive
    The text in this directive is what will appear on the 'Thank You' page as the link back to your main site.
    ,br />
  • The return_link_url directive
    This directive has the URL of the return_link_name field above.

Final Note


Finally, don't forget to thoroughly and exhaustively test all aspects of your Web form. Follow all links, make sure that when data is submitted the right things happen. Make sure errors are generated in the right places. Check it all, then double check it. There's nothing more frustrating for your users than a Web page that won't do what it's told!