A

Anonymous

Solved

Progressive profiling fields above required fields?

Forum|Forum|11 years ago
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.

Marketo

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

Adam_Vavrek1

Level 8

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

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

Actually quite easy to reposition any sibling elements like this.

A

Anonymous

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

SanfordWhitemanAccepted solution

Level 10

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

A

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

Level 10

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

SanfordWhiteman

Level 10

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

F

florenzoNIP

Level 2

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.

A

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.

Jenn_DiMaria2

Level 10

This is an awesome workaround, as I'm trying to do the same thing, but for some reason, I can't get it to work on my end. Is it only the one snippet of code in the rawHTML section that needs to be added?

SanfordWhiteman

Level 10

Yes, although that's a really old method and now I'd do it like this:

MktoForms2 :: Reorder Fields

Jenn_DiMaria2

Level 10

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?

A

Anonymous

Hi all. Is there anywhere there is a step-by-step for this process? My level of proficiency with JS and CSS are quite low so to me this thread is super confusing.

Kim_Wieczner

Level 3

Has anyone tried just including a rich text field inside the progressive profiling? If it is not referencing a particular data point but just displaying text, will it display for every visitor?

Kim Burditt

SanfordWhiteman

Level 10

Has anyone tried just including a rich text field inside the progressive profiling? If it is not referencing a particular data point but just displaying text, will it display for every visitor?

Yes, it will continue to display (and will take up one of the ProgPro slots), but that doesn't change the order of Always-On fields → ProgPro fields.

Alexei_Lisnic1

Level 1

Hello @Sanford Whiteman,

Thanks for all the instruction you gave above.

I've implemented your script (MktoForms2 :: Override Field Order 1.0.0 ) and it works like a charm. I've managed to reorder and mix Progressive Profiling fields with required fields as needed.

The only problem with it that this script won't let you include Rich text in this reordering, and it will always be placed at the very top of the form.

I'm not very good at JS, but as I understood from your code tagging script works based on "data-wrapper-for" property, and Rich Text do not have one of those.

Do you have any idea how can I include Rich text into this whole reordering process?

ChristinaZuniga

Level 9

@Sanford Whiteman I'm having a problem with this as well. A few years ago you shared this code with me (see below) and I put it on my landing page as an HTML element (I use free form landing pages). It worked for the past few years, but now is no longer working. Here's a link to my landing page: Lessons Learned: The Growth of a Pediatric Telehealth Platform

Any recommendations? Maybe the code no longer works after a few years of Chrome / Firefox updates (it's doing this in both). Your help is much appreciated, especially from someone who does not know much CSS!

function moveMktoFieldsToBottom(fieldNames) {

for ( i = 0; i < fieldNames.length; i++ ){

var elementToMove = $('[for="' + fieldNames[i] + '"]').parents(".mktoFormRow");

try {

elementToMove.insertBefore(".mktoButtonRow");

} catch(err) {

console.log("Error: " + err.message);

}

</script>

MktoForms2.whenReady(function(form){

moveMktoFieldsToBottom(['globalOptIn']);

});

</script>

SanfordWhiteman

Level 10

Actually I'm pretty sure that isn't my code, but rather Justin C. (Marketo's) take on the same thing. Or maybe I've changed my coding style a lot since then but it doesn't look like the way I structure things now.

In any case I have a brand new, sleek method (prompted by Kevin Delgado's awesome work with CSS flexbox) that I recommend instead. Demo/code here: MktoForms2 :: Override Field Order v2.0.0 - via Flexbox (h/t Kevin Delgado)

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded