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

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

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

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