Progressive profiling fields above required fields?

[Anonymous]

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.

[Victor_Herrero]

Actually, now that I'm having a look at it I have encountered "label", in fact I have had to play around with checkbox labels but more on the CSS and not so much HTML so I hadn't paid attention to the "for"

I didn't know about "data-*" though!

Thanks for clearing it up

[Victor_Herrero]

After reading your scripts (and understanding only like 2% ) I can't really think of a way of differentiating a normal field from a progressive profiling field except perhaps:

1. Marketo only allows for one to be included
2. It's always included at the end

So maybe create another wrapper that tags fields with numbers [1, 2, 3, 4, ..., "lastFieldLoaded"]

Once form is loaded, then determine field order again [1, 2, 3, "lastFieldLoaded", 4, ...]

Don't know, just a very high level idea...

[Jenn_DiMaria2]

Thanks, Sanford! That's exactly what was happening. You're a peach

[Jenn_DiMaria2]

Thanks, Sanford! For some reason, this still isn't working for me. Does it matter if you have hidden fields (for URL parameters) or the max number of ProgPro fields you have?

[SanfordWhiteman]

What's the URL?

Hiddens and the # of fields aren't important. It's basic DOM manipulation so if there aren't any syntax errors and all the code is in place, it'll work.

[Anonymous]

Thanks @Sanford. It gives me plenty to chew on to get forms the way we'd like them. Too bad the tool doesn't have the flexibility to allow more variation of forms.

[SanfordWhiteman]

Here's another way with just CSS: http://pages.vaneck.com/ProgPro-Sample-2.html

But I think the JS way is more elegant and manageable (works for any existing theme CSS).

[florenzoNIP]

This is exactly what I am trying to do! But I am so confused. Can someone send a sample of the code that needs to be edited? And where to access the code in the form? I am very new to Marketo. 

[SanfordWhiteman · Accepted solution]

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.)

[Anonymous]

Very basic question here Sanford... where is this code to edit? We currently use a CMS, rather than Marketo landing pages. Is it in the CMS that these code edits need to happen or somewhere in the marketo form itself?

[SanfordWhiteman]

The Forms 2.0 JS enhancement <script> sits outside of (i.e. in addition to) the standard embed code.

[Anonymous]

What is the standard embed code?

[SanfordWhiteman]

The embed code is what you copy from the Marketo UI to use a form on a 3rd-party site.

[Anonymous]

@sanford, OK, so how did you do it?

[SanfordWhiteman]

C'mon boys, live a little: http://pages.vaneck.com/ProgPro-Sample-1.html

Actually quite easy to reposition any sibling elements like this.

[Adam_Vavrek1]

Hi Jason, 

Unfortunately there is no way to put the required field below the progressive profile fields. I wish there was a way to do it!