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

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.

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.

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:

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>

 

 

Bao L, thank you soooo much for the code sample, finally the lightbox pops up as you'd expect.

But... our CMS uses .NET and according to our devolopers (external company) the above code isn't compatible with .NET?!?

Apparently you're not allowed to use <form> tags on .NET rendered pages. This sounds like BS to me, but you never know.

Anyone else having problems getting Marketo to run on .NET hosted sites?

Bao, your code worked for me as well, thank you!

One thing that can improve the code slightly is to change the href from "#" to "javascript:;" . The reason why is that the "#" always takes you to the top of the page before the lightbox pops up, which can detract from the user experience, especially if the link is towards the middle or bottom of the page. Using "javascript:;" eliminates that problem and loads the lightbox without changing your spot on the page. 

Hello,

Thanks to this thread, I got this working too. And thanks Lucho for that little trick - the # was driving me nuts!

My question is how do I modify the code to have mutliple links on a page (non marketo landing page). I have a page with the same event in different cities, on different dates. I want the user to click on the register button and have the form pop up for that city/date.
 

I've tried changing the ID like so (see bold)  but it doesn't work. When i click, nothing happens. 

<!-- NOVEMBER 12 EVENT -->

<a href="javascript:;" id="dec11" class="noarrow"><img src="register-purple.jpg"></a>

Kasia

OK, I've tried both scripts above (using <a href="#" id="lightbox-link">LINK</a>) with no luck. I tried both a button and a link. The script is in an html box above and to the left of the html link and sized large enough to hold the form should it choose to pop. Doesnt pop up and I cant seem to see an error message. 

http://pages.rolandsystemsgroup.com/Corp-Broadcast-LP-Test.html 

scripts I tried are:

<script src="//app-ab08.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_1017">&nbsp;</form>
<script>
  var btn = document.getElementById("lightbox-link");
  btn.onclick = function(){
    MktoForms2.loadForm("//app-ab08.marketo.com", "743-DOW-924", 1017, function (form){
      MktoForms2.lightbox(form).show();
    });
  };
</script>
.........................
and
.........................
<script src="//app-ab08.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_1017">&nbsp;</form>
<script>
  $jQ('#lightbox-link').click(function(){MktoForms2.loadForm("//app-ab08.marketo.com", "743-DOW-924", 1017, function (form){MktoForms2.lightbox(form).show();});});
</script>

Thats what I use.
It also reload the LP and overwrites the form confirmation opening yours in a new tab.

<script>$(document).ready(function(){
  $(".cta").dblclick(function(e){
    e.preventDefault();
  });
});
</script>
<script type="text/javascript">
$('.cta').click(function(){MktoForms2.loadForm("//YOURNUMBER.marketo.com", "743-DOW-924", 1017, function (form){MktoForms2.lightbox(form).show();

form.onSubmit(function (){
window.open('', 'myWindow');
});
form.onSuccess(function(values, followUpUrl){
window.open('http://YOURASSET', "myWindow" );

location.reload();
return false; 
      
        });
});


});
</script>
<script src="//app-sj07.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_1017"></form>



------
<div class="cta">
Your button or whatever
</div>