Fun with Forms

The simplest Feedback Forms utilize a 'mailto:' action in the <FORM> tag something like this:

   <form action="mailto:elsi@bogus.com">

(My feedback form tutorial has more information on using 'mailto:' or the RootsWeb MailMerge CGI script.)

In the simplest cases, after the user clicks submit on the form, the e-mail is sent, but the user is still looking at the form. What you'd like to have happen is that upon submitting the form data, the user is taken to a new page which might thank him or her for filling out your form.

So let's do that. Here's the process:

Create your input form page as usual, but in the FORM tag, set your action to the file name of a second page on which you want your response to display. You must also use a GET method in this form tag to insure that the input fields are passed to the JavaScript on the next page. Example: my input form is on a web paged named myform.html, the response is to be displayed on a page named response.html. Use this FORM tag:
```
     <form action="response.html" method="get" 
	enctype="application/x-www-form-urlencoded">
```
(Hint: you can use my example above, it's fully functional. The link to myform.html will open in a new browser window so you can view it while reading along with the rest of this tutorial.)
The form tag is the only special thing that you need to do on the form page. If you want to use a JavaScript pop-up routine to verify that the user really does want to submit the form -- or if you're doing field validation, it would go on the form page (myform.html).

OK, you did notice that so far we haven't mailed anything? We've just passed the form inputs along to the next page. So, the response.html page needs some JavaScript to extract those form inputs and then send the e-mail. My example simply sends the e-mail to me and posts confirmation on the page.

This JavaScript is based on one that I found at The JavaScript Source. You must include the script block in the <HEAD> section of the response.html page. (You can use VIEW/SOURCE to copy my example if you wish.)

Since my input form contains 4 fields -- Name, EMail, URL, and Comment -- therefore the JavaScript extracts the values associated with these fields passed from the first page, uses them to fill in a [hidden] form that's on this page, and then submits the whole thing.

<SCRIPT LANGUAGE="JavaScript">

<!-- This script based on those available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function submitThis() {
Name2 = unescape(params["Name"]);
document.MMForm.Name.value = Name2;
EMail2 = unescape(params["EMail"]);
document.MMForm.EMail.value = EMail2;
URL2 = unescape(params["URL"]);
document.MMForm.URL.value = URL2;
Comment2 = unescape(params["Comment"]);
document.MMForm.Comment.value = Comment2;
document.MMForm.submit();
return true;
}
function getParams() {
var idx = document.URL.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
   }
}
return params;
}
params = getParams();
//  End -->
</script>

Grab the JavaScript

To make the script work, you need an onLoad action in your <BODY> tag and the [hidden] form within the page.
```
<BODY BGCOLOR="#FFFFFF" onLoad="submitThis()">


<form action="mailto:elsi@bogus.com" name="MMForm" 
	method="POST" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="Name">
<input type="hidden" name="EMail">
<input type="hidden" name="URL">
<input type="hidden" name="Comment">
</form>
```
Notice that this form has all the same field names as the original form. Since all of the input fields are hidden fields, I refer to this as a [hidden] form. Nothing at all shows up in the browser window.
The rest of the response.html page contains the response you want displayed to the visitor who submitted the form. If you want to use the contents of the form input in your page body, you can create some additional JavaScript which takes the form field data and displays it -- look at the JavaScript 'document.write' method.

Now, if you haven't already taken a look at my example form, try it now. I will point out that the e-mail address is a bogus one, so each time you submit the form, you're going to get a bounced e-mail. Better that you get one or two than I get inundated by lots of unnecessary mail.

If you have some feedback on this tutorial, please write to me.

Creating a "Response" Page for Feedback Forms