8 Replies Latest reply on May 18, 2018 12:24 PM by Sanford Whiteman

    Form Fields Question

    Calon Alpar

      Hello,

       

      I'm trying to create a field with visibility rules to appear when specific countries are selected (Yes GDPR related). But I want this at bottom, but I can't seem to put it below progressive profiling fields. Is there a work around this? I want the permission to email field at the bottom of form.

       

      Screen Shot 2018-05-17 at 1.31.45 PM.png

        • Re: Form Fields Question
          Sanford Whiteman

          You'll need to include FormsPlus::Tag and FormsPlus::Reorder, which are both linked in this CodePen: MktoForms2 :: Demo :: Override Field Order 1.0.1  (Download those 2 JS files and re-host on your server.)

           

          Then the 1-2 lines of code, as shown in the demo, to choose field order.

            • Re: Form Fields Question
              Calon Alpar

              Hi thanks. I'm not the web developer on my team so just want to clarify.

              Where are we hosting this? On our website or within Marketo somewhere?

               

              Calon Alpar

               

              Demand Generation Manager

               

              Movable Ink

               

              5 Bryant Park, 9th Floor | New York, NY 10018

               

              O: 512-731-9639| movableink.com

               

               

              Come join us in pioneering the evolution of digital marketing - We're

              Hiring! <https://movableink.com/careers>

               

               

              On Thu, May 17, 2018 at 2:18 PM, Sanford Whiteman <

                • Re: Form Fields Question
                  Sanford Whiteman

                  It's safest to host it on your website, not Marketo, since Marketo has trouble consistently serving JS files from Design Studio (other file types are fine).

                    • Re: Form Fields Question
                      Calon Alpar

                      My knowledge isn't great when it comes to website hosting. Where

                      specifically should I tell my web dev to host both the html and Js? Once

                      it's inserted, within design studio can I then drag the fields anywhere?

                       

                      Calon Alpar

                       

                      Demand Generation Manager

                       

                      Movable Ink

                       

                      5 Bryant Park, 9th Floor | New York, NY 10018

                       

                      O: 512-731-9639| movableink.com

                       

                       

                      Come join us in pioneering the evolution of digital marketing - We're

                      Hiring! <https://movableink.com/careers>

                       

                       

                      On Thu, May 17, 2018 at 3:01 PM, Sanford Whiteman <

                        • Re: Form Fields Question
                          Sanford Whiteman

                          Once it's inserted, within design studio can I then drag the fields anywhere?

                          No, it doesn't change the functionality of Form Editor. It adds form reordering via a couple of lines of JS.

                           

                          Where specifically should I tell my web dev to host both the html and Js?

                          There isn't any HTML or CSS to worry about. It's just the two JS files.

                           

                          You should tell the dev to save them wherever s/he typically puts 3rd-party JS libraries.

                  • Re: Form Fields Question
                    Jay Jiang

                    The following is very specific for the question originally posted, i.e. form has only 1 conditional visibility field, and the field should be moved to the bottom of the form above the submit button

                     

                    Stop using the script if your requirements change.

                     

                    MktoForms2.loadForm("//app-asdf.marketo.com", "munchkin", formid, function(form) {
                    var formEl = form.getFormElem()[0];
                    if(formEl.getElementsByClassName("mktoPlaceholder").length){
                    var visrow = formEl.getElementsByClassName("mktoPlaceholder")[0].parentNode;
                    var btnrow = formEl.getElementsByClassName("mktoButtonRow")[0];
                    formEl.insertBefore(visrow,btnrow)
                    }
                    });
                    
                      • Re: Form Fields Question
                        Calon Alpar

                        Hi Jay,

                         

                        Where are you inserting this? Is this different than the one Sanford gave above? Basically I want a field below the Progressive Profiling box.

                          • Re: Form Fields Question
                            Sanford Whiteman

                            Jay's snippet is for the specific case where the first field that is subject to Visibility Rules -- regardless of what field that is -- is the one you want to move to the bottom of the form, just above the Submit button.

                             

                            Jay bundled it with part of the form embed code, which might be confusing you. It actually stands alone like so, and you don't need to alter anything you've already got, just add this after the standard Forms 2.0 embed code (also shortened the snippet, as long as we're going for the lightest-weight approach):

                             

                            <script>
                            MktoForms2.whenReady(function(form){
                              var formEl = form.getFormElem()[0],
                                  firstRowWithVisRule = formEl.querySelector(".mktoPlaceholder").parentNode,
                                  submitButtonRow = formEl.querySelector(".mktoButtonRow");
                                  
                              if (firstRowWithVisRule) {
                                formEl.insertBefore(firstRowWithVisRule,submitButtonRow);
                              }
                            });
                            </script>
                            

                             

                            However (as Jay cautions) this code won't work anymore if you change your form structure (order of fields and/or number of fields w/VRs) because you aren't telling it anything about the real form field names, just the form field positions as of this point in time.

                             

                            For code that continues to work even if you change how the form looks/behaves, you'd include the 2 FormsPlus scripts, then call reorderFields like this:

                             

                            <script>
                            MktoForms2.whenReady(function(form){
                              var fieldOrder = ["PermissionToEmail"];
                              reorderFields(fieldOrder);
                            });
                            </script>
                            

                             

                            Where PermissionToEmail is of course the name of the field you're targeting. As you can see, the site-specific code here is even shorter than the standalone code snippet above, but you do have to grab copies of the FormPlus JS for this to work. If that's proving too difficult you can use the standalone/single-use way.  Note also that you don't have to include the FormsPlus scripts as external <script src> tags and host the files anywhere. If it's easier, you can just copy-paste the code + copyright and paste into 2 local <script> blocks. Put those <script>s above the <script> that calls reorderFields is all.

                            1 of 1 people found this helpful