Move progressive profile window

Anonymous
Not applicable

Move progressive profile window

Within the Marketo form I can create a progressive profiling window that defaults to a position right above the Submit button.  Within the Progressive Profiling window I can drop multiple fields that will show to the customer (whether I want 1, 2 or 3 at a time) if they are empty to gather more info. 

After I add in a subscription box it looks like this:

pic1.jpg

And I want the progressive profiling (in this case the date of birth field) to be right under the email address.

pic2.png

Does anyone know coding I could use and where/how to insert it to move it?

Thanks!

16 REPLIES 16
SanfordWhiteman
Level 10 - Community Moderator

Re: Move progressive profile window

Wasn't this answered on your other current thread Move Progressive Profiling field on Marketo form​ which in turn refers to my code at Progressive profiling fields above required fields?

Anonymous
Not applicable

Re: Move progressive profile window

I just moved it.  I'm not a developer/coder, so I'm trying to sort through the post, "Progressive profiling fields above required fields? ".

I'm a bit confused as to what code to put where to make the fields movable.  The posts jump back and forth between JS, CSS and HTML.  I have "https://codepen.io/figureone/pen/qroomy "  up and I have the embed code box pulled up for the form, but I'm not sure what to put where at this point.

SanfordWhiteman
Level 10 - Community Moderator

Re: Move progressive profile window

Can you close the other thread you have open now, then we'll come back here?  I don't know why there are 2 with the same exact topic.

Anonymous
Not applicable

Re: Move progressive profile window

I didn't see it in the Champions space.  More than happy to delete it.

SanfordWhiteman
Level 10 - Community Moderator

Re: Move progressive profile window

You can click the link in my post above and it'll take you there.

SanfordWhiteman
Level 10 - Community Moderator

Re: Move progressive profile window

"https://codepen.io/figureone/pen/qroomy " up and I have the embed code box pulled up for the form, but I'm not sure what to put where at this point.

As you can see in the JS pane of that Pen, the order is set in the fieldOrder array:

var fieldOrder = ["FirstName", "ArchiveMarketoLastDT__c", "Email", "LastName"];

In Form Editor, the field setup looks like this:

pastedImage_2.png

While in the Pen, after reordering, it looks like this:

pastedImage_5.png

Anonymous
Not applicable

Re: Move progressive profile window

I see how you did it.  I just don't know how to take the Embed code =

<script src="//folio.umc.org/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1285"></form>

<script>MktoForms2.loadForm("//folio.umc.org", "078-JXQ-643", 1285);</script>

and put that into codepen to restructure my form and from there which code to take and where to place it to make the form live.  I'm probably over my head, but eager to learn.

SanfordWhiteman
Level 10 - Community Moderator

Re: Move progressive profile window

If your default embed code is

<script>MktoForms2.loadForm("//folio.umc.org", "078-JXQ-643", 1285);</script>

that's the same as this code in the CodePen JS pane

var instanceURL = '//folio.umc.org',

    munchkinId = '078-JXQ-643',

    formId = 1285;

MktoForms2.loadForm(instanceURL, munchkinId, formId);

I hate hard-coding values in function calls. You should only do it if there's some reason to value brevity over clarity (if you're trying to learn to code, there's almost never a case for less clarity!). Even though I write tight and sometimes self-consciously tricky code, making the purpose of arguments clear is important.

Of course you also need your form 1285 in the HTML pane instead of my form 174.

Anonymous
Not applicable

Re: Move progressive profile window

As always, thanks for your help Sanford. I'm having the same struggles as Robert. I have this embed code:

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

<form id="mktoForm_2320"></form>

<script>MktoForms2.loadForm("//app-e.marketo.com", "689-LLU-525", 2320);</script>

And I'm not sure what to add to this to reorder fields. I need my "phone" PP field above my RT field. Am I creating new code and if so, where do I add that?

Thanks!