MktoForms2: Override Field Order

[Kelly_Sheetz]

Hi Stanford,

This is in reference to this thread: Reposition Fields in a Marketo Form

How does your code work with progressive profiling? Specifically, in reference to this part of the js:

var fieldOrder = ["FirstName", "ArchiveMarketoLastDT__c", "Email", "LastName"];

For example, we reveal 6 progressive profiling fields at a time and therefore have no way of knowing which fields will be exposed per form fill for a particular lead. Do I just order all possible fields, with the ones I want at the end?

[Geoff_Krajeski1]

@SanfordWhiteman I'm hoping you can help address an issue I am seeing when using the Override Field Order method you outlined here: https://codepen.io/figureone/pen/ZoVeRy

When I set this up for my fields, the form works great except when it is prepopulated.

Have you seen this or addressed it previously? It appears that when prefill occurs that the identifier for my rich text field I am trying to force below the submit button does not appear in the DOM. 

This is my order array: 

var fieldOrder = [
submitButtonRow,
"HtmlText_2020-01-03T18" // richtext
];

[SanfordWhiteman]

Pre-Fill wouldn't affect an ID inside the Rich Text -- unless Pre-Fill also triggers Visibility Rules. 

[SanfordWhiteman]

Do I just order all possible fields, with the ones I want at the end?

Yes. If a field doesn't exist on the form, it's skipped automatically.

[Kelly_Sheetz]

Thanks!

I am still not able to get the zOPComplianceOptin field to move to the bottom. This field has a visibility rule set for when Country = Canada

Here is what I used via your code:

HTML:

<form id="mktoForm_9783" class="mktoForm"></form>

<script id="mktoForms2Lib" src="//app-sj06.marketo.com/js/forms2/js/forms2.min.js"></script>

<script id="teknklFormsPlus-0.2.1-tag" src="//codepen.io/figureone/pen/85e4921f8206e9bb73ac1829c6b0d05f.js"></script>

<script id="teknklFormsPlus-0.2.1-reorder" src="//codepen.io/figureone/pen/cd04ce9dd050fd464db8ea917224870f.js"></script>

JS:

var instanceURL = '//app-sj06.marketo.com',

  munchkinId = '112-TZM-766',

  formId = 9783;

MktoForms2.loadForm(instanceURL, munchkinId, formId);

MktoForms2.whenReady(function(form) {

  /* Config section: set up an array of the fields you want to move + their final order */

  var fieldOrder = ["Email", "FirstName", "LastName", "Company", "zOPprogressiveprofilingjrole", "zOPprogressiveprofilingpnum","zOPprogressiveprofilingcntry", "zOPprogressiveprofilingpcode", "zOPprogressiveprofilingind", "zOPprogressiveprofilingjtitle", "zOPprogressiveprofilingausag", "zOPprogressiveprofilingucase", "zOPprogressiveprofilingsprov", "zOPComplianceOptin"];

  /* ---- NO NEED TO EDIT BELOW THIS LINE! ---- */

  FormsPlus.reorderFields(form,fieldOrder);

});

[SanfordWhiteman]

If you have a VR use whenRendered, not whenReady.

[Kelly_Sheetz]

That worked perfectly! Thank you for your help and patience

[SanfordWhiteman]

No prob.

[Kelly_Sheetz]

Hi Stanford,

The code works perfectly in https://codepen.io/anon/pen/mBbKyd?editors=1010

I have uploaded the JS and haven injected it into the template via a token, but I am struggling to understand where the HTML section goes? I've tried to embed it in the form, but the published landing page is blank.

Here is the landing page: Title & Header

What am I missing?!

[SanfordWhiteman]

Right now, it doesn't look like you have the form in the page at all.

So first add the named form to the LP.

Then you can put the forms behaviors (the call to MktoForms2.whenRendered) in a local <script></script> tag, directly after this remote script include:

<script src="http​s://s3-us-west-2.amazonaws.com/aws-marketo-m2-resources/js/mkto-field-placement-pp/FieldPlacementReorder.js"></script>

[Kelly_Sheetz]

Thanks, Sanford. That works great. One additional question. Is there a way to implement this js without having to embed the form? Ideally, i'd like this js to run if any form is present on a Marketo landing page, without having to embed the script locally or specifying a specific form ID.

Thanks!

[SanfordWhiteman]

It'll work for embedded forms or named mktoForm elements. You simply must have your behaviors JS load after the Forms2 API (forms2.min.js​). On Marketo-hosted LPs this means do your custom stuff just inside the closing </body>.