MktoForms2: Override Field Order

Kelly_Sheetz
Level 2

MktoForms2: Override Field Order

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?

11 REPLIES 11
SanfordWhiteman
Level 10 - Community Moderator

Re: MktoForms2: Override Field Order

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
Level 2

Re: MktoForms2: Override Field Order

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

Re: MktoForms2: Override Field Order

If you have a VR use whenRendered, not whenReady.

Kelly_Sheetz
Level 2

Re: MktoForms2: Override Field Order

That worked perfectly! Thank you for your help and patience

SanfordWhiteman
Level 10 - Community Moderator

Re: MktoForms2: Override Field Order

No prob.

Kelly_Sheetz
Level 2

Re: MktoForms2: Override Field Order

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

Re: MktoForms2: Override Field Order

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
Level 2

Re: MktoForms2: Override Field Order

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

Re: MktoForms2: Override Field Order

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