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 10 - Community Moderator

Rajesh, you will likely find this code more flexible:

MktoForms2 :: Demo :: Override Field Order v2.0.2 - via Flexbox

If you need IE 8-9 compatibility you need the older, more complex approach:

MktoForms2 :: Demo :: Override Field Order 1.0.2

Anonymous
Not applicable

Hi Sanford,

I'm trying out your code and I'm having trouble getting it to work. Is the JS code placed on the form itself, on the template or as a HTML snippet on the page?

In this section:

var fieldOrder = [

submitButton,

"FirstName",

"Email",

"Website",

"ConsentDisclaimer"

];

I'm guessing that the list order is what goes below the Submit Button. What if I need the field to go above a submit button but below a progressive profiling field?

Any advice will be appreciated

cheers,

Marilyn

Level 10 - Community Moderator
I'm trying out your code

Which code?  1.0.x or 2.0.x branch?

Is the JS code placed on the form itself, on the template or as a HTML snippet on the page?

Forms JS always goes in a <script> tag, and you need to make sure it loads after the <script> that loads forms2.min.js. 

On a Marketo LP, that means you place your custom <script> just before the closing </body> tag.  On a non-Marketo LP put it right after the standard form embed code.

I'm guessing that the list order is what goes below the Submit Button. What if I need the field to go above a submit button but below a progressive profiling field?

You don't need to involve the Submit button at all in the order. The list ["Company","FirstName","Website"] will make sure those fields always appear in that order -- even if "FirstName" is a ProgPro field and "Website" is a regular (always-on) field, they'll appear in the stated order.

Anonymous
Not applicable

Thanks Sanford.

I'm trying 1.0.x

I've tried putting the JS in the Marketo LP template or as a HTML tag in the Editor. The behavior of the form fields didn't seem to change.

http://go.nttict.com/testing.html

I can see from the inspector that the fields have an order assigned to them but they aren't displaying in the order specified. What am I missing?

Level 10 - Community Moderator

Looks like you're using the 2.0.x code actually, but you forgot to pick up the CSS from the CSS pane in CodePen.  That's essential.

Anonymous
Not applicable

That worked! Thanks Sanford. Lifesaver as always

Level 1

Is there a way to put in custom CSS within the form theme itself to have a normal field (like opt-in) to be under the progressive profiling fields? I'm no coder mastermind and it seems like this should be something you could fix within the form itself, not on the landing page template?

Screen Shot 2019-05-15 at 2.08.54 PM.pngScreen Shot 2019-05-15 at 2.11.05 PM.png

Is there any sort of video example for how to implement otherwise? 

Thanks,

Ellie

Level 10 - Community Moderator

No, you cannot do this with CSS alone, because you'll break the tab order.

As noted in the comments, grab my FormsPlus::Tag and FormsPlus::Reorder libraries from MktoForms2 :: Demo :: Override Field Order 1.0.2 and you can choose any order you want.

Level 2

Hi Sanford,

How do you handle forms that have labels above fields? Just curious...Thank you!

Level 10 - Community Moderator

Doesn't matter with the above code, the entire row is reordered (including the label).