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

[Anonymous]

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

[Anonymous]

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?

[Lucho_Soto]

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. 

[Kasia_Kowalewsk]

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="nov12" class="noarrow"><img src="register-purple.jpg"></a>

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

<form id="mktoForm_1793"></form>

<script type="text/javascript">

$('#nov12').click(function(){MktoForms2.loadForm("//app-abm.marketo.com", "366-UKY-221", 1793, function (form){MktoForms2.lightbox(form).show();});</script>

<!-- DECEMBER 11 EVENT -->

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

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

<form id="mktoForm_1795"></form>

<script type="text/javascript">

$('#dec11').click(function(){MktoForms2.loadForm("//app-abm.marketo.com", "366-UKY-221", 1795, function (form){MktoForms2.lightbox(form).show();});</script>

Thanks,
 

Kasia

[Anonymous]

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>

[Diego_Lineros2]

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>

[Anonymous]

Thanks Bao, for the sample code. Our form resides as an embed in a non Marketo page with no jquery so I've had to use yours.

Additionally, because our button is somewhere in a page with lots of page scrolls, I replaced the a href="#" with a href="#xyz" and simply created <a name="xyz"></a> near that button.

[Anonymous]

Wa-hoo!!  I got it to work - thank you!

[Anonymous]

Having gotten this to work, I tried enabling the Social Form Fill. After clicking one of the three social buttons to do the autofill, a popup comes up that seems to connect to do the autofill but fails. You end up with the popup social fill being redirected to the home page and the lightbox form is not filled out. Is anyone else getting this issue?

[Anonymous]

Patrick - were you able to resolve your issue. We are experiencing the same thing.