Lightbox form on guided landing pages | Community
Skip to main content
Andy_Penkalski
Andy_Penkalski
New Participant
May 4, 2016
Solved

Lightbox form on guided landing pages

  • May 4, 2016
  • 2 replies
  • 4458 views

I'm having trouble figuring out a way to add a lightbox to a guided landing page. We've recently started using the guided pages to build instead, and it's not an issue using

<div class="mktoForm" id="exampleText" mktoName="Example Text Area"></div>

whenever we're embedding directly to the page, but I can't exactly figure out how to apply this detail to a button without the form just then replacing the button.

Here is a page we are currently attempting to place a lightbox on in regards to its "Send me Updates" button : Advicent Innovation Summit 2016 | Toronto

I'd love to determine a fix for this as it would make form tracking better from within marketo if we can have the landing page recognize the form placement.

Best answer by SanfordWhiteman

If you're asking how to both have a true Form element (rather than using the embed code) and have it only show in a lightbox, the answer is to hide the form element by default and bind the button to MktoForms2.whenReady() in a <script> block.

2 replies

A
Anonymous
May 13, 2016

We use a colorbox in a similar fashion.

We basically use colorbox with an iframe, and the contents of the iframe is just the form on a blank landing page. This way, the form actually is on a page (though its URL is different from the parent page) but we still get to utilize the colorbox styling for that "pop-up" appearance. This is also setup within a guided landing page template for us, so when editing/creating the parent page we have a variable built in where you just paste in the url of [what we call] the "form page" (iframe contents) into the variable field.

Shoot me a message if you want more detail on how we have this setup in our instance.

SanfordWhiteman
SanfordWhiteman
New Participant
May 13, 2016

But in your case the conversion is going to be attributed to the IFRAMEd pseudo-LP, as opposed to the LP the person landed on.

Andy wants to use Marketo's ability to track form fillout conversions by LP.  This only works if you use a true Marketo Form element on the LP. It won't work with a script that happens to embed a form, nor with an IFRAME that happens to contain a page that happens to contain a form.

I wonder why you chose to do it this way with the Colorbox, instead of drawing the Marketo form directly inside the Colorbox?  Like in MktoForms2 :: Colorbox. That would save you all this:

A
Anonymous
May 16, 2016

This is much more intuitive actually, and now I have something I want to look into for our setup.

Not to Hijack Andy's thread, but to answer your question why it's done this way is due to it mostly being the process I inherited. Simply pasting in a new "form Page" url into the landing page builder was an easy/scalable process they didnt want me to change. Me being new to Marketo, I didn't think to try and set it up differently. Now I know I can, so thanks!

SanfordWhiteman
SanfordWhitemanAccepted solution
New Participant
May 4, 2016

If you're asking how to both have a true Form element (rather than using the embed code) and have it only show in a lightbox, the answer is to hide the form element by default and bind the button to MktoForms2.whenReady() in a <script> block.

Andy_Penkalski
Andy_PenkalskiAuthor
New Participant
May 12, 2016

I think this is what I'm looking for. The goal is to have marketo recognize the form's placement on the landing page within it's design studio and analytics tool, which doesn't happen when the form is placed with the embed code. My javascript is very weak, so I'm going to see if one of our product developers can work from your direction.

Thanks again

Terms & ConditionsAccessibility statement

Loading footer...