Flexibility of the form layout with progressive profiling

[Taishi_Yamada]

Hi,

I would like to change the order of fields in the form with progressive profiling. I know we can change the order in progressive profiling target filed and non-target field each. But, I couldn't find out the method to set the order likes "fixed fields / progressive profiling fields / fixed fields". It looks Marketo accepts only "fixed filed / progressive profiling fields".

Is there any way to change the order?

as typical case, I would like to show "agreed policy" check box fields above the "submit" button always. but, I couldn't put the agreed policy one as fixed field when I enabled progressive profiling.

Regards,
-Taishi

[Grégoire_Miche2]

Hi Taishi,

This can only be done using Javascript.

-Greg

[SanfordWhiteman]

Simple framework for reordering fields is here: MktoForms2 :: Override Field Order

[Molly_Cousins]

Hi Sanford -

Do you have a recommendation for how to amend this JS to reference multiple form IDs? We use this on our master Landing Page template. I have several different forms (Content, Event Reg, etc) that I swap in, but have only had success when declaring one formID.

I have tried the following:

• "formId = 1234, 1235, 1236;"
• "formId = 1234;" "formID = 1235;" "formId = 1236;"  (separate lines)

I have also just submitted this to Marketo Support, but anticipate this will not be a supported topic I'll get assistance with.

Any help would be much appreciated! I am not looking forward to the alternative of multiple templates, one for each formId... kind of defeats the purpose of a true master template

[SanfordWhiteman]

Yeah, those approaches couldn't help.

var myVariable = 123;
var myVariable = 456;
var myVariable = 789;

The above just resets the value of the myVariable variable. It only has one value at a time and will end up with the last value.

var myVariable = 123, 456, 789;

The above not only doesn't work, but is a JavaScript syntax error: the script will error out completely because the comma-delim'd list following a var must all be valid variable names. (Which cannot start with a number.)

myVariable = 123, 456, 789;

The above (without the var) is not a syntax error but also can't have the desired result.  Because of the way the JS comma operator works, you just end up setting myVariable to the first value 123.

Aaaaanyway, the above is just for anyone learning to code.

If you're using my code on a Marketo LP with named Form elements (not the embed code) you don't need the call to loadForm()(and you don't need to set the variables).  Marketo injects the form for you. You just need to put my whenReady() function before the closing </body> tag.

[Molly_Cousins]

Gotcha. I'm not a JS person (hack my way around HTML/CSS just fine, though) so I figured that was probably my issue.

For context, I have a LP template containing custom JS (listing a custom field order) to force our opt-in checkbox below progressive fields. It works great... until I insert a different form.

I'm going to try tokenizing the formID in the code - hopefully that approach will work and I won't need multiple landing page templates just so my various forms will display correctly.

Thanks!

[SanfordWhiteman]

You don't need different templates, certainly!

And if you just want to switch the reordered fields based on the current form id, do it like this:

var formId = form.getId(),
  fieldOrder;
switch (formId) {
  case 10002:
    fieldOrder = [ 'these', 'fields', 'in', 'this', 'order'];
    break;
  case 10003:
    fieldOrder = [ 'these', 'other', 'ones', 'in', 'order' ];
    break;
}

or

var fieldOrderByForm = {
  10002 : [ 'these', 'fields', 'in', 'this', 'order' ],
  10003:  [ 'these', 'other', 'ones', 'in', 'order' ]
  },
  formId = form.getId(),
  fieldOrder = fieldOrderByForm[formId];

[lianef]

Hi @SanfordWhiteman, 
I am trying to apply the script example to my page but am getting stuck with the FormsPlus piece of the script, the error is that it is not defined. What would I update this to be?

MktoForms2.whenRendered(function(form) {
	var formEl = form.getFormElem()[0],
		submitButtonRow = formEl.querySelector(".mktoButtonRow");
	
	var fieldOrder = [
		"ArchiveMarketoLastDT__c",
		"Email",
		submitButtonRow,
		"FirstName"
	];
	FormsPlus.reorderFields(form, fieldOrder);
});

 
I also need for FirstName to be rich text which I have added the input and name to .

[SanfordWhiteman]

You need the 2 scripts in the HTML pane at https://codepen.io/figureone/pen/ZoVeRy/. Make sure to download and reupload them to your Design Studio (rather than serving them from my CDN).