Reposition Fields in a Marketo Form

Marketo Employee

While the Marketo form builder is quite powerful, there are some edge cases where it doesn't produce quite the result that you're looking for.  A common request is to reposition fields after the progressive profiling box, which is a capability that isn't currently available natively.  Fortunately, with some javascript tweaks, we can reposition fields freely.  Let's take a look at the code:

/*

jQuery must be loaded on the page

use moveMktoField to position the field designated by FieldName relative to the field designated by pivotName

*/

function moveMktoField(fieldName, pivotName, beforeOrAfter){

  //find the label element for the field which we want to move

  var labelForFieldToMove = $('[for="' + fieldName + '"]');

  //find the label element for the field we want to position relative to

  var labelForPivot = $('[for="' + pivotName + '"]');

  //get the mktoFormRow parent of each

  var fieldToMove = getParentWithClass(labelForFieldToMove, "mktoFormRow");

  var pivot = getParentWithClass(labelForPivot, "mktoFormRow");

  //insert the field before or after the pivot based on the setting

  if (beforeOrAfter == "before"){

       fieldToMove.insertBefore(pivot);

  } else if (beforeOrAfter == "after"){

       fieldToMove.insertAfter(pivot);

  } else {

       console.log("argument 'beforeOrAfter' must be one of 'before' or 'after'");

       return null;

  }

}

//inserts multiple fields in order where the first in the fields array is adjacent to the pivot, and the last is furthest

function moveMktoFields(fields, pivotName, beforeOrAfter){

  moveMktoField(fields[0], pivotName, beforeOrAfter);

  for ( i = 1; i < array.length; i++ ){

       moveMktoField(fields[i], fields[i - 1], beforeOrAfter);

  }

}

function getParentWithClass(elem, withClass) {

  //Check the parent to see if it has the desired class

  if ( elem.parent().hasClass(withClass) ) {

       return elem.parent();

  } else {

       //if not, call self recursively on the immediate parent

       return (getParentWithClass(elem.parent(), withClass) );

  }

}

With the above, we can use the moveMktoField function to reposition one field relative to another.  You can also use moveMktoFields to move the fields as a group when you pass an array of field names to it.  Click here to see a live demo, moving First Name after Last Name.

43 Comments
Level 2

Thanks for the quick response! Greatly appreciated. 

Level 2

Hi Sanford! 

How does your code here work if I am trying to use it on a Marketo guided landing page?

Level 10 - Community Moderator

Works the same there, load the script at the end of the HTML.