Aloak Inc.
Check Your Domain
New Registration
Transfer Registration
Renew Registration
Look Up Info On My Domain
Change Contact Info For My Domain
Change DNS Info For My Domain
Business Directory
Employee List
Customer List
Leads Database
Product List


Using Webforms
Web forms are an incredibly useful tool. While your web pages are all about you talking to the people viewing your page, forms are all about the viewer talking to you! Information is gathered in a pre-defined format and emailed straight to your mailbox.

This instruction set describes the basics of creating a form used to gather information which will be emailed to you. For more detailed information, please visit Matt's Script Archive.

In order to create a web page containing a form, html tags relating to forms must be added to the body of your web page. These tags tell your browser that it is dealing with a form and what kinds of input the form may accept.

Information in forms is gathered as a series of input variables. These inputs define the way the information is gathered and sent. Every form consists of a number of inputs sandwiched between a form start and end tag.

The start and end tags look like this:
<form method="post" action="/cgi-bin/formmail.pl">

Notice that the form's ACTION attribute refers to '/cgi-bin/formmail.pl'. This is the program the web server uses to process the data that is entered into your form.

Input variables are defined using the input tag. A number of different input tags and input tag types are described below. Notice that each description is followed by the HTML tags needed to include in your web page and an example of the result.

Description of Input Tag Types

Text The Text input type is one of the most commonly used. It generates a single line text box of the size specified where the user may enter any text.
<INPUT TYPE="TEXT" NAME="Variable_Name" VALUE="initial value" SIZE=15>
Text input type:
Hidden Hidden input variables do not display anything to the person viewing the web page. They are used frequently to pass information to the program processing the form. See Special Input Variables below for some examples of Hidden input tags.
<INPUT TYPE="HIDDEN" NAME="Variable_Name" VALUE="Information Content">

Selection Box The Selection Box input type creates a drop box of pre-selected items for the person viewing the page to choose from. Any number of options may be pre-programmed into the selection. Notice that the first option listed appears in the box by default.
<SELECT NAME="Variable_Name">
<OPTION>Option 1
<OPTION>Option 2
Selection Box Input type:
Radio Button The Radio Button is similar to the Selection Box in that it allows the person viewing the page to select one option from a number of pre-defined choices. Once again any number of selections may be programmed. This Radio Button example asks a viewer to select one favourite colour.
Red:<INPUT TYPE="RADIO" NAME="Favourite_Colour">
Green:<INPUT TYPE="RADIO" NAME="Favourite_Colour">
Blue:<INPUT TYPE="RADIO" NAME="Favourite_Colour">
Red:  Green:  Blue: 
Checkbox A Checkbox presents a yes/no box, where the person viewing the web page will indicate agreement or disagreement with the choice presented. Checkboxes may be used to give viewers the opportunity to select any number of choices from a list.
<INPUT TYPE="CHECKBOX" NAME="Like_Checkboxes">
I like: checkboxes   forms
Textarea The Textarea input type creates a multiline input box allowing the person viewing the web page to enter a body of text. Text entered between the two tags appears in the input box. The size of the input box is defined by the rows and cols directives.
<TEXTAREA NAME="Paragraph_Text" ROWS=2 COLS=20>
Text entered here appears in the text box
Submit/Reset Buttons The Submit/Reset Buttons, when pressed, either cause the form data entered by the web page viewer to be submitted to the program defined by the form action or cause the data entries to be cleared. The text entered in the value appears on the button face, if no value is defined it will default to 'Submit Query' (for the submit button) or 'Reset' (for the reset button).

A number of input variable names have special meaning. The most commonly used special variables are explained below. Other variables are defined by you, the creator of the web form, and can be used to convey any information you require.

Note: predefined refers to variables where the VALUE is defined in the text of the input tag.

Description of Special Input Variable Names

recipient The recipient variable is required. Its value is the email address that the form results will be sent to. Without it, the form information can not be delivered. The recipient variable may be either an input that the viewer enters or a predefined, hidden variable.

subject The value of this variable is used as the subject for the email which is sent to the recipient.

redirect The redirect variable is usually predefined and hidden. The value is the web address that the web viewer will be sent to upon completing the form.

required The required variable is usually predefined and hidden. The value is a comma separated list of variable names which must be filled out in order for the form to be submitted.

email This is the email address of the web page viewer who submits the form. It is used by the program as the reply address when it sends the results in email. The value of this variable is entered by the viewer of your web page.

realname As the name implies this is the proper name of the web page viewer. It is included in the from header of the email sent by the form.

The following sample form displays the content which created it inside the boxes. Try it!

Sample Form

The form begins with a number of hidden tags.
The form start:
<FORM METHOD="post" ACTION="/cgi-bin/formmail.pl">
The redirect which in this case returns you to this page:
<INPUT TYPE=hidden NAME="redirect" VALUE="http://www.aloak.com/service/support/webform.phtml">
The list of required inputs. See what happens if you don't enter a value for these:
<INPUT TYPE=hidden NAME="required" VALUE="recipient,realname,email,street_name">
The email subject line:
<INPUT TYPE=hidden NAME="subject" VALUE="Test form sent from Aloak">

Enter your email address (recipient):

The recipient is normally a hidden field but for the purpose of this test form, the form results will be sent to the email address you specify:
< INPUT TYPE=text NAME="recipient" SIZE=20>

Enter your name (realname):

The realname variable:
<INPUT TYPE=text NAME="realname" SIZE=25>

Enter your email address (email):

This field email specifies the address of the person submitting the form: <INPUT TYPE=text NAME="email" SIZE=25>

Enter the Street Name you live on (street_name):

An example of a text input variable which is not pre-defined:
<INPUT TYPE=text NAME="street_name" SIZE=25>

Select your favourite island (island_selection):

An example of a selection drop box:
<SELECT NAME="island_selection">

Select your favourite colour (favourite_colour):
Red:    Blue:    Green:

An example of radio button selections, notice the CHECKED flag in the default:
<INPUT TYPE="radio" NAME="favourite_colour" VALUE="Red">
<INPUT TYPE="radio" NAME="favourite_colour" VALUE="Blue">
<INPUT TYPE="radio" NAME="favourite_colour" VALUE="Green" CHECKED>

Select all of the colours you like (like_red, like_blue):
Red:    Blue:

An example of checkboxes:
<INPUT TYPE="checkbox" NAME="like_red">
<INPUT TYPE="checkbox" NAME="like_blue">

Give us your comments (comments):

An example of a text area:
<TEXTAREA NAME="comments" ROWS=3 COLS=23>

(submit & reset)

The buttons to either submit or clear the form data:
<INPUT TYPE=submit VALUE="Submit">
<INPUT TYPE=reset VALUE="Clear Form">

Finally, the 'end form' statement which is hidden from view:
Aloak Esolutions