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. Here we're going to keep things simple and focus on sending information through email.

 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 does not provide canned programs, you can find a variety of free form programs on the internet. So try a Google search for free email script. One of the most popular free email programs is FormMail. You can find the script and information about how to install it and configure your mail form at Matt's Script Archive.

  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 a simplistic email form.
~ Email Web Form ~
 
First let me break down the components of a standard webform and explain what they are and what they do. You can view a complete version of this code to copy and paste into your own html editor that you can manipulate to fit your own needs.
<html> 
<body>   
Start with the standard tags for your webpage
<FORM ACTION="/cgi-bin/formmail.pl" METHOD="POST"> The Form Action links a web page to the email program you're using using. In this case, the script is called formmail.pl and it's sitting in the cgi-bin directory. This may be different than what your host provides, so you'll need to do a little research if you don't already know.
<!-- --------Start Email Form------- -->
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.
 
The form is broken down into 2 parts. The label of the field and the input for the field. The first part is for data being 'INPUT' into your email script which will be emailed to you. These fields will have various parameters to define how the input is manipulated. The second part is the LABEL of the fields for your fields.
 
The first part of your form is for the configuration to format the email sent to you. This typically has 4 inputs, your email address that will receive the information from the form, the Subject of the email, if you want certain fields to be required and if you are going to display a thank you or response page once the visitor submits the form.
<INPUT
TYPE="hidden"
NAME="recipient"
VALUE="you@yourdomain.com">
This configuration begins with INPUT setting up this data as input to your webform. The TYPE of input data this is, in this case we want this data to be "hidden" from view and not displayed on the screen to the visitor. The NAME of the field, in this case "recipient" who is receiving the information from this form. And the VALUE details the email address. An example would be "burt@mylittlewebsite.com"
<INPUT
TYPE="hidden"
NAME="subject"
VALUE="SpringWolfFeedback">  
Next we set up the subject of the email. Again we start with INPUT, the TYPE again is hidden. The NAME of the field is "subject" telling your script that this is the information that should be used in the "subject" area of the email sent to you. And the VALUE is the title of email, in this case "SpringWolf Feedback". Some email scripts can't handle spaces in the VALUE field. So you may need to test this both ways to see which way works in your form.
<INPUT
TYPE="hidden"
NAME="required"
VALUE="name,email,comments">  
Not all scripts allow you to define certain fields in your form as required. In other words you may want to require someone to provide their name, or comments. Just like before you start by saying this is an INPUT field. Again the TYPE is hidden. The NAME of this field is "required". This is a reserved word to most email scripts. When the script sees this, it knows that the fields listed in the VALUE section require data to be filled out by the visitor. The VALUE field holds the NAME of the fields you're creating in your form. These NAMES must be exactly the same as the NAME fields you define on your form. In this case, NAME, EMAIL and COMMENTS are required.
<INPUT
TYPE="hidden"
NAME="ResponsePage"
VALUE="http://springwolf.com/thanks.htm">
Most email forms allow you to display a page once the submit button has been selected by the visitor. This can be a thank you page, or a page you provide to define additional information or instructions. It starts with INPUT, again the TYPE is hidden, the name of the field is "ResponsePage" which is a reserved word to the email script. And finally the VALUE, this is the full address of the page being displayed to your visitor after they select submit.
<!-- ---- Name, Email ---- -->  
<P>
Your Name:
<INPUT
TYPE="text"
NAME="name"
SIZE="25">
</P>
Now we can begin the meat of your form.
Most forms start with personal information, name and email address of your visitor. Here we'll start with the LABEL of the field. In this case the label is "Your Name:". This is standard text on your webpage.
 
Next we define the field that will appear on the screen. The field is identified as an INPUT, the type of input is "TEXT", the NAME of the field is "name", and the size or the width the field will appear to be on your screen is "27" pixels.Your visitor will see this on the form:
Your Name:
<P>
Your Email:
<INPUT
TYPE="text"
NAME="email"
SIZE="25">
</P>
For a contact form, most people want to ask for the senders email address so they can respond to them. The structure is the same as the previous field. Type your standard text for the field label. In this case "Your Email:".
 
The field is identified as an INPUT, the type of input is "TEXT", this time the NAME of the field is "email" and again the size is "27". Many form scripts identify "email" as a reserved word for how the script processes this particular field. So you don't want to use this for anything other than requesting the email address from your sender.Your visitor will see this on the form:
Your Email:
<P>
Your WebSite:
<INPUT
TYPE="text"
NAME="website"
SIZE="30"
VALUE="http://">
</P> 
Now you might want to know if your visitor has a website so you can check them out. Again the structure is the same, but we'll add a twist with this field. You're label is "Your WebSite:".
 
It's an INPUT field, the type is still TEXT and the NAME of the field is "website". The size is a little larger, this time we'll make it "36" pixels. Now the twist, we're going to add a VALUE and prefill the field for the visitor with "http://". Your visitor will see this on the form:
Your WebSite:
<P>
Please choose one of the following:
<BR>
<INPUT
TYPE="radio"
CHECKED="1"
NAME="Contact-For"
VALUE="Feedback">
Site Feedback
<BR>
<INPUT
TYPE="radio"
NAME="Contact-For"
VALUE="Site Design">
Site Design
</P>
On your form you may want to have your visitor choose certain options for the type of contact they are making. In this case we're going to use radio buttons. The structure is basically the same as what you've done previous. The field is an INPUT, the TYPE this time is "radio" to identify this as a radio button. CHECKED tells your browser to preset this option to checked. The NAME of the field is "Contact-For", or what your visitor is contacting you for. And the Value you want sent to you in the email is "Feedback". This time, we're going to put the label at the end of the input field. In this case "Site Feedback".
 
Now having 1 radio button doesn't make much sense. So let's create a second one. The structure is exactly the same, but we're going to leave out the "CHECKED" parameter. This will make the radio button open or not checked. If you want to connect radio buttons, all you need to do is use the same NAME, in this case we're connecting these 2 buttons by using the same input name "Contact-For". But in this case the value we want sent in the email is "Site Design". Your visitor will see this on the form:
Site Feedback
Site Design
<!-- ---- Comments ---- -->
<P>
Please enter your comments here:
<TEXTAREA
NAME="comments"
ROWS="7"
COLS="80">
</TEXTAREA>
<BR>
Contact forms include a section for visitors to send you information or comments. The structure is a little different than previous fields however. Here we have a start tag to begin the comment section TEXTAREA, and a close tag to end the html code /TEXTAREA. The parameters within these are similar.
 
The NAME is the name of the field, in this case "comments". Instead of a size to define the width, a text area needs to know how high (rows) and how wide (columns) to make the field. In this case we're making the field "7" pixels high and "80" pixels wide.
<!-- ---- Submit/Cancel Form ---- -->
<INPUT
TYPE="submit"
VALUE="Submit Feedback">
<INPUT
TYPE="reset"
VALUE="Clear Form">  
Next we'll define the buttons at the bottom of your webform. Once more you're creating an INPUT to your email script. This time the TYPE is "submit" and the VALUE you want to see in your button is "Submit Feedback".
 
You should also include a clear button in case your visitor changes their mind about what they entered into the fields of your form. This is also an INPUT, the TYPE is "reset" to rest the form and the VALUE you want to see in the button is "Clear Form". Your visitor will see this on the form:
     
</form>
</body> 
</html>
Lastly you need to close out the form and close the HTML page.
All email scripts are just a little bit different. So make sure you find one that provides a good set of instructions or user guide for how to configure your form. What has been provided above is the general components in most forms.
 Next: Using Sound