SOLVED

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

Go to solution
Anonymous
Not applicable

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

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-

Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Anonymous
Not applicable

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

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.

View solution in original post

33 REPLIES 33
Anonymous
Not applicable

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

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>

Anonymous
Not applicable

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

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
Level 10 - Community Moderator

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

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();

   });

}

Anonymous
Not applicable

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

Ahhh... Thank you Sanford.

Anonymous
Not applicable

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

Thank you for your help! I will give this a try and let you know.
Anonymous
Not applicable

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

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-
Anonymous
Not applicable

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

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.
Anonymous
Not applicable

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

Nice, this is helpfulz!

Anonymous
Not applicable

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

Thank you very much Jason! It works. I appreciate your help!