Possible to use the Form in a Lightbox function on an external non-Marketo page?

[Anonymous]

I have tried all of the community suggestions for making the form in a lightbox work, but they all seem to be for using the form on a Marketo landing page.  I need to have the Marketo form open in the lightbox when a button is clicked on an external site.  Is this possible? Does anyone have examples/code?

I have a separate lightbox code I have used for videos, etc, but brining in the form as an iframe doesn't work because the form is only 600px wide and the lightbox gathers the entire "canvas" from the Marketo landing page, instead of the width I set it to, to match the form width.

Thanks,
Mike

[Anonymous]

Have you seen this blog post?
http://developers.marketo.com/blog/hide-lightbox-after-form-submission/

[Anonymous]

Murtza -

That blog article is good to know, but is not what I am looking for.  I am looking for the MArketo form to appear in a lightbox when a CTA is clicked, not on page load. I have read all the community articles about how to make this happen, but when following them to a tee, it still does not work on our blog site - it seems to only work within a Marketo landing page.  My issue is not how to hide the lightbox, but rather to get it to show up at all.

[Anonymous]

Did you ever find a solution to this? I am desperately trying to do the same thing as you mentioned.

[SanfordWhiteman]

Every example I've ever posted with a lightbox is running on a non-Marketo page (my CodePen account). Search for them.

[Anonymous]

We are using marketo forms in lightboxes (www.a1ssi.com). It did take a while for our web person to figure out.

trigger for the lightbox (with bootstrap):

<div id="button">

<a href="#" title="Schedule" class="schedule" data-toggle="modal" data-target="#" onclick="showForm()">Schedule a Class</a>

</div>

this goes at the bottom of the document before the closing tag (</body>)

<script src="//app-ab17.marketo.com/js/forms2/js/forms2.min.js"></script>

        <script>

function showForm(src="//app-ab17.marketo.com/js/forms2/js/forms2.min.js") {

MktoForms2.loadForm("//app-ab17.marketo.com",

"instance number",

form#,

function (form) {

MktoForms2.lightbox(form).show();

});

}

        </script>

[SanfordWhiteman]

function showForm(src="//app-ab17.marketo.com/js/forms2/js/forms2.min.js") {

This is broken JavaScript in IE and Safari. It uses an ES2015 feature that cannot be used on public sites yet.

If that's fixed, the code isn't "wrong" per se, but it is inefficient because it waits for the button to be clicked before loading the form from Marketo's server.  You don't want to waste those couple of seconds if you're using a lightbox.

The more efficient way is like this: MktoForms2 :: Lightbox on Demand

[Anonymous]

Good information. But for us, this way you provide doesn't work for Chrome or Firefox.

[SanfordWhiteman]

Someone's implementing something wrong. I do all my development in Chrome and Firefox and there is absolutely nothing browser-specific about that code (except I didn't bother with IE8 compatibility).

Go to this page in every modern browser: http://s.codepen.io/figureone/debug/xONmXE

[Anonymous]

I think the issue is that we are currently stuck using bootstrap (which I noted in my original post) so we are technically using a modal, not an actual lightbox. If you look at the code, you see that it is for a modal, not lightbox.