Change a Form's Follow Up Page Dynamically

Anonymous

Say you have a landing page with a form. You can dynamically change the form's follow up page based on values in the form by following these instructions.

Note: Please ensure that you have access to an experienced JavaScript developer.

Marketo Technical Support is not set up to assist with troubleshooting JavaScript.

On a Marketo landing page, the follow up page is stored in two form fields -- returnURL and retURL. You can change them with jQuery by adding a custom HTML block in to your landing page:

$jQ(document).ready(function(){
    // set the new follow up page
    $jQ("input[name='returnURL']").attr('value','http://www.yourcompany.com');
    $jQ("input[name='retURL']").attr('value','http://www.yourcompany.com');
});
</script>

To change this based on a value submitted in a form, you need to find the id of the field to read from. You can find that ID by previewing the web page, viewing the source code for the page, then finding the label for the form field in the HTML. In this example, it's TimeToPurchase:

<label>Time To Purchase:</label><span class='mktInput'><input class='mktFormText mktFormString' name="TimeToPurchase" id="TimeToPurchase" type='text' value="" maxlength='255' tabIndex='1' />

Next, use a jQuery hook to change returnURL and retURL when the form is submitted. We'll also use jQuery to read the form field values.

Drag in a Custom HTML block onto your page, then paste in the following Javascript. You must change the following for it to work correctly:

TimeToPurchase: to the ID of the field you're reading from (leave in the #)
URL: all the URL assignments to the locations where you want the user to go

If you need to check for additional values, add extra "case...break;" statements to the switch.

var $jQ = jQuery.noConflict();

function changeFollowupURL(){

// first, set the default follow up page
var URL = 'http://www.company.com/defaultPage.html';

     // override the default based on form values
     // Replace this with your own rules for setting the new URL
switch ($jQ("#TimeToPurchase").attr("value")) {
    case "6 months":
      URL = 'http://www.company.com/Page1.html';
      break;
    case "1 year":
      URL = 'http://www.company.com/Page2.html';
      break;
}

// set the new follow up page
$jQ("input[name='returnURL']").attr('value',URL);
$jQ("input[name='retURL']").attr('value',URL);

return true;
}

// catch when a form is submitted, change the followup URL
function formSubmit(elt) {
changeFollowupURL();
return Mkto.formSubmit(elt);
}

</script>

The Javascript needed to read the value from the form field may be different depending on the type of the input (text box, select box, check box, etc.). See the jQuery selectors documentation for other methods of getting those values, and Setting or Getting a Form Field Value via Javascript on a Landing Page for more on how to get the IDs of the fields.