SOLVED

Progressive profiling fields above required fields?

Go to solution
Anonymous
Not applicable

Progressive profiling fields above required fields?

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.
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Progressive profiling fields above required fields?

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

View solution in original post

57 REPLIES 57
Adam_Vavrek1
Level 9 - Champion Alumni

Re: Progressive profiling fields above required fields?

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!
SanfordWhiteman
Level 10 - Community Moderator

Re: Progressive profiling fields above required fields?

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

Actually quite easy to reposition any sibling elements like this.
Anonymous
Not applicable

Re: Progressive profiling fields above required fields?

@sanford, OK, so how did you do it?
SanfordWhiteman
Level 10 - Community Moderator

Re: Progressive profiling fields above required fields?

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
Not applicable

Re: Progressive profiling fields above required fields?

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
Level 10 - Community Moderator

Re: Progressive profiling fields above required fields?

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

Anonymous
Not applicable

Re: Progressive profiling fields above required fields?

What is the standard embed code?

SanfordWhiteman
Level 10 - Community Moderator

Re: Progressive profiling fields above required fields?

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

pastedImage_0.png

SanfordWhiteman
Level 10 - Community Moderator

Re: Progressive profiling fields above required fields?

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