Multiple CTA's but only one form | Community
Skip to main content
A
Anonymous
May 1, 2018
Solved

Multiple CTA's but only one form

  • May 1, 2018
  • 1 reply
  • 3276 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Jay_Jiang

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.

1 reply

Jay_Jiang
Jay_JiangAccepted solution
New Participant
May 1, 2018

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.

A
Anonymous
May 1, 2018

Sorry, but doesn't work.

Terms & ConditionsAccessibility statement

Loading footer...