Having a button and the embedded lightbox appear when clicked - Forms 2.0 | Community
Skip to main content
A
Anonymous
January 28, 2014
Solved

Having a button and the embedded lightbox appear when clicked - Forms 2.0

  • January 28, 2014
  • 24 replies
  • 7010 views

Hello -

I have a page that I am building (http://www.bkd.com/stay-connected/offices/ar/arkansas-test.htm). I am wanting to add a button and when the button is clicked on the lightbox form shows up. Right now it just appears when the page is refreshed or loaded. My fear is some people will not want to subscribe right away but maybe after they read the page. 

Does anyone know how to accomplish this using the new Forms 2.0?

Ultimately it would be ideal to  have it pop up when the page is loaded and allow them to have the option to bring it back up using a button.

Thank you for your help.
-Marcy-

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
1. The image needs to be wrapped in a link:

<a href="#" id="lightbox-link"><img src="/images/stay-connected/subscribe-button.png"></a>

2. You were just supposed to eliminate that one line from the Marketo embed code; you erased the whole thing. Paste what they give you in Marketo, just remove the line I indicated.

24 replies

A
Anonymous
January 29, 2014
Well, I pulled it off in the Chrome dev console, but haven't fully tested it. Give this a go.

1. Remove this line from your form embed code: <script>MktoForms2.loadForm("//app-sj02.marketo.com", "596-LPQ-505", 71, function (form){MktoForms2.lightbox(form).show();});</script>
Don't worry, we'll add it back.

2. Add a link or button with your desired CTA, with an id="lightbox-link"

3. Add this as Custom HTML to the page:

<script type="text/javascript">
$('#lightbox-link').click(function(){MktoForms2.loadForm("//app-sj02.marketo.com", "596-LPQ-505", 71, function (form){MktoForms2.lightbox(form).show();});});
</script>

A
Anonymous
February 22, 2016

Hello,

I've spent a number of hours trying to get this to work.  I've put together a test page with only part of what I'm working on using 2 different versions of the code I've seen posted here:

mptrms.mckesson.com/test-page.html

Can anyone tell me why I cannot get the form to show in a lightbox when "Download our White Paper" is clicked?

Thanks,
Paul

SanfordWhiteman
SanfordWhiteman
Level 10
February 22, 2016

For one thing, you have a fatal syntax error you would see in the console:

btn.onclick = function() {

MktoForms2.loadForm("//app-sjg.marketo.com", "766-XNA-725", 1616, function(form) {

   MktoForms2.lightbox(form).show();

});

});

Should be:

btn.onclick = function() {

   MktoForms2.loadForm("//app-sjg.marketo.com", "766-XNA-725", 1616, function(form) {

     MktoForms2.lightbox(form).show();

   });

}

A
Anonymous
January 29, 2014
Thank you for your help! I will give this a try and let you know.
A
Anonymous
January 29, 2014
Hey Jason -

Did exactly what you said but it doesn't seem to be working.

http://www.bkd.com/stay-connected/offices/ar/arkansas-test.htm

Any thoughts?

Thanks!
-Marcy-
A
Anonymous
Accepted solution
January 29, 2014
1. The image needs to be wrapped in a link:

<a href="#" id="lightbox-link"><img src="/images/stay-connected/subscribe-button.png"></a>

2. You were just supposed to eliminate that one line from the Marketo embed code; you erased the whole thing. Paste what they give you in Marketo, just remove the line I indicated.
    A
    Anonymous
    February 22, 2016

    Nice, this is helpfulz!

    A
    Anonymous
    January 29, 2014
    Thank you very much Jason! It works. I appreciate your help!
    A
    Anonymous
    January 29, 2014
    Great! Glad to see it worked. 
    A
    Anonymous
    March 6, 2014
    Hmm... I can't get the above to work but perhaps I am doing something wrong. I am thinking about using a standard Jquery lightbox solution instead.

    Here is my attempt, should anyone feel like finding out what's wrong: http://www.thomasnorden.com/sparkform.php

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Marketo Spark Form</title>
    <style type="text/css">
    .mktoModal .mktoModalContent{
    width: 320px;    
    }
    </style>

    </head>

    <body>

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

    <a href="#" id="lightbox-link">Open Form</a></form>

    <script>
    $('#lightbox-link').click(function(){MktoForms2.loadForm("//app-e.marketo.com", "855-NVX-657", 1017, function (form){MktoForms2.lightbox(form).show();});});
    </script>

    </body>
    </html>
    A
    Anonymous
    March 7, 2014
    Hi Thomas,

    Even i faced same problem. Later i sperated the the code in two halves and pasted in different HTML Editors. Now its working fine. 

    below are the codes:

    HTML 1 :

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

    HTML 2 :

    <script>
    $('#lightbox-link').click(function(){MktoForms2.loadForm("//app-e.marketo.com", "855-NVX-657", 1017, function (form){MktoForms2.lightbox(form).show();});});
    </script>

    Rich Text box:

    <a href="#" id="lightbox-link">Open Form</a>

    Please try and let me know.
    A
    Anonymous
    March 7, 2014
    Hi Thomas,

    In you code there are two form close tags

    <form id="mktoForm_1017"></form>

    <a href="#" id="lightbox-link">Open Form</a></form>

    Remove the first close tag and it might work. if not please follow my pervious comment.

    A
    Anonymous
    March 7, 2014
    Thanks Ramesh,
    Your first suggestion is identical to what I already have, as far as I can see. Though I am not quite sure with what you mean by "...two halves and pasted in different HTML Editors."

    Removing the extra form tag didn't solve it either.

    Best Regards,
    Thomas
    Show more replies
    Terms & ConditionsAccessibility statement

    Loading footer...