Pass form data from one page to another

[mhilger]

This Microsite (see attached "www.zip" download) shows off a capability of the FusionPro Links product that quite a number of customers have requested - the ability to access form response data on subsequent Microsites while also recording that data as form responses in the FusionPro Link reporting database.

Here's an example of this in action:

1) User selects "Red" as their favorite color and enters their name on page 1 and presses Submit
2) User sees page 2 with a Red apple and their name (which was entered on page 1 - it was not in the original list data)
3) Data is also stored in the FusionPro Links reporting database for campaign admins to review

The core of this capability is some JavaScript that is embedded in the HTML pages. There is nothing in the FusionPro Links system that is needed for customers to set to make this work. Both the form page and the subsequent page that is to display that form data has JavaScript in it.

Note that this sample was designed to display this functionality as simply as possible with little attention being paid to the overall graphical design of the pages. Users can review this example and then incorporate the logic into their pages.

The included JavaScript is commented heavily to help aide users in understanding how this functionality works.




Ideas For Use of This Capability
This capability of passing data collected from one page to another has quite a number of uses that customers can explore in their Microsite creation. Some possible uses include:

1. Simply showing the collected data on a subsequent page. This will provide an instantly more personalized conversation with the Microsite visitor. If page 1 asks "What is your name" and the user enters "John", the subsequent page might say "So tell us, John, what is your favorite sport.".
2. Use form response to show a specific variable image on a subsequent page. If the user enters "Baseball" as their favorite sport, show a baseball stadium on the next page (as opposed to a Football image for other users that select that as their favorite sport).
3. Apply some instant business logic on the subsequent page to drive personalization. The data passed from one page to another is handled via JavaScript, which means its a variable that can immediately be evaluated with other JavaScript logic in that page. This might be used to show/hide entire blocks of content based on the answer from a previous page or take any number of extensive actions to change what is displayed to the user on that subsequent page.

[kregan]

Mark,

Can this data be passed into the triggered response email as well? I have a campaign that is requesting if a person answers YES they get an email with YES information and if they answer NO on a form they get an email with NO information.

[LeberMac]

Greetings, everyone! I have an odd problem with this script that I can't seem to get my head around.

I'm using this script as the basis for a pURL campaign that passes data from the "index.html" page to the "thankYou.html" page. When I use the files as-is from the fabulous mhilger, everything's fine. Works great.

However, when I make a very slight change on the index.html page, changing the submit button from this standard form submit button (provided by mhilger):

<input type="button" id="submit" value="Submit"  onclick="javascript:submitform();"/>

to this (my cool image submit button):

<input type="image" id="submit" value="Submit"  onclick="javascript:submitform();" src="assets/submit_button.gif" border="0" />

The form with the image button no workie.

Okay, I'll be more specific. When I use the standard button, my URLencoded string for the destination page ends up looking normal, like this:

http://[...our pURL...]/links/Microsites/da19b544_c692_4edc_ba85_2ca525639b6f/www/july-thankyou.html?enc=McWjUm9uTYH5Y5tHdpgpAg==&theAnswer=64

However, when I use the image-style button, my URLencoded string for the destination page ends up looking all jagged up, like this:

http://[...our pURL...]/links/Microsites/da19b544_c692_4edc_ba85_2ca525639b6f/www/july-thankyou.html?enc=5e6zaFEYMp2YYTDybwVAtwiWUiFL15U75/VERv7XCVuF4PnEd6eRfksyFU0AG44W1eI290YF4S4ROwKoqnK8poZLzM4xj9afvFC6HLXwD
(apparently it goes on forever)

I'm apparently missing something obvious and drastic, but for the life of me I can't seem to figure this out. Anyway it's 9:30 on Sunday night, so I'll leave this sit and stew a little and see if anyone has any great comments on Monday.

[LeberMac]

Aha, with help from kregan, I remembered something that we'd done before to make the "passing of data" work properly when using a image button.

In the form, we created a hidden input such as:
<input type="hidden" name="RedirectQueryParameters" value="" id="RedirectQueryParameters" />
at the end of the form,

and inside the submitform() script, referenced it to build the URLencoded string:
document.getElementById("RedirectQueryParameters") .value = "&theAnswer=" + theAnswer;

Of course, you'll need to change your variables (theAnswer) to match what you have in your own form to make things work properly.

I'm not sure WHY this works, exactly, essentially we're bypassing all of the HTML form functionality and using javascript to push the data via the URL string. It feels like a kludge. Regardless, the "ThankYou" page uses more javascript to unencode it and -voilà!- functionality has arrived.

(Mods - feel free to correct any info on here that may be confusing...)

All the best,