Reposition Fields in a Marketo Form

Marketo Employee
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.

2181
43
43 Comments
Level 7 - Champion

Does this mean that if I want to add an 'opt in' tick box but want it to always sit at the bottom of the form and not in the middle of the form when I use progressive profiling that this will help me do this?


Thanks

Juli

Marketo Employee

In most cases, you would just place it at the bottom of the form in the editor, but that is one use case for this.

Level 7 - Champion

You mean using this code I can do this?  As at the moment you can't place something that isn't in the progressive profiling box below it, it always sits above it when i use it.

Marketo Employee

Yep, that's what it's for.

Level 7 - Champion

AMAZING!  I'll be using this from now on.

Thanks

Anonymous
Not applicable

Can this help you show no progressive profiling fields on the first view, and only show progressive profiling fields in future views? I'd like to show only the regular required fields the first time, ie first, last, name, and email. But going forward show progressive profiling fields two at a time.

Marketo Employee

I'm not really sure what you're asking about here, Christine.  Could you clarify this?  Are you trying to profile subsequent forms?

Level 7 - Champion

Kenny Elkington​ Can you help me with something?  How do I get progressive profiling fields to sit next to each other??  I want to do a form with 2 columns of fields, but can't do this whilst using progressive profiling.

Thanks

Juli

Marketo Employee

I'd like to help, but I'm not much of a designer, and this would take real HTML/CSS expertise to make it work right from a visual standpoint.  There's significantly more gotchas than reordering list elements there.

Anonymous
Not applicable

Thank you for your Script, Kenny.

I'm not a Java Script designer but I was able to adapt it for my progressive profiling form.

The only problem is, that the script loads not fast enough.The first seconds the fields in the form are shown in the wrong order before the script is loading and repositions them as required. Do you have any tips how the loading time can be improved or reduced to at least under one second?

Example wit Progressive Profiling (Job Title and Postcode are the first two fields of the progressive profiling area). The script is located at the bottom of the source code.

Order should be:

1. All Time visible fields

2. Progressive Profiling

3. Newsletter Checkbox (with privacy statement)

http://eu-lon04.marketo.com/lp/824-MSG-799/Fields-Reorder-Test.html

Thanks for any comments

Stephan