Multiple CTA's but only one form

[Anonymous]

Hello -

I've been looking for hours, and have tried to Frankenstein some thread results together to do what I want, but it's not working.  We have a page on our site that has thumbnails of gated video content.  When the user clicks a thumbnail, I would like a lightboxed form to appear and when submitted have a hidden value passed to Marketo along with the standard form data.  The catch is I would like to use just the one form, but the same concept for the other thumbnails, but each would have a different value for the hidden field. Example: there are 4 thumbnail images on the page -  and when image 1 is clicked the form appears and the hidden field value of "video1" is submitted with the other data to Marketo, and then the person is taken to Video 1 to play it.  Same scenario for the second thumbnail - same form as thumbnail 1, but the hidden value would be "video2" and the destination would be Video 2 to play it; and so on for thumbnail 3 and 4, all using just one form.

Possible? Without pulling out hair?

[Jay_Jiang · Accepted solution]

Quite easy to do with some html and javascript knowledge. You would also need some Marketo forms API knowledge.

A basic scaleable solution would be to use onclick in the <a> tag that opens the lightbox form

        <a href="#video1" onclick="lightbox(this)" desc="video1">Video 1</a><br/>
        <a href="#video2" onclick="lightbox(this)" desc="video2">Video 2</a><br/>
        <a href="#video3" onclick="lightbox(this)" desc="video3">Video 3</a><br/>
        <script src="//###-###.marketo.com/js/forms2/js/forms2.min.js"></script>
        <form id="mktoForm_#"></form>
        <script>
        function lightbox(a){
            var hf = a.getAttribute("desc");
            MktoForms2.loadForm("//###-###.marketo.com", "###-###-###", formid, function (form){
                MktoForms2.lightbox(form).show();
                form.vals({ "hidden_field_name":hf});
                form.onSuccess(function(values, followUpUrl) {
                    location.href = "https://youtube.com/watch?v=" + hf;
                    return false;
                });
            });
        }
        </script>

You'll need to find a naming convention for your videos so the dynamic redirects work with what ever you put in "desc"

There would also be plenty of other ways to achieve what you want though.

[Anonymous]

Sorry, but doesn't work.

[Anonymous]

Sorry - I jumped the gun - it works sort of.  When the lightbox appears the form is duplicated inside the lightbox.

[Anonymous]

With some plaing around and making some slight changes - the foundation of this script does work - thank you!

[SanfordWhiteman]

P.S. Should use data-desc instead of just desc (data- prefix is for all nonstandard attrs).