Simple Thank-You Page Personalization

This article describes how to take one item in a form and use it to customize the thank-you page.

For information about having the entire form available for customizing, not just one item, see the A Personalized Thank-You Page With Any Form Willmaster library article.

For this simple method, two things need to be done:

1. On the form page, insert an onchange= attribute into the form field to use. The attribute will set a cookie with the form information.

2. On the thank-you page, insert a block of JavaScript to read the cookie. And insert a line of JavaScript where the form information shall be inserted.

For this simple method to work, both the form page and the thank-you page must be at the same domain or subdomain.

That means either both will need to be at example.com or both at www.example.com. If one is at example.com and the other is at www.example.com, the method will not work without modifying the JavaScript to set the cookie with different information.

Implementing Thank-You Page Personalization

The Form Page —

In the form field that is to be stored in a cookie, insert this attribute (all one line):

onchange="document.cookie='NameOfCookie='+this.value+'; path=/'"

Example:

<input 
   type="text" 
   onchange="document.cookie='NameOfCookie='+this.value+'; path=/'" 
   name="email">

That's all you have to do with the form. You may change NameOfCookie to specify a different cookie name, if you wish.

When the form field is filled in, a cookie is set with what was typed into the field. If the field is changed, the cookie value also changes.

The Thank-You Page —

The thank-you page has two edits.

First, somewhere above where the customization will be, put these 19 lines of JavaScript code. It can be anywhere above the customization in the BODY or HEAD area.

<script type="text/javascript">
var CookieName = "NameOfCookie"; // same as on form page at onchange="..."
function CookieValue() {
var cookievalue = '';
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; }
      cookievalue = document.cookie.substring(cookiebegin,cookieend);
      }
   }
if(cookievalue.length < 0) { cookievalue = "Friend"; }
return cookievalue;
}
</script>

If you changed the cookie name in the code added to the form field, then the JavaScript needs to be modified accordingly. The cookie name is specified in the second line.

Next, put this JavaScript where the custom form information is to be published:

<script>document.write(CookieValue())</script>

Example (assuming the form field to insert is an email address:

<p>
Thank you. An acknowledgment has been sent to your 
<script>document.write(CookieValue())</script> 
email address.
</p>

When the thank-you page loads, the 19 lines of JavaScript obtain the value of the cookie. The cookie's value is printed where the <script>document.write(CookieValue())</script> code is placed.

Testing

To test, use the form and verify the thank-you page is correctly customized.

If the test fails, verify your browser accepts cookies and is JavaScript-enabled.

If still no joy, there may be a clash with other JavaScript on the page. The Firefox browser's "Tools | Error Console" menu item is a great debugging tool.

Will Bontrager