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.