Mailing Form Results - 4GuysFromRolla.com

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!

- continued -

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>  </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