Published: Thursday, July 15, 1999
Mailing Form Results
Have you ever wanted to have a user fill out a form, and have the results automatically emailed
to you? Perhaps the user is filling out a form for more information on your product line, or filling in
a survey. It sure would be nice to get the results in email format as soon as the visitor was completed.
Well, this article shows you how to build a very flexible script to do just that! All you need to do is
write the HTML FORM code, and have the FORM send it's results to this script. THAT's ALL! It's really
that easy!
The beautiful thing about this script is that it is reusable... correction: it's ultra-reusable. All
you have to do is write the HTML, the ASP script is one file and needs no modification, regardless of
what form variables you have on your HTML page.
So let's get looking at some code! First, let's create an example form. Let's say we want to collect
survey information on our user. We might want to ask them for their name, their age, their sex, and
whether or not they like cheese. The reason we chose to use these questions is that it gives us a chance
to illustrate the use of all the types of FORM elements: the text box, the select box (or listbox), radio buttons,
and checkboxes.
The HTML for this is quite simple. We simply create a FORM using the FORM tags, and for
each element, we just create it like usual, using the INPUT tags. For each FORM element,
we have to give it a special prefix for its name. For example, text box elements need to be given
Names prefixed with txt. Also, in the email we will be sent, the name of each element, along with the
response, will be sent to us. The name of each element may contain spaces, indicated in the form name by
a period. Now, you are probably super-confused, and I don't blame you. Let's look at a quick example.
If you wanted to create a text box for the User's name, and you wanted the email to return:
User Name: <username>
(where <username> was filled in by the value entered by the web surfer), then we'd create the FORM
element like so:
<INPUT TYPE=TEXT NAME=txtUser.Name
SIZE=40>
|
Note the prefix is txt, which is needed to represent that this is a TEXT element. Also note
that we used a period to represent that we'll want a space between User and Name.
The only thing that you'll need to add to your standard HTML FORM is a small JavaScript function that will
fire whenever the form submits. This JavaScript code will simply pass the checkbox value to the ASP script
if the checkbox is not checked. (If the checkbox is unchecked, ASP doesn't like to send on the
value of unchecked checkbox to the page specified in the FORM's ACTION.)
So, the time has come to look at an example HTML file. This HTML file will create the survey FORM discussed
above. (The complete code for this HTML file is available in text format at the end of this article.)
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
<!--
function DoctorElements()
{
var i,j;
for (i=0; i < document.forms[0].elements.length-1; i++)
switch (String(document.forms[0].elements[i].name).substring(0,3))
{
case "chk":
if (document.forms[0].elements[i].checked)
document.forms[0].elements[i].value = "Yes";
else {
document.forms[0].elements[i].checked = true;
document.forms[0].elements[i].value = "No";
}
break;
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="mailForm.asp" ONSUBMIT="DoctorElements();">
<INPUT TYPE=HIDDEN NAME="urlSendTo" VALUE="/mailform/thankyou.htm">
<INPUT TYPE=HIDDEN NAME="urlFromPath" VALUE="/mailform/default.htm">
Name: <INPUT TYPE=TEXT NAME="txtUser.Name"><BR>
Age:
<SELECT NAME=selUser.Age SIZE=1>
<OPTION VALUE="Under 18">Under 18</OPTION>
<OPTION VALUE="18 - 24">18 - 24</OPTION>
<OPTION VALUE="25 - 40">25 - 40</OPTION>
<OPTION VALUE="Over 40">Over 40</OPTION>
</SELECT><BR>
Sex:
<BR>
<INPUT TYPE=RADIO NAME=radSex VALUE="Male" CHECKED>Male<BR>
<INPUT TYPE=RADIO NAME=radSex VALUE="Female">Female
<P>
I like cheese: <INPUT TYPE=CHECKBOX NAME=chkI.Like.Cheese>
<P><INPUT TYPE=SUBMIT>
</FORM>
</BODY>
</HTML>
|
Note the prefixes for the various form types:
| Element Prefixes |
|---|
| Text | txt |
| Select (listbox) | sel |
| Radio button | rad |
| Checkbox | chk |
Also note that we used a period in the places that we will want spaces to appear. We also added to
hidden form elements:
urlSendTo and
urlFromPath.
urlSendTo informs
our mail script where to send the user
after the automatic email's been sent.
urlFromPath
indicates the current URL of the processing form. This is done just so we'll have that information in the
email we're sent. Also be sure to notice in the FORM tag that the ONSUBMIT event is set to fire our
JavaScript function.
Next, we'll look at our generic ASP script that will take our FORM data and send an email based on the
values passed in.
Proceed to Step 2
