Reposition Fields in a Marketo Form

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