Personalized Thank-You Pages

Thank-you pages can be personalized after a form is used — even when your form processing software does not have that capability.

How it works:

1. When the form is submitted, JavaScript sets a cookie with form information.

2. When the browser loads the thank-you page, PHP code uses the cookie information to personalize the page.

The form and the thank-you page need to be on the same domain. It is a cookie requirement. The domain that sets a cookie is the only domain that may later read the cookie.

(The form processing software that the form submits to may be on a different domain. But it must send the browser back to the form's domain where the thank-you page is at.)

Because PHP is used to personalize the thank-you page, the page needs to have a *.php file name extension.

I'll show you how to set it up.

A Demonstration

Here is an example form.

When the example form is submitted, this page will reload and text below this paragraph will publish the information provide with the form. It demonstrates the setting of the cookie and the php code personalization of this page.

(Information provided by the form will be published here.)

To set this up, you will need a working form and a thank-you page where you can use PHP code.

The Form Page

The form tag needs to have two things:

1. An id. The id may be any legal id. (The id will be referenced in the JavaScript.)

   Example:

   id="my-form"
   

2. An onsubmit attribute:

   onsubmit="return CookieTheFormValues()" 
   

Here is an example form. The id and onsubmit attributes have been highlighted with the color blue.

<form 
   id="my-form" 
   method="post" 
   onsubmit="return CookieTheFormValues()" 
   action="/script.php">
<p>
Name:<br>
<input type="text" name="name" style="width:200px; box-sizing:border-box;">
</p>
<p>
Email:<br>
<input  type="email" name="email" style="width:200px; box-sizing:border-box;">
</p>
<p>
<input type="submit" value="Submit Form" style="width:200px; box-sizing:border-box;">
</p>
</form>

The JavaScript

Below is the JavaScript that stores form field names in a cookie. The JavaScript needs to be in the source code of the web page with the form.

There are 3 customizations. See below the source code.

<script type="text/javascript">
/* 
   Personalized Thank-you Page
   Version 2.0
   November 22, 2021

   Will Bontrager Software LLC
   https://www.willmaster.com/
*/

/* Customization section */
var FormID = "my-form";
var CookieName = "PersonalizationCookie";
var CookieDays = 14;
/* End of customization section */

function CookieTheFormValues()
{
   var cookievalue = new Array();
   var fid = document.getElementById(FormID);
   for(i=0; i<fid.length; i++)
   {
      if( ! fid[i].name.length ) { continue; }
      cookievalue.push(encodeURIComponent(fid[i].name)+'='+encodeURIComponent(fid[i].value));
   }
   var exp = "";
   if(CookieDays > 0)
   {
      var now = new Date();
      now.setTime(now.getTime()+parseInt(CookieDays*24*60*60*1000));
      exp = '; expires='+now.toGMTString();
   }
   document.cookie = CookieName+'='+cookievalue.join("&")+';path=/'+exp;
   return true;
}
</script>

Customizations —

Change only the customizations that need changing. If your form's id value is my-form and the cookie specifications are acceptable, then the customizations won't need to be changed at all.

1. In the first of 3 customization areas, you'll see:

   var FormID = "my-form";
   

   Replace my-form with your form tag's id value.

2. The cookie name is specified on this line:

   var CookieName = "PersonalizationCookie";
   

   Replace PersonalizationCookie with your preferred cookie name. The cookie name must begin with a letter and may be composed of letters, numbers, and underscore characters.

3. var CookieDays = 14;
   

   Replace 14 with the number of days the cookie shall last. The maximum is 3652. Specify 0 for the cookie to delete when the browser is exited.

The Thank-You Page

In the source code of the thank-you page, near or at the top, put this PHP code.

<?php
$CookieName = "PersonalizationCookie";
foreach( explode("&",$_COOKIE[$CookieName]) as $chunk )
{
   list($name,$value) = explode("=",$chunk,2);
   $Personal[$name] = $value;
}
?>

If the cookie name you specified for the JavaScript, further above, is not PersonalizationCookie, then replace PersonalizationCookie in the PHP code with the correct cookie name.

With the above in place on the thank-you page, all that's left to do is to specify where to put specific form information to customize the page.

How the tags are constructed depends on the form field name where the information is coming from.

Here is the format:

<?php echo($Personal["FORM-FIELD-NAME"]); ?>

As an example, if you have a form field name="email" and you want to insert the information the form user typed into that field, you would put this tag in the spot on the thank-you page where you want it to be published.

<?php echo($Personal["email"]); ?>

Here is an example:

We will assume <?php echo($Personal["email"]); ?> is your primary email address.

Follow that procedure for each customization you want to implement on the thank-you page.

You now have a form page that stores the form information in a cookie when the form is submitted.

When the browser arrives at the thank-you page, the information in the cookie is used to customize the thank-you page content.

This article first appeared with an issue of the Possibilities newsletter.

Will Bontrager