Open a lightbox from a text link | Community
Skip to main content
Level 2
June 13, 2014
Solved

Open a lightbox from a text link

  • June 13, 2014
  • 6 replies
  • 3394 views

Hi Guys, I am using Teamsite, and having a bit of difficulty with this.  I have the embedded script code provided by the form, but when I just paste it in, it obviously just loads the form every time the page loads.  I would like it so that the customer clicks "Register Now" as an HTML link, and then that opens the Lightbox.  Here is the embed code as an example.

<script src="//app-sj03.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_1206"></form>
<script>MktoForms2.loadForm("//app-sj03.marketo.com", "896-JNU-907", 1206, function (form){MktoForms2.lightbox(form).show();});</script>

Thanks a lot everyone!
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
If I understand correctly, when the user clicks the register link you want the lightbox to appear. Before that event happens, you do not want it to appear. You can solve this using JavaScript. 


Step 1: Embed this on your page
<script src="//app-sj03.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_1206"></form>
<script>function showMessage() {
MktoForms2.loadForm("//app-sj03.marketo.com", "896-JNU-907", 1206, function (form){MktoForms2.lightbox(form).show();});
};</script>
 
Step 2: Change your "Register Now" link to this format
<a href="#" onclick="showMessage();">Register Now</a>


Let me know if this approach works. 

6 replies

Accepted solution
June 13, 2014
If I understand correctly, when the user clicks the register link you want the lightbox to appear. Before that event happens, you do not want it to appear. You can solve this using JavaScript. 


Step 1: Embed this on your page
<script src="//app-sj03.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_1206"></form>
<script>function showMessage() {
MktoForms2.loadForm("//app-sj03.marketo.com", "896-JNU-907", 1206, function (form){MktoForms2.lightbox(form).show();});
};</script>
 
Step 2: Change your "Register Now" link to this format
<a href="#" onclick="showMessage();">Register Now</a>


Let me know if this approach works. 
Level 2
June 13, 2014
Hello Murtza, that is phenomenal.  I must be just flat out tired.  I cannot believe I missed something so basic. The form loads perfectly now.  Thank you very much for your immediate reply.  You guys are awesome!
When life lends you lemons, make applesauce.
June 13, 2014
Matthew,

Keep in mind your reporting should be focused on the actual form fill and page visit with this solution , the hash link will not be tracked...


June 13, 2014
No problem, I'm happy to help!

Don makes a good point. You will have to keep this in mind when you are doing your reporting. If you wanted to take this a step further and track clicks on the Register Now link, you could call the Munchkin tracking code when that event happens. 

Please check out the Click Link section here: 
http://developers.marketo.com/documentation/websites/lead-tracking-munchkin-js/
Level 2
June 13, 2014
I was actually going to be looking into that with our Omniture Specialist.  Thank you for providing that link as well.  As an aside, If this form data is collected by Salesforce, I assume this will continue to work when the submit button is clicked?

We are very new to the Marketo program, so I am just getting started with it.

Lastly, if we assume the tracking does not work as you have suggested, is there an alternative that you can suggest.  Teamsite can often be extremely challenging, and on certain pages, Javascript will not execute.  In fact I was surprised it did not automatically delete all the script code when I pasted it in.  It has a nasty tendency to do that. LOL! 
When life lends you lemons, make applesauce.
June 13, 2014
The submit button will continue to work as expected. 

In terms of tracking, this is one of those things that you are getting to have to test out and see. Your Omniture specialist should be able to help. Just make sure he or she is aware of the change that was made.