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
  • 6976 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

Show previous replies
A
Anonymous
April 15, 2014

Hey Dan,

I tried the steps above and it didn't work for me either. I looked at your test page, and it looks like it works though! In any case, here's what I did to get it working on a non-marketo webpage, based on info here (http://developers.marketo.com/documentation/websites/forms-2-0/). Just replace the bold parts with your info.



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



<script src="//app-XX01.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_XXXX">&nbsp;</form>
<script>
  var btn = document.getElementById("lightbox-link");
  btn.onclick = function(){
    MktoForms2.loadForm("//app-XX01.marketo.com", "123-ABCD-000", XXXX, function (form){
      MktoForms2.lightbox(form).show();
    });
  };
</script>


 

 

K
kim.meyers
New Participant
February 5, 2016

Thank you for this! Spelling it out like this was really helpful.

----------

Just replace the bold parts with your info.

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

          <script src="//app-XX01.marketo.com/js/forms2/js/forms2.js"></script>

          <form id="mktoForm_XXXX"> </form>

          <script>

            var btn = document.getElementById("lightbox-link");

            btn.onclick = function(){

              MktoForms2.loadForm("//app-XX01.marketo.com", "123-ABCD-000", XXXX, function (form){

                MktoForms2.lightbox(form).show();

              });

            };

          </script>

A
Anonymous
March 20, 2014
I am also having the same issue.  I followed the instructions above to a tee, and cannot seem to get the light box to work.
Here is my test page I'm working on: http://pages.videojet.com/Water-Bottle-Printing-LP-B.html# 

Here is my code I've added to the HTML block:

<script src="//app-sj04.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_1574"></form>
 
<script type="text/javascript">
$('#lightbox-link').click(function(){MktoForms2.loadForm("//app-sj04.marketo.com", "090-BZJ-603", 1574, function (form){MktoForms2.lightbox(form).show();});});
</script>


And here is my code for the Contact Me button:
 
<a href="#" id="lightbox-link"><img src="http://pages.videojet.com/rs/videojet/images/Contact-me-button.png"></a>

Can anyone help me out?  Am I missing something?
A
Anonymous
March 19, 2014
If you're popping this onto an existing Marketo template, you might need to insert a "jQ" after the $ in order to reference Marketo's stock jQuery inclusion. So...

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

If your script isn't working and the console is reporting "Uncaught TypeError: Property '$' of object [object] is not a function" $jQ will likely fix your problem.
Edward_Masson
Edward_Masson
New Participant
March 7, 2014
On the landing page editor there is an HTML block that you drag n' drop on to your LP for code just like this. I think Ramesh means to drag 2 over and seperate the code into each one of the HTML blocks.
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
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
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 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
January 29, 2014
Great! Glad to see it worked. 
A
Anonymous
January 29, 2014
Thank you very much Jason! It works. I appreciate your help!
Show more replies
Terms & ConditionsAccessibility statement

Loading footer...