WillMaster Possibillites Logo EzineSeek Award
JavaScript Feedback Form
by
William Bontrager

Permission is granted to reprint the article below in its entirety provided no changes are made to the article text and the author's name, signature lines, and copyright line are printed with the article. However, you may change the article's title.

Don't have CGI? Here's a feedback form for you.

First, I'll give you the code to copy and paste. (You change only one thing.) Then, for those of you who like to tinker, I'll talk a little about how to customize it.

The following is real code, both JavaScript and HTML. If your email program tries to run the code (like some HTML enabled email programs will, even when the header specifically states the contents are ASCII/plain text), some of the JavaScript or HTML code might not be printed; or your background color may be unusual. If such applies to you, go to http://willmaster.com/possibilities/archives and read the online version.

As an alternative, you can copy the code from the demo page at http://willmaster.com/demo/jsfeedback.html

The copy and paste JavaScript Feedback Form code comes in two pieces. The first piece is the JavaScript email formatting function and belongs somewhere between the <head> and </head> tags of your HTML page. Here is the first piece: 


<script name="JavaScript">
<!-- Copyright 2000 by William Bontrager
function SendEmail()
{
	var toaddy = 'name@domain.com';
	var subject = 'JS Form Submission';
	var mailer = 'mailto:' + toaddy + '?subject=' + subject + '&body=' + 
'Name%20is\n\t' + document.jsform.visitorname.value + 
'\n\n' + 
'Email%20is\n\t' + document.jsform.email.value + 
'\n\n' + 
'Message:\n\n' + document.jsform.message.value +
'\n\n';
	parent.location = mailer;
} // -->
</script>

That first piece needs one change. Currently line 5 reads: 

	var toaddy = 'name@domain.com';

On that line, replace name@domain.com with your email address.

The second piece is the code for the form itself. It belongs on your HTML page wherever you want to put the form. Here is the second piece: 


<form name="jsform">
<table><tr>
<td align="right">Name:</td>
<td><input name="visitorname" size="27"></td>
</tr><tr>
<td align="right">Email:</td>
<td><input name="email" size="27"></td>
</tr><tr>
<td colspan="2">
Your message:<br>
<textarea name="message" cols="31" rows="6" wrap="soft">
</textarea>
<center>
<p>
<input type="submit" onClick="SendEmail()" value="Send Message">
</center>
</td>
</tr></table>
</form>

That's all you need for a JavaScript Feedback Form.

Something you probably want to do

Most browsers are JavaScript enabled. This feedback form works with those. If you want to warn people using JavaScript disabled browsers so they don't get frustrated trying to use your form, put the following three lines somewhere on your page (right above your form will probably be a good place to put it): 


<noscript>
<h3>Browser must be JavaScript enabled to use this form</h3>
</noscript>

With the above three lines, JavaScript disabled browsers will see the message but JavaScript enabled browsers will not.

For those who want to tinker

If you want to edit the form, you'll need to edit both the first and second pieces.

For practice, let's suppose you want people to give you the URL of their business site for a links page. So we edit the feedback form (the second piece) making it ask for the URL.

Find where the name and email form fields are located. Insert the url form field between the two.

Just as the name and email fields have names (name="____"), so the url field must have a name. Call it "url". (By the way, don't call the name field name="name" because at least one popular browser version gets confused.)

Okay, now it's time to tell the JavaScript function (the first piece) how to handle the new field.

Let's get oriented a bit first. (When you know what some of the symbols mean you'll feel more at home.)

%20 represents a space
\n represents a line feed (the next character printed will be on the next line)
\t represents a tab

The stuff between the apostrophes (single quotes) is treated literally. The rest is determined to be the name of something. For example, document.jsform.email.value is the name of the form's name="email" field. Wherever the name document.jsform.email.value is found, the form's value (what the user types in) is substituted instead.

The plus signs attach stuff together, end to end. So where you see: 

	'Email%20is\n\t' + document.jsform.email.value

it translates as: 

	Email is
		name@domain.com

You notice that most of the lines end with a plus sign. That tells the function to attach the next line, too.

Note: Because apostrophes are used to begin and end literal strings of characters, if you want to actually print an apostrophe you'll need to put a backward slash right before it. Like this: 

	\'

When you put the backward slash before it, you are telling the function that the apostrophe is to be printed rather than considered to be the end of the literal string of characters.

Armed with the above, go ahead and insert the code to print the URL that people will type into the form. Your code will look something like this: 


'URL%20is\n\t' + document.jsform.url.value + 
'\n\n' +

The form can accept any standard form input such as checkboxes and list selections. When you're ready to print what the user types or selects, use the document.jsform.NAME.value (replacing NAME with the form field's name) to represent where you want it printed.

You can make surveys, questionaires, and even subscription forms by customizing the JavaScript Feedback Form.

Happy communicating.

Copyright 2000 by William Bontrager

William Bontrager, Programmer and Publisher
"Screaming Hot CGI" programs
"WillMaster Possibilities" e-Newsletter
http://willmaster.com/possibilities/
subscribe-possibilities@willmaster.com