1 Reply Latest reply on Nov 4, 2014 1:42 PM by 51406

    Light box form capture before embedded YouTube Video loads.

           Hello Everyone,

           I am trying to setup a landing page that a visitor can go to view a YouTube video in Marketo. I want visitors who have filled out basic information on the linking pages to be able to view it without a form popping up but visitors who have been linked to the page to fill out a brief form before the video loads.

           So what I have done is place a rich text box onto the page and used 2 divs:

       <div id="image">
           <a style="display: block;" onclick="functionOne()" href="#" _mce_style="display: block;" _mce_href="#">
           <img style="width: 460px;" src="Webinar_icon_title.jpg" _mce_style="width: 460px;" _mce_src="Webinar_icon_title.jpg">
           </a>
           </div>

           <div id="video" style="display: none;" _mce_style="display: none;">
           <div class="cf_widgetLoader cf_w_1234567891234567891234_Video"></div>
           </div>

           The image loads on the page load and the video is hidden so the visitor has to click the image of the video to load it. The click calls the javascript function functionOne()

            

           <script  src="//b2c-mlm.marketo.com/jsloader/12345-6789-123456-7891234/loader.php.js;">
           </script>

           <script src="//app-xxxx.marketo.com/js/forms2/js/forms2.js"></script>
           <form id="mktoForm_1000"></form>

           <script type="text/javascript">

           function functionOne() {

            MktoForms2.loadForm("//app-ab04.marketo.com", "789-XYZ-123", 1000, function (form)
             {
              MktoForms2.lightbox(form).show();
              form.onSuccess(function(values, followUpUrl)
              {
              watchVideo();
              return false;
              });
                                   form.getFormElem().hide();

             });  
            }
           }
           function watchVideo() {
                   loadVideo();
                   hideImage();
           }

           function loadVideo() {
            document.getElementById('video').style.display = 'block';
           }

           function hideImage() {
            document.getElementById('image').style.display = 'none';
           }
           </script>


           The code is suppsoed to load the form in a lightbox and the user fills it out and on successful submission the watch video triggers which hides the image and displays the video. But when I run this the watch video sequence is ran dispite the form not being submitted and the visitor only needs to close the video to watch the video without actually filling out the form.

           I was hoping to have just a simple boolean check to see if the visitor was already Marketo cookied but I could not find anything in the API to help with that either.

           Has someone done something like this before and had success in requiring a form be filled out before allowing content to be viewed on the page?

           Issues I have ran into trying to get the code to work have varied from the form refusing to submit to not loading for the submitter after refreshing the page but not allowing the video to load.

           Thanks for any help.

           Dan

            
        • Re: Light box form capture before embedded YouTube Video loads.
          Maybe what you can do place the video in one div and the form (song the javascript embeded code from Marketo) in another div. Then hide the div that contains the video. With javascript check if the marketo cookie exist, or even look for your own cookie. If the cookie does exist, hide the div with the form and show the div with the video. If the cookie does nto exist ask people to fill the form and on formSubmit write a cookie than when the page goes back (make the form to go back to te same page) the video will show up.