Skip navigation
All Places > Products > Support > Documents
Currently Being Moderated

    Change a Form's Follow Up Page Dynamically

    Version 2

      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:

      <script src="/js/public/jquery-latest.min.js" type="text/javascript"></script>
      <script type="text/javascript">
          // set no conflict mode for jquery
        var $jQ = jQuery.noConflict();

       

        $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.

      <script type="text/javascript" src="/js/public/jquery-latest.min.js"></script>
      <script type="text/javascript" language="Javascript">

       

      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.

        Comments

        Delete Document

        Close

        Are you sure you want to delete this document?

        More Like This