Tips & Tricks
Advanced Topics
Creating An Online Form

An Online Form

A web form can be used for a variety of things. Sending an email, signing a guest book, joining a webring or other membership, or placing an order for a product or service. Whatever you can think of, a form can usually do.

A form uses both HTML and a program. The program captures the data entered in the fields of the form, format the data and send it through email or directly to a database.


 Finding The
Right Program

If you are listing your site with a Web Hosting service, look around their offerings for programs. Many Host providers have pre-canned programs that you can call from your site to theirs, or that you can copy into your site. You're going to have to do some research however.

If your Host is AOL, and you're looking for an Email Form program, well you're in luck. Because that's what we're going to use as our example.

If your Host does not provide canned programs, you can find a variety of free form programs on the internet. I've found my most successful searches through Yahoo's Internet/program categories.


  An Email Form
The basic functionality of an online form is created with HTML. There are some additional tags needed to create the link between the form and the program. The following is an example of an old AOL Email Form.

~ AOL's Email Web Form ~

<html> 
<body>   
The Form Action links a web page to the program it's using.
<FORM ACTION="/cgi-bin/email/screenname/contact.eml" METHOD="POST">
<table border=0>
<tr><td align=center valign=top>  
The lines in red, are HTML comment tags. These allow you 
to add labels or reminders in your web page for easier  
maintenance, without them being visible through a browser.
<!-- --------Start Email Form------- -->
<!-- ---- Name, Email & WebSite ---- -->
 
These next few lines define the input fields for the Name, 
Email and Web Address of your visitor. The Name=website field 
also includes a predefine value of 'http://'. This allows a 
visitor to enter their web site url without typing in this part 
of the address. It's also a useful reminder to the novice web 
owner for what goes in this field.
<P>Your Name: <FONT COLOR="#343469" SIZE=-1> {required} </FONT>
<INPUT TYPE="text" NAME="name" SIZE="27"></P>
<P>Your Email: <FONT COLOR="#343469" SIZE=-1> {required} </FONT>
<INPUT TYPE="text" NAME="email" SIZE="27"></P>
<P>Your Web Site Address {if you have one}:
<INPUT TYPE="text" NAME="website" SIZE="36" VALUE="http://"></P> 

<!-- ---- Radio Buttons ---- -->  
The radio buttons are just one type of form field. You can 
alter the format to a checkbox or dropbox by modifying the 
TYPE parameter in the INPUT tag. The first radio button is 
already preset to checked. The Name of each button is set to 
Contact-For. This requires the visitor to select only one option.
<P>Please choose one of the following: <BR>
<INPUT TYPE="radio" CHECKED="true"
NAME="Contact-For" VALUE="Feedback">Site Feedback<BR>
<INPUT TYPE="radio" NAME="Contact-For"
VALUE="Site Design">Site Design<BR>
<INPUT TYPE="radio" NAME="Contact-For"
VALUE="Graphics Design">Graphics Design<BR>
<INPUT TYPE="radio" NAME="Contact-For"
VALUE="Web Creation">Web Page Creation<BR>
<INPUT TYPE="radio" NAME="Contact-For"
VALUE="Site Impl">Site Design, Creation &amp; Implementation<BR>
<INPUT TYPE="radio" NAME="Contact-For"
VALUE="Setup">Internet or Intranet Infrastructure Setup<BR>

<!-- ---- Comments ---- -->  
Most contact forms include an additional section for comments. 
This allows your visitor to tell you how much they loved your  
site. Or to provide a question or ask for a service you may 
not have listed.
<P>Please enter your comments here:
<FONT COLOR="#343469" SIZE=-1>{required}</FONT>
<TEXTAREA NAME="comments" ROWS="7" COLS="81"></TEXTAREA><BR>

<!-- ---- Submission/Cancel Buttons ---- -->  
These lines define the buttons at the bottom of your web page. 
The submit button, when seen through the browser, will be  
displayed as 'Submit Feedback'. The reset button will appear as 
'Clear form'.
<INPUT TYPE="submit" VALUE="Submit Feedback">
<INPUT TYPE="reset" VALUE="Clear Form">  
This section may not be included in all programs. You should 
check the functionality of your email program first. In this  
case,AOL's email program allows you to include a pre-defined 
statement that will appear as the subject of the email when it 
arrives in your email box.
<INPUT TYPE="hidden" NAME="subject"
VALUE="SpringWolf Designs Contact">  
This input statements allows us to define which fields on our 
form are required to be filled out.
<INPUT TYPE="hidden" NAME="required"
VALUE="name,email,comments">  
And lastly, AOL's program allows us to display a thank you 
page when this form is submitted successfully.
<INPUT TYPE="hidden" NAME="ResponsePage"
VALUE="http://members.aol.com/springsweb/thanks.htm"></CENTER>
</td></tr>
</table>
</body> 
</html>


 Next: Using Sound