10 Replies Latest reply on Dec 13, 2017 8:00 PM by Sanford Whiteman

    Open lightbox on form submit

    Jo Pitts

      All,

      I've got a Marketo form on a Marketo landing page.  I have progressive profiling enabled on the form.

       

      What I'd love to be able to do is, when the user clicks the submit button, show a lightbox that says something like 'thanks for the info, feel free to keep right on 'fessing up, and tell us more'.  If they close the lightbox, the form needs to refresh with the new progressive fields displayed.

       

      It seems that I need more access to the HTML than is provided.  It looks like I could use the jquery simple popup, but I believe that would need access to the HEAD tag of the page.  However, this isn't my area of expertise so I'd love some advice as to how to achieve my goal.

       

      Cheers

      Jo

        • Re: Open lightbox on form submit
          Sanford Whiteman

          Did you search on the title of your post?  I've provided a demo of lightbox-on-submit in the past.

           

          If they close the lightbox, the form needs to refresh with the new progressive fields displayed.

          You can't just refresh the form for this, you have to refresh the LP.*  In general, you must be careful w/assumptions about how fast form posts are reconciled with lead records. It's not a synchronous process: it's fast or fast-ish, but not immediate.

           

           

          * Technically, you can manipulate the filled fields on the fly in the same page, but this doesn't

          account for the full range of ProgPro cases (i.e. fields that where not present on the form but which are non-empty.

            • Re: Open lightbox on form submit
              Jo Pitts

              Sanford,

              I'd googled the heck out of it, but hadn't searched the community itself (doh!)

               

              I presume this is the thread you are talking about? Lightbox form open on click

               

              I'm working through how to actually implement this.  Fingers crossed I'll get there.  I love your coding and energy.. I just need a few more comments in the code (things like /*Create a custom HTML block on your LP and put code from here to the next comment*/).. to make it extra easy for numpties like me

               

              Cheers

              Jo

                • Re: Open lightbox on form submit
                  Sanford Whiteman

                  Look at MktoForms2 :: nation/43232

                   

                  In the onSuccess, I'm replacing the content (using innerHTML, you could use a pure DOM method if you want). The content contains a link, which when clicked navigates to the Thank You URL (which would be the same page, if you were using the default behavior).

                    • Re: Open lightbox on form submit
                      Jo Pitts

                      Sanford,

                      That sample code is awesome.  Even I can understand what is going on

                       

                      I notice you are loading the form yourself rather than using a marketo LP.   I've been told this makes field pre-filling a bit tricky.  Any thoughts on how to handle that?

                       

                      Cheers

                      Jo

                        • Re: Open lightbox on form submit
                          Sanford Whiteman

                          All my CodePen demos have to use embedded forms, being non-Marketo LPs... you just need the whenReady call on a Marketo LP (put it before the closing </body> tag).

                            • Re: Open lightbox on form submit
                              Jo Pitts

                              Gotcha.  I have (of course) made things complicated by having the form being chosen by segment.  I might back that out for now so I have a known form ID to work with.

                               

                               

                              I'm off to find the wizard, the wonderful wizard of oz (well, actually - I'm off to find the munchkin ID ).

                               

                               

                              Thanks for the help.  I'm slowly getting my JS, HTML, CSS up to spec.

                               

                               

                              Cheers

                               

                              Jo

                                • Re: Open lightbox on form submit
                                  Sanford Whiteman

                                  Don't know if I would use the Form ID directly in this case (since if you clone forms things break).

                                   

                                  Instead, output the segment name into JS and have the Forms API code switch on, f.e. countrySegmentationSegment.

                                    • Re: Open lightbox on form submit
                                      Jo Pitts

                                      Sanford,

                                      it transpires I don't need the form ID at all.  you were using that to do your load.  the LP is doing the form loads for me.  All I need to do is wait for it to be ready.

                                       

                                      I've got to this point with my code (unstyled by CSS thus far)

                                      <Script>

                                      MktoForms2.whenReady(function(form) {

                                      var formEl = form.getFormElem()[0],

                                      submitEl = formEl.querySelector('BUTTON[type="submit"]');

                                       

                                       

                                      form.onSuccess(function(vals, thankYouURL) {

                                      formEl.innerHTML = '<DIV><P>Thanks for sharing,  The better we know you the better we can help you.  If you have a moment, click the button to tell us a bit more about you.</P><A href="javascript:window.location.reload(true)">I would love more help</A></DIV>';

                                      MktoForms2.lightbox(form).show();

                                      return false;

                                      });

                                      });

                                      </Script>

                                       

                                      What in your infinite wisdom would you be doing differently?  I'm going add in styling for the lightbox itself, and then styling for the <P> and the <A> (to make it a CSS button).  Am I on the right track on mighty Jedi?

                                      • Re: Open lightbox on form submit
                                        Jo Pitts

                                        Sanford, thanks to your help, I've got things going exactly how I want.

                                        Some thank you text in the lightbox, two buttons - one to go the main site, one to provide more details, and I even managed to turn off the close button.

                                        Sheesh, no line breaks the inner HTML and don't forget to escape all your single quotes!!!!!

                                        I'm feeling stoked right now mate - and it is all because of your legendary (and very patient) help.

                                         

                                        Cheers

                                        Jo

                            • Re: Open lightbox on form submit
                              Jo Pitts

                              Sanford,

                              I'm going to have a play - at this point my best guess is your CSS goes into the form custom CSS and the script goes into the LP?

                               

                              Let me see what I can learn and/or break