Progressive profiling fields above required fields?

[Anonymous]

Hi all. Is there anywhere there is a step-by-step for this process? My level of proficiency with JS and CSS are quite low so to me this thread is super confusing.

[Kim_Wieczner]

Has anyone tried just including a rich text field inside the progressive profiling? If it is not referencing a particular data point but just displaying text, will it display for every visitor?

[SanfordWhiteman]

Has anyone tried just including a rich text field inside the progressive profiling? If it is not referencing a particular data point but just displaying text, will it display for every visitor?

Yes, it will continue to display (and will take up one of the ProgPro slots), but that doesn't change the order of Always-On fields → ProgPro fields.

[Alexei_Lisnic1]

Hello Sanford Whiteman,

Thanks for all the instruction you gave above.

I've implemented your script (MktoForms2 :: Override Field Order 1.0.0 ) and it works like a charm. I've managed to reorder and mix Progressive Profiling fields with required fields as needed.

The only problem with it that this script won't let you include Rich text in this reordering, and it will always be placed at the very top of the form.

I'm not very good at JS, but as I understood from your code tagging script works based on "data-wrapper-for" property, and Rich Text do not have one of those.

Do you have any idea how can I include Rich text into this whole reordering process? 

[SanfordWhiteman]

Add an <input type="hidden" name="whateverNameYouWantToUse"> to the RTA. This field need not exist in Marketo, it's just a locator for the RTA.

Also, there's a later version of the helper scripts out there. Will link when I'm back in my office.

[ChristinaZuniga]

Sanford Whiteman​ I'm having a problem with this as well. A few years ago you shared this code with me (see below) and I put it on my landing page as an HTML element (I use free form landing pages). It worked for the past few years, but now is no longer working. Here's a link to my landing page: Lessons Learned: The Growth of a Pediatric Telehealth Platform

Any recommendations? Maybe the code no longer works after a few years of Chrome / Firefox updates (it's doing this in both). Your help is much appreciated, especially from someone who does not know much CSS!

<script>

function moveMktoFieldsToBottom(fieldNames) {

  for ( i = 0; i < fieldNames.length; i++ ){

    var elementToMove = $('[for="' + fieldNames[i] + '"]').parents(".mktoFormRow");

    try {

      elementToMove.insertBefore(".mktoButtonRow");

    } catch(err) {

      console.log("Error: " + err.message);

    }

  }

}

</script>

<script src="//app-ab11.marketo.com/js/forms2/js/forms2.min.js"></script>

<script>

MktoForms2.whenReady(function(form){

    moveMktoFieldsToBottom(['globalOptIn']);

});

</script>

[SanfordWhiteman]

Actually I'm pretty sure that isn't my code, but rather Justin C. (Marketo's) take on the same thing. Or maybe I've changed my coding style a lot since then but it doesn't look like the way I structure things now.

In any case I have a brand new, sleek method (prompted by Kevin Delgado's awesome work with CSS flexbox) that I recommend instead. Demo/code here: MktoForms2 :: Override Field Order v2.0.0 - via Flexbox (h/t Kevin Delgado)

[Anonymous]

Thank you Sanford, your JS script is working like a charm. I keep bumping into your answers a lot, you're helping so many people with your awesome solutions.

I'm using visibility rules on the form and with that the field reordering was not working as the script is using .whenReady(), which only fires once when rendering the page.

I changed .whenReady() to .onFormRender() so the script loads every time the form is altered by the visibility rules.

Just wanted to add this in case anyone is using this script with visibility rules.

Marketo writes more on this on their API reference page: http://developers.marketo.com/javascript-api/forms/api-reference/

[SanfordWhiteman]

I'm using visibility rules on the form and with that the field reordering was not working as the script is using .whenReady(), which only fires once when rendering the page.

The demo page doesn't use whenReady, it uses whenRendered.

whenRendered fires on every re-render. (In fact, the demo page has a Visibility Rule on Website -- it only shows if the first Webinar Date radio is selected.)

You actually don't want to use onFormRender, you want whenRendered. onFormRender will not fire for the initial form load if the event binds after the form is in the page. whenRendered will fire every time including the first time.

[Anonymous]

Thank you for your answer! I was referring to the whenReady on the right-side JS script here: MktoForms2 :: Demo :: Override Field Order 1.0.2