Go to Lesson #14: Creating A Simple FormGo to lesson #15: ListsMore On Forms

Occasionally it is necessary to get some kind of information from your visitors. One way to do this is to embed your email address, as a "mailto" tag, directly on all of your web pages. This is not recommended for the following reasons.

  • Embedded email addresses are vulnerable to spam spiders. These are special programs which scan web pages looking for email addresses. These addresses are then sent spam emails.
  • You cannot format your questions.
  • You cannot validate the answers to the questions
  • You have no control over the visitor's experience of the data entry.

All right, if you do not embed email addresses into your web pages, how do you get data from your visitors? It's simple - just create an email form.

Before you can begin you must obtain a forms processor. This can be done using a service such as Bravenet or you can install one on your own server (if this is allowed by your host provider). In these examples I will be assuming you are using the Bravenet forms processor. 

There are hundreds of different sites that will remotely host forms for you, and if none of those will serve your needs you can set up CGI routines on your own server (assuming your hosts supports them).

Once you have registered with your forms provider (in these examples I am assuming you use Bravenet) you can begin creating your form. You will need some information before you start:

  • The name of the forms processing routine
  • The names of any parameters which are needed by this routine

These items should be described in the documentation, FAQ or help files for the forms system.

Now you need to include the appropriate HTML code on your page to create the form. A simple form consists of two tags (there are other tags, but we will not go into them in this article)

  • <form> - begin the form
  • <input> - get some data or define a value

The <form> tag begins the form and defines the location and name of the forms processor to use. The purpose of this forms processor is to take any data that was entered by your visitor and format it into an email, then send that email back to you. Some of the better forms systems allow you to confirm the data with your visitor before it's sent and to even send a copy of what was entered via email back to your visitor as a confirmation.

An example <form> tag from Bravenet is shown below.

<form action="http://pub14.bravenet.com/emailfwd/senddata.php" 
method="post">

This tag says simply, "when the visitor presses the submit button, send all of the data that was entered to the senddata.php file". The senddata.php file contains special code which performs the necessary magic to send the data to you.

Now you need to include some special "hidden" values to tell the forms processor what to do. Hidden values do not cause any entry to be done - they merely set up data to be used by the forms processing routine.

<input type="hidden" name="usernum" value="99999999">
<input type="hidden" name="cpv" value="1">

These two lines inform the Bravenet processor of the user number of the form. This is created when you create a new form. Each form has it's own unique number. Other forms processing systems may use similar identifiers, or they may do something completely different.

It's important to understand this concept - these values are completely defined by the forms processing routine. Different names and values will be used by different forms systems.

Once you have set up the required and optional hidden values for your forms processor, you need to define the form fields and input values. The three lines below show how to do this.

What is your name?<br><input type="text" name="name" size="20"><br>
Where are you from?<br><input type="text" name="where" size="20"><br>
E-mail address?<br><input type="text" name="replyemail" size="20">

These three lines ask your visitors for their name, location and email address. As you can see, the prompts and formatting are included directly in your form. The <input> tags are used to define the fields that actually get the data. The word "size" is used to indicate how many characters to retrieve.

Now it's time to give your visitors a way to submit the form.

<input type="submit" name="submit" value=" Send ">
<input type="reset" name="reset" value=" Clear ">

These two lines define the "submit" and "reset" buttons. The reset button is optional, but the submit button is required (otherwise how would the data actually get sent to the form?)

Now you need to end the form. This is done as shown below.

</form>

That's all there is to using a simple form to get data from your visitors.