Skip to main content
Anonymous
Apr 1, 2015 12:43 AM UTC
Solved

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.
    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    SanfordWhiteman
    SanfordWhitemanAccepted solution
    User Group Leader
    Apr 1, 2015 2:28 PM UTC
    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 in thread

    57 replies

    Adam_Vavrek1
    Adam_Vavrek1
    Level 8
    Apr 1, 2015 1:36 AM UTC
    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!
    Translate
    SanfordWhiteman
    User Group Leader
    SanfordWhitemanUser Group Leader
    User Group Leader
    Apr 1, 2015 3:04 AM UTC
    C'mon boys, live a little: http://pages.vaneck.com/ProgPro-Sample-1.html

    Actually quite easy to reposition any sibling elements like this.
    Translate
      Anonymous
      Apr 1, 2015 12:05 PM UTC
      @sanford, OK, so how did you do it?
      Translate
      SanfordWhiteman
      User Group Leader
      SanfordWhitemanUser Group LeaderAccepted solution
      User Group Leader
      Apr 1, 2015 2:28 PM UTC
      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.)
      Translate
        Anonymous
        Aug 8, 2017 8:23 PM UTC

        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?

        Translate
        SanfordWhiteman
        User Group Leader
        SanfordWhitemanUser Group Leader
        User Group Leader
        Aug 8, 2017 8:30 PM UTC

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

        Translate
        SanfordWhiteman
        User Group Leader
        SanfordWhitemanUser Group Leader
        User Group Leader
        Apr 2, 2015 5:59 AM UTC
        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).
        Translate
          florenzoNIP
          Level 2
          Mar 25, 2021 4:21 PM UTC

          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. 

          Translate
          Anonymous
          Apr 2, 2015 11:35 AM UTC
          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.
          Translate
          Jenn_DiMaria2
          Jenn_DiMaria2
          Level 10
          Mar 21, 2017 12:41 PM UTC

          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?

          Translate
          SanfordWhiteman
          User Group Leader
          SanfordWhitemanUser Group Leader
          User Group Leader
          Mar 22, 2017 2:52 AM UTC

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

          MktoForms2 :: Reorder Fields

          Translate
            Jenn_DiMaria2
            Jenn_DiMaria2
            Level 10
            Mar 23, 2017 3:37 PM UTC

            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?

            Translate
            Anonymous
            Aug 23, 2017 9:04 PM UTC

            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.

            Translate
            Kim_Wieczner
            Kim_Wieczner
            Level 3
            Mar 6, 2018 9:37 PM UTC

            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?

            Translate
            Kim Burditt
            SanfordWhiteman
            User Group Leader
            SanfordWhitemanUser Group Leader
            User Group Leader
            Mar 6, 2018 10:12 PM UTC

            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.

            Translate
            Alexei_Lisnic1
            Alexei_Lisnic1
            Level 1
            May 25, 2018 10:47 AM UTC

            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? 

            Translate
            ChristinaZuniga
            ChristinaZuniga
            Level 9
            Jun 1, 2018 6:38 PM UTC

            @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!

            <script>

            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>

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

            <script>

            MktoForms2.whenReady(function(form){

                moveMktoFieldsToBottom(['globalOptIn']);

            });

            </script>

            Translate
            SanfordWhiteman
            User Group Leader
            SanfordWhitemanUser Group Leader
            User Group Leader
            Jun 1, 2018 6:49 PM UTC

            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)

            Translate
              Show more replies
              Terms & ConditionsAccessibility statement

              Loading footer...