Progressive profiling fields above required fields?

Hey @Sanford Whiteman‌,

I'm hoping you can help?  I've just added your code from here: 

https://codepen.io/figureone/pen/ZoVeRy/ 

To my landing page template for this landing page: 

eBook | Automation Integration Drives Customer Experience 

And the order of the fields doesn't seem to be changing at all.

I'm not sure if I've put all the code in the correct places?

Thanks

Julz

Hi @Sanford Whiteman‌ 

I've implemented your script on a non-Marketo landing page (Unbounce) to reorder the tickbox to always be at the bottom of the form while using progressive profiling and it's not working :/ I am getting the following error message:

When I open up that error message, it is referencing this part of the script:

This is what's been embedded in the html of the landing page (I've edited some of the sensitive values for privacy purposes):

<script id="teknklFormsPlus-tag-0.2.2" src="https://www.company.com/blog/ReorderingJS1.js"></script>
<script id="teknklFormsPlus-reorder-0.2.3" src="https://www.company.com/blog/ReorderingJS2.js"></script>
<script src="//app-lon05.marketo.com/js/forms2/js/forms2.min.js"></script>
<div class= "enquiryFormWrapper">
<form id="mktoForm_2086"></form>
<script> MktoForms2.loadForm("//app-lon05.marketo.com", "555-ZZZ-555", 2086);
</script> 
<script> MktoForms2.whenReady(function(form){
jQuery(document).ready(function($) {
$('.mktoButton').text("Inscribir") }); 
form.vals({"bizLPproducttarget":"ATS"});
form.onSuccess(function(values,followUpUrl){ 
location.href = "https://hello.company.com/demo-solicitada/ats"; 
return false; 
}); 
var formEl = form.getFormElem()[0],
submitButtonRow = formEl.querySelector(".mktoButtonRow");

var fieldOrder = [
"companyOptIn",
"companyRGPD", 
submitButtonRow
];
FormsPlus.reorderFields(form, fieldOrder);

});</script>
</div>

Any idea why?

Thanks in advance!

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/

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

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?

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.

This is an awesome workaround, as I'm trying to do the same thing, but for some reason, I can't get it to work on my end. Is it only the one snippet of code in the rawHTML section that needs to be added?