JavaScript Feedback Form
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 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.
Will Bontrager
©2000 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
