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

Anonymous · ‎01-29-2014

Great! Glad to see it worked.

Anonymous · ‎03-06-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>

Anonymous · ‎03-07-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.

Anonymous · ‎03-07-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.

Anonymous · ‎03-07-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

Edward_Masson · ‎03-07-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.

Anonymous · ‎03-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.

Anonymous · ‎03-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:

$('#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?

Anonymous · ‎04-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.

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>

Kim_Meyers · ‎02-05-2016

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

----------

Just replace the bold parts with your info.

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>