Lightbox form opening when button is clicked

[Anonymous]

Hi all,

I am sure this has already been looked at but I simply cannot find the thread!...

Is there a way to make a form appear in a lightbox when clicking on a button?

I am very bad at coding....

Thank you in advance.

Michael

[Anonymous]

Sanford Whiteman​

Thanks for posting this, I used your code but I'm not sure why it doesn't load, I'm guessing it's the "" vs " ? can you help me fix please:
https://jsfiddle.net/#&togetherjs=ClGkK43UNN

Create a new fiddle - JSFiddle https://jsfiddle.net/#&togetherjs=ClGkK43UNN

Thank you!

[SanfordWhiteman]

What exactly isn't working here, and what's the empty string you're referring to?

[Anonymous]

my form doesn't pop up when I click. I'm trying to refer to my form 3939

[SanfordWhiteman]

In which browser + version?

[Anonymous]

chrome and the jsfiddle and also firefox too. Am I missing something? I see in the original embed code I have this:

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

<form id="mktoForm_3939"></form>

<script>MktoForms2.loadForm("//app-ab14.marketo.com", "961-UXG-821", 3939, function (form){MktoForms2.lightbox(form).show();});</script>

[SanfordWhiteman]

It works for me in Chrome 50, FF 53.

[Anonymous]

even in jsfiddle you see it popping up?

[SanfordWhiteman]

Yep.

[Anonymous]

I for the life of me cannot get this to work. I have a Marketo hosted page with this code

in the body:

<div>

<form id="mktoForm_1225"></form>

<button  onclick="MktoForms2.whenReady(function(form){ MktoForms2.lightbox(form).show(); })">Sign Up to Learn More</button></div>

</div>

This in the Head: <script src="//app-ab26.marketo.com/js/forms2/js/forms2.min.js"></script>

and this in the CSS:

.mktoForm { display: none; }

.mktoModal .mktoForm { display: block; }

Any ideas as to how I'm implementing this incorrectly?

[SanfordWhiteman]

Pls open a new thread and post a link to your real page.

[Anonymous]

Thanks Sanford that's perfect!

I have two little questions:

1. Are these type of forms enabling auto fill? Meaning even if they are in a lightbox, if the lead is known, will they auto populate?

2. Maybe too much asking but is there possibility to add a style to this button when embedding the form?

Michael

[SanfordWhiteman]

1. In the demo, that's an embedded form on a third-party page, so by definition it doesn't support prefill (this has nothing to do with the lightbox). On a Marketo-hosted LP, it will prefill -- but you also have to make sure it doesn't show by default in that case.  On the Marketo LP, you'd do this with CSS like:

.mktoForm { display: none; }

.mktoModal .mktoForm { display: block; }

And the button's onclick becomes:

MktoForms2.whenReady(function(form){ MktoForms2.lightbox(form).show(); })

2. Yes, the BUTTON tag is as style-able as any HTML button.  You can find lots of examples and guides out there.  I updated the demo just to show rounded borders and whatnot.

[SanfordWhiteman]

You can't avoid some coding, even if that means cut-and-paste.

I put the simplest possible demo here.  (Didn't use JavaScript best practices in this case to keep it as short as possible.)

[Anonymous]

Hello Sanford,

thanks a lot for this, works great! I also managed to center the lightbox with your solution on a different post.

One thing though, how can i add a second button with the same lightbox and form, but located on a different section of the page? I tried but then the second button doesn´t work, and the form shows up twice in the lightbox.

Maybe you have already handled this somewhere but i couldn´t find another post.

Thanks,

Michael

[Anonymous]

Nevermind, figured it out!