6 Replies Latest reply on Dec 2, 2017 12:18 AM by Sanford Whiteman

    Flexibility of the form layout with progressive profiling

    Taishi Yamada

      Hi,

      I would like to change the order of fields in the form with progressive profiling. I know we can change the order in progressive profiling target filed and non-target field each. But, I couldn't find out the method to set the order likes "fixed fields / progressive profiling fields / fixed fields". It looks Marketo accepts only "fixed filed / progressive profiling fields".

      Is there any way to change the order?

      as typical case, I would like to show "agreed policy" check box fields above the "submit" button always. but, I couldn't put the agreed policy one as fixed field when I enabled progressive profiling.

       

      Regards,
      -Taishi

        • Re: Flexibility of the form layout with progressive profiling
          Grégoire Michel

          Hi Taishi,

           

          This can only be done using Javascript.

           

          -Greg

          1 of 1 people found this helpful
            • Re: Flexibility of the form layout with progressive profiling
              Molly Cousins

              Hi Sanford -

               

              Do you have a recommendation for how to amend this JS to reference multiple form IDs? We use this on our master Landing Page template. I have several different forms (Content, Event Reg, etc) that I swap in, but have only had success when declaring one formID.

               

              I have tried the following:

              • "formId = 1234, 1235, 1236;"
              • "formId = 1234;" "formID = 1235;" "formId = 1236;"  (separate lines)

               

              I have also just submitted this to Marketo Support, but anticipate this will not be a supported topic I'll get assistance with.

               

              Any help would be much appreciated! I am not looking forward to the alternative of multiple templates, one for each formId... kind of defeats the purpose of a true master template

                • Re: Flexibility of the form layout with progressive profiling
                  Sanford Whiteman

                  Yeah, those approaches couldn't help.

                   

                  var myVariable = 123;
                  var myVariable = 456;
                  var myVariable = 789;
                  

                   

                  The above just resets the value of the myVariable variable. It only has one value at a time and will end up with the last value.

                   

                  var myVariable = 123, 456, 789;
                  

                   

                  The above not only doesn't work, but is a JavaScript syntax error: the script will error out completely because the comma-delim'd list following a var must all be valid variable names. (Which cannot start with a number.)

                   

                  myVariable = 123, 456, 789;
                  

                   

                  The above (without the var) is not a syntax error but also can't have the desired result.  Because of the way the JS comma operator works, you just end up setting myVariable to the first value 123.

                   

                  Aaaaanyway, the above is just for anyone learning to code.

                   

                  If you're using my code on a Marketo LP with named Form elements (not the embed code) you don't need the call to loadForm()(and you don't need to set the variables).  Marketo injects the form for you. You just need to put my whenReady() function before the closing </body> tag.

                    • Re: Flexibility of the form layout with progressive profiling
                      Molly Cousins

                      Gotcha. I'm not a JS person (hack my way around HTML/CSS just fine, though) so I figured that was probably my issue.

                       

                      For context, I have a LP template containing custom JS (listing a custom field order) to force our opt-in checkbox below progressive fields. It works great... until I insert a different form.

                       

                      I'm going to try tokenizing the formID in the code - hopefully that approach will work and I won't need multiple landing page templates just so my various forms will display correctly.

                       

                      Thanks!

                        • Re: Flexibility of the form layout with progressive profiling
                          Sanford Whiteman

                          You don't need different templates, certainly!

                           

                          And if you just want to switch the reordered fields based on the current form id, do it like this:

                           

                          var formId = form.getId(),
                            fieldOrder;
                          
                          switch (formId) {
                            case 10002:
                              fieldOrder = [ 'these', 'fields', 'in', 'this', 'order'];
                              break;
                            case 10003:
                              fieldOrder = [ 'these', 'other', 'ones', 'in', 'order' ];
                              break;
                          }
                          

                           

                          or

                           

                          var fieldOrderByForm = {
                            10002 : [ 'these', 'fields', 'in', 'this', 'order' ],
                            10003:  [ 'these', 'other', 'ones', 'in', 'order' ]
                            },
                            formId = form.getId(),
                            fieldOrder = fieldOrderByForm[formId];
                          
                          1 of 1 people found this helpful