Intermediate HTML

Lesson 4: Using forms to get visitor feedback

Sending the information

Well, you've learned enough about forms to allow you to create some good ones. If you need to know more, Chapter 16 in your text goes into more detail. For example, they tell you how to create a hidden element, which, as you may surmise, is hidden from your visitor but nevertheless passed to your program.

What we really need to get into now, though, is how to get hold of all the information your visitor has inputted into your form.

Short of signing up for a programming course, there are two ways to tackle this.

The easiest way is to use one of the many sites that processes forms free or for a small monthly fee. They send you your visitors' responses via email. Of course, they have to pay for the service somehow, so the free services usually display ads. Here are a few:

• Response-o-matic is free and supported by ads. You create the form, they send you the responses.
• Responders.com hosts the forms on their site and sends you the responses. For a fee, they'll process forms hosted on your own site.
• Freedback even has a formbuilder tool that generates HTML for you to put on your site. Of course, since you're now an expert form builder, you'll be able to modify it once you get it. They have a paid ad-free version.
• Formbreeze is a new guy on the market. They're not free, but the fee is reasonable and they give you a 30 day free trial.

If you're willing to dabble in a little bit of Javascript programming, you can process your own form. We start with a script on the JavaScript Source at http://javascript.internet.com/forms/auto-email-link.html. I know, I know. It looks scary. But it's not all that complicated. Let's go through it.

Here's the script, minus the references to The JavaScript Source, which you SHOULD put back if you use the script, and modified to conform to the newest W3C standards:

E-MAIL THIS LINK


Enter recipient's e-mail:

Let's look at the body first. We've got a form named "eMailer", with a text input field by the name of "address". Then we've got a submit button, with a Javascript statement that says, when someone clicks the button, execute the function called mailThisUrl in the head section. The "()" at the end of the function name is just Javascript stuff. Just put it in and don't worry about it.

Check it out! In the head, there's a function (which you can recognize because it starts with the word "function" and has squiggly "{ }" signs), called mailThisUrl. Must be our guy! So let's dissect it.

Just before the function are two variables. A variable is just a way to make it easier to read the function. You give the variable some long value, then you don't have to repeat the value, you just refer to it by the variable name. The code sets the first variable, named "u", to the location, i.e. the URL, of the window. The second variable is just text. You could put anything you wanted in there, between the quotation marks and they'd be sent in the subject of the email message.

The first line within the function sets another variable, which is a true-false one. It's set to false, because, in this particular script, until the visitor's input is checked and found to be a valid email address, the coder doesn't consider the input to be "good". Don't worry about it. You don't need to understand it to use it.

The second line calls the first function, checkEmailAddress, just by saying its name.

The checkEmailAddress function is kind of an all purpose function that checks anything sent it to make sure it's in the form of a valid email address. If you don't have an email address in your form, you won't need it. If you do, just make sure that, when you call it, as this script does, you pass along the value you want checked. Here, it's done by referring to the address field in the form named eMailer in this document:

checkEmailAddress(document.eMailer.address);

checkEmailAddress sends back an answer to the guy that called it; it sets that "good" variable to either true or false. Don't worry about that. All you have to know is that, in the next line of code if the email is not valid, the visitor gets a message. If it is valid, mailThisUrl goes on to the next step.

Here's the thing. It's very good to check that the stuff people put into forms is valid. There are scads of validation scripts in The JavaScript Source if you want to get into it. But it's not strictly necessary. If the validation stuff is too confusing, the only part of the script in the head section that you really need is:

function mailThisUrl() {
window.location = "mailto:"+document.eMailer.address.value+"?subject="+m+"&body="any other value(s) you want passed from the form";
}

You know how to refer to the elements in the form. They're all:

document.eMailer.name of the element.value

So, for example, if you had a form like this:

E-MAIL THIS LINK


Enter recipient's e-mail:





Enter party affiliation:

you'd refer to the contents of the input element party like so:

document.eMailer.party.value

You can go on and on like this for all your form elements, just stringing them on to the end of that "body=" part of the function.

And there you have it!

One last point. This script sends the results to someone else's email address. It's even simpler if you want the results sent back to yourself. Then your function would read:

function mailThisUrl() {
window.location = "mailto:me@myaddress.com?subject=mysubject"&body=document.eMailer.party.value;
}

Bibliography

Castro HTML for the World Wide Web, 5th Edition, Chapters 18 and 19

Print this page

  1  2  3  4  5