Move progressive profile window

[Anonymous]

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:

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

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

Thanks!

[SanfordWhiteman]

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]

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]

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]

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

[SanfordWhiteman]

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

[SanfordWhiteman]

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

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

[Anonymous]

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]

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]

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!