Crafting an Effective Email Form

The Need for User Information and the Pitfalls of Embedded Email Addresses

It's often necessary to gather information from your website visitors. A common method is to embed your email address, using a "mailto" tag, directly on your web pages. However, this approach is not advisable due to several reasons:

• Embedded email addresses are susceptible to spam spiders, which are programs that scan web pages for email addresses to send spam emails.
• It doesn't allow you to format your questions or validate the responses.
• It offers no control over the user's data entry experience.

So, if embedding email addresses isn't the best approach, how can you collect data from your visitors? The answer is simple: create an email form.

Setting Up an Email Form: The Basics

Before you start, you'll need a forms processor. You can use a service like Bravenet or install one on your server (if your host provider allows it). There are numerous sites that can host forms for you, and if none of them meet your needs, you can set up CGI routines on your server (assuming your host supports them).

Once you've registered with your forms provider, you can start creating your form. You'll need some information before you start:

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

This information should be available in the documentation, FAQ, or help files for the forms system.

Crafting the Form: HTML Code and Form Tags

You'll need to include the appropriate HTML code on your page to create the form. A basic form consists of two tags:

• <form> - begins the form
• <input> - gets some data or defines a value

The <form> tag starts the form and defines the location and name of the forms processor to use. This processor takes any data entered by your visitor, formats it into an email, and sends 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 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 instructs that when the visitor presses the submit button, all of the data entered should be sent to the senddata.php file. This file contains special code that sends the data to you.

Hidden Values and Form Fields

Next, you'll need to include some special "hidden" values to instruct the forms processor. Hidden values don't 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 its own unique number. Other forms processing systems may use similar identifiers, or they may do something completely different.

Once you've 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?
<input type="text" name="name" size="20">

Where are you from?
<input type="text" name="where" size="20">

E-mail address?
<input type="text" name="replyemail" size="20">

These three lines ask your visitors for their name, location, and email address. 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.

Submitting and Resetting the Form

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?)

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

</form>

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