When your visitor fills out any form on your web site, all the other forms
on your web site can be pre-filled in with the information s/he provided.
If the visitor provided a name and email address, for example, that name and
email address can be pre-filled in all of your other forms. The pre-fill can
be during the current site visit and for site visits as long as ten years in
the future.
It's done with a cookie.
See http://willmaster.com/ for an example of how it works.
Use any subscription, recommend, or contact form on the willmaster.com domain
-- the home page, in the WillMaster Possibilities section, or in the Master
Series CGI section. After that, all subscription, recommend, and contact forms
on the willmaster.com site will have the name and email fields pre-filled for
you.
Your browser must, of course, accept cookies. If not, or if your preferences
are set to accept only session cookies (willmaster.com cookies are set for 365
days), then the forms won't be pre-filled in for you.
JavaScript is used to set and retrieve the cookie.
Why?
To be considerate of your site visitors by making your forms easier to use.
It enourages communication. A partially pre-filled in form is an invitation.
Web sites that do this might appear more professional, and helping out your
site visitors is a good thing.
Even web sites with only one form can use this automatic form field pre-fill
method. If the site visitor might use the same form again sometime in the future,
the form can be pre-filled in and ready.
The Source Code
http://willmaster.com/a/22t/pl.pl?demo224
has a link where you can download the JavaScript code and several example forms.
Three steps are required to implement this automatic form field pre-fill method.
On each web page with a form:
1. Copy the JavaScript code from the HEAD area of the downloaded demonstration
page and paste it into the HEAD are of your web page. The JavaScript has three
places to be customized, marked with instructions.
2. Your form's ACTION tag needs to specify "name" and "onSubmit" attributes.
3. Three lines of JavaScript code need to be inserted below your form. Again,
the demonstration page has examples.
Specifics of each of those three steps are outlined below.
The JavaScript code of the HEAD Area
This JavaScript needs to be customized in three places:
1. Specify a name for the cookie. The name needs to be something no other
cookie on your web site uses. Otherwise, the cookies could overwrite each other.
2. Specify how many days the cookie shall exist on the visitor's computer.
3. If your separate forms have different field names for the same information,
you specify those here. This allows fields with different names to pre-fill
the information.
The example page demonstrates the above.
The Form's ACTION Tag
The form's ACTION tag needs to have:
1. A name="formname" attribute. Change "formname" to any name for the form
that makes sense to you.
2. An onSubmit="RememberFormFields('formname','_____');" attribute.
Replace formname with the name you gave the form.
Replace _____ with a list of this form's fields that you want the browser
to remember so it can pre-fill those fields in this and other forms. The form
field names are separated with a comma, like
fieldname1,fieldname2,fieldname3
The demonstration page has examples.
The JavaScript Below the Form
Three lines of JavaScript need to be put below the form. It doesn't matter
where below the form, so long as it's after the </FORM> tag.
This JavaScript causes the form fields to be pre-filled in, which is the reason
the code needs to be below the form. If the code were above the form, the browser
might try to execute the JavaScript before the form is loaded.
Here is an example of the three lines of JavaScript:
<script type="text/javascript" language="JavaScript"><!-- PopulateFormFields('formname','_____');
//--></script>
Replace formname with the name you gave the form.
Replace _____ with a list of this form's fields that you want the browser to
pre-fill. The form field names are separated with a comma, like
fieldname1,fieldname2,fieldname3
Note: The information between the parenthesis should be exactly the same as
the information between the parenthesis of the "onSubmit" attribute in the ACTION
tag.
The demonstration page has examples.
A Limitation
When deciding which form fields to pre-fill in, take into consideration that
cookies larger than 4k might not be accepted by the visitor's browser. (To see
how much that is, create a plain text file and add to or delete from it until
the file size is 4k.)
(The plain text version of this article is a bit over 6k in size.)
4k is more than you're likely to need if you're keeping track of only a few
items of information, such as name and email -- even if you have dozens of forms
and each form has different field names for the same information.
If you're keeping track of many form fields, especially if some of those fields
are text areas that invite lots of information, keep the 4k limit in mind.
Additional technical information about cookies is at http://www.netscape.com/newsref/std/cookie_spec.html
Conclusion
To make things easier for your site visitors, pick up the source code and
1. Put the large block of JavaScript code into the HEAD area of your web page.
Verify the custom information is correct.
2. Modify the FORM tag of your forms.
3. Add three lines of JavaScript below your form.
That's it.
Test it, of course. Once satisfied that it works as it's supposed to, go live.
Will Bontrager
Copyright 2003 Bontrager Connection, LLC
"WillMaster Possibilities" ezine
http://willmaster.com/possibilities/
mailto:possibilities@willmaster.com
For article reprint conditions, see:
http://willmaster.com/possibilities/archives/
| 
