Lightbox form opening when button is clicked | Community
Skip to main content
A
Anonymous
June 30, 2015
Question

Lightbox form opening when button is clicked

  • June 30, 2015
  • 3 replies
  • 7279 views

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

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    3 replies

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    June 30, 2015

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

      A
      Anonymous
      December 14, 2016

      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

      A
      Anonymous
      December 14, 2016

      Nevermind, figured it out!

        A
        Anonymous
        July 1, 2015

        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
        SanfordWhiteman
        Level 10
        July 1, 2015

        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.

        A
        Anonymous
        October 16, 2017

        @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
        SanfordWhiteman
        Level 10
        October 16, 2017

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

        A
        Anonymous
        October 16, 2017

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

        Terms & ConditionsAccessibility statement

        Loading footer...