Web page forms

A simple example

Forms are created within the form tags (<form>form fields here</form>). Here is a simple form ...

And here is the html code for it (you can also View Source in your browser to see it) ...

<form method="post" action="mailto:someone@mysite.com" enctype="text/plain">
<p>Name <input name="Name" type="text" id="Name" /></p>
<p>Email <input type="text" name="textfield" /></p>
<p>Action
<select name="select">
<option value="Add me to your mailing list">Add me to your mailing list</option>
<option value="Remove me from your mailing list">Remove me from your mailing list</option>
</select>
</p>
<input type="submit" name="Submit" value="Submit">
</form>

Building a form

The easiest way to create a form is to insert your cursor where you want the form to appear and then use Dreamweaver's Insert>Form menu or insert palette buttons to insert the form and then the text fields, buttons and other elements.

Processing form data

Once you have built your form you will need to specify how the data from it will be handled. The data needs to be sent somewhere and it needs a method of getting there. Form data can be processed in several ways ...

1. Sending form data to an email address

This is the simplest method of handling form data and most often used by non-programmers. The example in the first column uses this method. In the open form tag <form> enter ...

<form method="post" action="mailto:someone@mysite.com" enctype="text/plain">

When the submit button is clicked, the end-users email application will open with a new addressed email and the form contents pasted into it, or the data may be sent without any visible feedback.

WARNING: Simple forms like this have disadvantages ...

1. The end user needs an email client connection setup on their computer
2. The "Thank you" message is dummy and does not mean the form data has actually been emailed
3. Not all browsers support mailto: but most do
4. The data may arrive in difficult to read format
5. The data isn't secure
6. The user may not know the data has been successfully sent (see below for a work-around)

The best solution is to create a form which sends its data to a PHP script (explained later on this page).

Giving user feedback when using mailto:

When a user hits the submit button there may not be any indication that the form data has been sent. A useful trick is to add a simple JavaScript to the submit button code, like this ...

<input type="submit" name="Submit" value="Submit" onClick="MM_popupMsg('Thank you. Your request is being sent and will be acted upon within 3 days.')">

This will open an alert window and let the user know the data has been sent.

2. Using PHP & CGI scripts

The most popular way to handle form data is to build a web page form which sends data to a PHP script which is actioned (by a CGI script) on your hosting server, and sends you the form data in an email. This method has the following advantages ...

• The form contents are sent straight from the web page and not via the senders email application (Outlook Express, Mail etc)
• The email address to which the forms contents is sent is invisible to the sender.
• After the script has actioned and error or confirmation page can be displayed giving the sender information.

There are many tutorials on PHP programming on the web. Your hosting company may have PHP and CGI scripts which you can use for your site, or you can find ones on the web which you can tailor to your needs and install on your remote site. Obviously these approaches usually require some know-how and programming ability, but fortunately there are some clever shareware programs out their to help you.

Good example programs and free scripts can be found at ...

• http://www.bebosoft.com/ Their Forms To Go shareware is comprehensive and good.

• http://homework.nwsnet.de/products/65/ ... Their Basic Form Mailer is basic but very succinct and works well.

• http://www.scriptarchive.com ... search for mail forms scripts here.

• http://nms-cgi.sourceforge.net/ ... search for mail forms scripts here.

An example of a form/php combination can be found on our own Contact page.

3. Using a proprietary technology

There are other technologies for handling form data including Macromedia's Cold Fusion.