Your Achievements
Level 1
0% to
Level 2
Next /
to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
Open Alert Bar
SOLVED

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

Go to solution
Anonymous
Not applicable
‎01-29-2014 01:24 PM
‎01-29-2014 01:24 PM

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

Great! Glad to see it worked. 
0 Likes
1,816
Reply
Anonymous
Not applicable
‎03-06-2014 05:48 AM
‎03-06-2014 05:48 AM

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

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>
0 Likes
1,816
Reply
Anonymous
Not applicable
‎03-07-2014 01:23 AM
‎03-07-2014 01:23 AM

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

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.
1,816
Reply
Anonymous
Not applicable
‎03-07-2014 01:30 AM
‎03-07-2014 01:30 AM

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

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.

1,816
Reply
Anonymous
Not applicable
‎03-07-2014 02:00 AM
‎03-07-2014 02:00 AM

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

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
0 Likes
1,816
Reply
Edward_Masson
Level 10
Level 10
‎03-07-2014 07:17 AM
‎03-07-2014 07:17 AM

Re: 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.
1,816
Reply
Anonymous
Not applicable
‎03-19-2014 08:25 AM
‎03-19-2014 08:25 AM

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

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.
0 Likes
1,816
Reply
Anonymous
Not applicable
‎03-20-2014 03:18 PM
‎03-20-2014 03:18 PM

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

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?
0 Likes
1,816
Reply
Anonymous
Not applicable
‎04-15-2014 10:10 AM
‎04-15-2014 10:10 AM

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

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>


 

 

1,816
Reply
Kim_Meyers
Level 4
Level 4
‎02-05-2016 10:24 AM
‎02-05-2016 10:24 AM

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

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>

0 Likes
1,816
Reply
Home