SOLVED

Progressive profiling fields above required fields?

Go to solution
SanfordWhiteman
Level 10 - Community Moderator

Re: Progressive profiling fields above required fields?

Ah, that older demo page had whenReady. Fixed now. I thought you were using the 2.x branch!

In any case -- you want whenRendered, not onFormRender.

Kelly_Sheetz
Level 2

Re: Progressive profiling fields above required fields?

Hi Sanford,

I am using your MktoForms2 :: Demo :: Override Field Order 1.0.2

Using one of our forms, I have the reorder working like a charm! MktoForms2 :: Demo :: PP Override Field Order 2018

However, when I add the same script tags to the Landing Page via program token, something is breaking and reorder isn't working: https://pages.awscloud.com/TestingPPRe-order_01.LandingPage.html

Thanks in advance for your help!

SanfordWhiteman
Level 10 - Community Moderator

Re: Progressive profiling fields above required fields?

However, when I add the same script tags to the Landing Page via program token, something is breaking and reorder isn't working: https://pages.awscloud.com/TestingPPRe-order_01.LandingPage.html

Because it's effectively commented out:

pastedImage_2.png

Maybe you have the open-close comment tags in the template or something but the final effect is that the scripts are all wrapped in comments!

Kelly_Sheetz
Level 2

Re: Progressive profiling fields above required fields?

Thanks, Sanford. We fixed the comment tags issue, however, it still doesn't seem to be reordering: Title & Header

Here is the code pen again for reference: MktoForms2 :: Demo :: PP Override Field Order 2018

SanfordWhiteman
Level 10 - Community Moderator

Re: Progressive profiling fields above required fields?

Ah, you have to download an host those JS files yourself to use them outside of the demo, you can't just hotlink to them from your site:

pastedImage_1.png

Not that I mind the bandwidth but don't want to get involved w/the direct hosting responsibility

Ashley_Omphroy2
Level 1

Re: Progressive profiling fields above required fields?

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:

Screenshot 2019-08-30 at 13.54.33.png

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

Screenshot 2019-08-30 at 13.55.40.png

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!

SanfordWhiteman
Level 10 - Community Moderator

Re: Progressive profiling fields above required fields?

Can you please highlight that code using the Advanced Editor's syntax highlighter? I can't read it otherwise.

In any case custom form behaviors use Marketo's MktoForms2 global object. So behavior JS must load after the forms2.min.js library, which creates that object.

Julz_James
Level 10

Re: 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