///Pre-Fill Forms From Last Use

Pre-Fill Forms From Last Use

Pre-Fill Forms From Last Use

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 nvitation.

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

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 tag.

This Java 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.

2010-05-26T11:32:53+00:00 April 18th, 2005|JavaScript|0 Comments

About the Author:

Leave A Comment