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

[Anonymous]

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-

[Andy_Penkalski]

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]

What browser are you testing in?

Here's Chrome 48:

FF 37:

[Andy_Penkalski]

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".

[SanfordWhiteman]

AFAIK that newer code was on the page when I took my screenshots, which means there's no discrepancy.

It isn't true that Marketo Forms are dependent on document.ready. In fact, it's the opposite: they have their own event model and you shouldn't trust jQuery to know anything about them. HOWEVER... in this case, the <A> to which you're adding the click listener needs to exist before you add the listener. That might have been your problem.

[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.

[Anonymous]

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

[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.

[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]

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>

[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

[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. 

[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?

[Anonymous]

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

[Anonymous]

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>

[Kim_Meyers]

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>

[Anonymous]

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?

[Anonymous]

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.

[Edward_Masson]

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]

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