How to Make Dreamweaver Forms that Email Results
This tutorial assumes that you are familiar with Macromedia Dreamweaver and that you have created a form to collect data from a user. If you need a review of Dreamweaver, see the Center for Language Acquisition's tutorial on Dreamweaver.
This tutorial addresses the following sorts of questions:
"When we submitted our form, we didn't receive any message or any confirmation that we had successfully submitted the form? Is there a way that we can add a box that let's the person know they have successfully submitted the form?
When we are designating to whom we want the form sent, how can we designate more than one person's e-mail address?
Is there a way to program the submission form so that we get the info in a different, less difficult to read format?"
The easiest thing to do here is to use a special server program to process the form input. There is such a program called FormMail.cgi on the personal server (www.personal.psu.edu). It can process your form's values into human-readable format, display a confirmation page after the form is sent, and send the results to multiple recipients.
To use it, do the following:
Click on the red dashed line that surrounds your form. In the Control Palette, set the Form's Action to the following (without the quotes): "http://www.personal.psu.edu/cgi-bin/formmail.cgi". See Figure 1:
|
| Figure 1: The Control Palette showing the form's action |
Next, open the object palette if it's not already open (choose "Object Palette" from the Window menu). Set it to display form objects (see the Dreamweaver handout for how to do this).
There are several input types not discussed on the Dreamweaver handout. You'll need to use one of these types, the hidden field, to make this program work. It's not hard to do at all.
 Figure 2: The Form Objects. The "hidden field" type is at the bottom. |
At the very bottom of the form objects window, there is an input method called "Hidden Field." See figure 2, at left. Drag this icon onto your form. Inside the editing window, you should see a little yellow icon that looks like a shield with an "A" in it. You need to drag three hidden fields onto your form. When you're done, you should see three yellow icons on your form, like this:
Hidden Fields, just like all objects in Dreamweaver, have properties associated with them. You will need to set these properties to make your form work. In the Control Palette, you can set the hidden field's name and value. Just click on the hidden field, and the Control Palette will change to display its the field's properties. Name the first hidden field "recipient" (without the quotes). Set its value to be the email address(es) of the recipients. If there are multiple recipients, enter them like this: "dvm105@psu.edu, tgb114@psu.edu" (without the quotes). See Figure 4 for an example:
Name the second hidden field "subject" (without the quotes). This is the subject of the email you'll get. I suggest giving it a value like "* * * Result of Email Form * * *" or something similar so it will stand out in your inbox. See Figure 5:
Name the third hidden field "redirect" (without the quotes). This is the "confirmation" page that will be displayed after the form is submitted. This is a normal web page that you will have to make. It will probably be on the www.personal.psu.edu server, so the value for this hidden field should be something like "http://www.personal.psu.edu/dvm105/confirmation_page.html". See Figure 6:
|
That's all there is to it! The contents of your form will now be emailed to everyone in the recipient list. Don't forget to make the confirmation page mentioned above!
