A Personalized "Thank You" Page With Any Form

(originally published in the Possibilities ezine)

Not everybody is lucky enough to have Master Form V4 installed on their web sites. And some people are required to use proprietary form handling software for e-commerce or other site features or services from certain vendors.

This article will show how to emulate one of the cool features that come with the standard Master Form V4, a personalized "thank you" page.

The method described here is accomplished with JavaScript and cookies.

When your site visitor uses a form, the "thank you" page can be personalized. The personalization uses information the site visitor provided on the form.

When the form is submitted, JavaScript is used to store certain form information in a cookie.

Later, when the "thank you" page is loaded into the user's browser, JavaScript is used to retrieve the information from the cookie. Still using JavaScript, some or all of that information is inserted at pre-selected places on the web page.

The "thank you" page is personalized whenever it is loaded into the browser, whether immediately after the form is submitted or later on.

For example, the form might be submitted to an autoresponder or payment gateway. Later, the browser lands on the "thank you" page, which is then personalized.

In fact, other pages can use the same JavaScript as the "thank you" page does. If the site visitor provided a name on a form, for example, every page of the web site could be personalized with that name.

The Instructions

The web page with the form uses different JavaScript than the "thank you" page uses. Thus, two pages need JavaScript installed.

If you wish to personalize other pages in addition to (or instead of) the "thank you" page, follow the "thank you" page instructions for those pages.

Instructions for the web page with the form —

To work with this system, form field names must begin with a letter and be composed only of letters, numbers, and underscore characters.

Put this JavaScript somewhere above the form. It may be in the HEAD area or the BODY area.

<script type="text/javascript" language="JavaScript">
<!-- Copyright 2006 Bontrager Connection, LLC
function CookieTheValues() {
//
// Two personalization places in this function:
//

// 1.
// Between the quotes, specify the form name:

var FormName = "MyForm";

// 2.
// Between the quotes, specify the cookie name:

var CookieName = "PersonalizationSystemCookie";

//
// No other personalizations needed in this function.
//
var cookiestring = new Array();
var ilen = eval('document.'+FormName+'.length');
for (i = 0; i < ilen; i++) { 
   var n = eval('document.'+FormName+'.elements['+i+'].name');
   if(n.length == 0) { continue; }
   var fieldlen = eval('document.'+FormName+'.'+n+'.length');
   if(fieldlen > 0) { continue; }
   var v = eval('document.'+FormName+'.'+n+'.value');
   if(v.length == 0) { continue; }
   v = escape(v);
   cookiestring.push(n + '%09' + v);
   }
document.cookie = CookieName + '=' + cookiestring.join('%09%09') + '; path=/';
return true;
}
//-->
</script>

Verify the form has a name. A form name would be specified with the name="____" attribute in the FORM tag. Example: name="MyForm"

In the above JavaScript, at the place indicated, specify the form name.

Also in the above JavaScript, at the place indicated, specify the cookie name. This name will be used to store the cookie and must be identical to the cookie name in the JavaScript at the "Thank You" page, once that JavaScript is installed.

Now, do one of these two things (do only one, either one, but not both) with the web page form:

Put the onsubmit="CookieTheValues()"; attribute into the FORM tag.

OR,

Put the onclick="CookieTheValues()"; attribute into the INPUT tag with the submit button.

Only fields with a name can be cookied. Of fields with a name, these will not be cookied:

Fields with more than one value. Dropdowns are an example.
Fields with the same name as other fields. Radio buttons are an example.

Here is an example form, for reference.

Instructions for the personalized "thank you" (or other) pages —

Put this JavaScript with the ReadCookieValues() function somewhere above the text to be personalized. It may be in the HEAD area or the BODY area.

<script type="text/javascript" language="JavaScript">
<!-- Copyright 2006 Bontrager Connection, LLC
var Cookies = new Array(); // Leave this line as is.
function ReadCookieValues() {
//
// One personalization place in this function:
//

// 1.
// Between the quotes, specify the cookie name:

var CookieName = "PersonalizationSystemCookie";

//
// No other personalizations needed in this function.
//
var cookiecontent = '';
if(document.cookie.length > 0) {
   var cookiename = CookieName + '=';
   var cookiebegin = document.cookie.indexOf(cookiename);
   var cookieend = 0;
   if(cookiebegin > -1) {
      cookiebegin += cookiename.length;
      cookieend = document.cookie.indexOf(";",cookiebegin);
      if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
      cookiecontent = document.cookie.substring(cookiebegin,cookieend);
      }
   }
if(cookiecontent.length < 0) { return; }
cookiecontent = unescape(cookiecontent);
Cookies = cookiecontent.split("\t\t");
}
ReadCookieValues();
function GetFieldValue(n) { 
for( var i = 0; i < Cookies.length; i++) { 
   var nv = Cookies[i].split("\t");
   if(nv[0] == n) {
      if(nv[1].length > 0) { return nv[1]; }
      else { return ''; }
      }
   }
return '';
}
function PrintPersonalizednfo() {
var otherwise = '';
var append = '';
if(arguments.length < 1) { return; }
if(arguments.length > 1) { otherwise = arguments[1]; }
if(arguments.length > 2) { append = arguments[2]; }
var v = GetFieldValue(arguments[0]);
if(v.length == 0) { v = otherwise; }
document.write(v+append);
}
//-->
</script>

In the above JavaScript, where indicated, specify the cookie name. This name must be identical to the cookie name in the JavaScript on the form web page.

Use the PrintPersonalizednfo() function to print a value wherever you want it printed.

PrintPersonalizednfo() requires at least one parameter and may have up to three parameters, in this order:

The field name containing the information to be printed.
The default text to be printed if there is no information in the field name.
The character or text to print immediately following the personalized or default text, before any spaces are printed, like a comma or a period.

The field name must always be provided.

The default text is optional, but must be provided (null is okay) if any appending characters are provided.

Appending characters are optional.

Here are some examples —

Field name only:

PrintPersonalizednfo("email");

Field name and default text:

PrintPersonalizednfo("email","[provide email]");

Field name, default text, and appending character:

PrintPersonalizednfo("email","[provide email]",":");

Field name, null default text, and appending character:

PrintPersonalizednfo("email","",":");

Here is an example use of function PrintPersonalizednfo(). Notice that NOSCRIPT tags are in place, for this example, to accomodate browsers without JavaScript.

Here are a few more examples.

Will Bontrager
2006

Will Bontrager
Software Programmer
http://willmaster.com