Progressive profiling fields above required fields? | Community
Skip to main content
A
Anonymous
April 1, 2015
Solved

Progressive profiling fields above required fields?

  • April 1, 2015
  • 13 replies
  • 14817 views
Is it possible to have a required field below the progressive profile fields? For example, I want to display name and email (required fields always displayed) and then phone number and zip code as progressive profile fields with an email opt in field (required) at the very bottom. Maybe this takes two forms, but then how can there be only one submit button? Perhaps there is a different way to handle the opt in field. Appreciate any help.
    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by SanfordWhiteman
    It's there in the page source: standard JS methods to find and move the form element. There are a number of ways to find the element. For simplicity in the demo, I used the CSS + combinator to find the 3rd input (ProgPro1) and move it up top. (I used + to ensure backward compatibility; :nth-child would work too, but it's not in IE 8.)

    13 replies

    Show previous replies
    A
    Anonymous
    June 14, 2018

    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
    SanfordWhiteman
    Level 10
    June 14, 2018

    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.

    A
    Anonymous
    June 15, 2018

    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

    Ashley_Omphroy2
    Ashley_Omphroy2
    Level 1
    August 30, 2019

    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!

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    August 30, 2019

    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.

    J
    Julz_James
    Level 8
    January 16, 2020

    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

    Terms & ConditionsAccessibility statement

    Loading footer...