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

Andy_Penkalski
Andy_Penkalski
New Participant
April 14, 2016

Not sure if this thread is still getting much traffic, but I could really use some help getting this click-to-open function working on one of our landing pages: Advicent | Financial Planning Technology

I've attempted to apply the code to our "Free Two-Week Trial" button on our Profiles product within that page, but no tinkering within the source code has gotten it to work.

I could really use another set of eyes. Thanks

SanfordWhiteman
SanfordWhiteman
New Participant
April 14, 2016

What browser are you testing in?

Here's Chrome 48:

FF 37:

Andy_Penkalski
Andy_Penkalski
New Participant
April 14, 2016

I've been testing in chrome. That's weird that you were able to get the form to come up.

I've since been able to get this to work after bugginf a friend of mine who's better with java script and he provided the code below, which solved my issue.

<script type="text/javascript">

$(function () {$('#lightbox-profiles').click(function () { MktoForms2.loadForm("//app-sj09.marketo.com", "841-KAP-325", 1035, function (form) { MktoForms2.lightbox(form).show(); }); }); });

</script>

His explanation being that the script "just needed a doc ready function since it's jquery".

A
Anonymous
June 12, 2015

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?

A
Anonymous
September 17, 2015

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

A
Anonymous
May 6, 2015
Wa-hoo!!  I got it to work - thank you!
A
Anonymous
January 28, 2015
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.
Diego_Lineros2
Diego_Lineros2
New Participant
January 5, 2015
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>
A
Anonymous
December 16, 2014
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>
T
thekasia
New Participant
October 10, 2014

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

Lucho_Soto
Lucho_Soto
New Participant
September 17, 2014
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. 
A
Anonymous
April 16, 2014
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?
A
Anonymous
April 16, 2014
Bao L, thank you soooo much for the code sample, finally the lightbox pops up as you'd expect.
Show more replies
Terms & ConditionsAccessibility statement

Loading footer...