Lightbox form open on click

[Anonymous]

Hello! I'm trying to create a form where a privacy box pops up upon clicking submit. We only want to allow the submit action on the initial form if they click agree on the pop up.

This is what I've put on my test landing page:

<form id="mktoForm_2319" class="mktoForm"></form>

<button id="Sumit"

        class="open-lightbox"

        data-mktoform-id="2319">Submit</button>

<button id="openMktoLightboxFooter"

        class="open-lightbox"

        data-mktoform-id="2319"

Unfortunately, the lightbox is popping up upon entry to the page: http://info.sdl.com/formtest.html

Any clue what I've done wrong? And how to prevent the submit action unless Agree is clicked? Thanks for any advice.

[SanfordWhiteman]

The code above isn't actually on your sample page.

What's happening on the LP you linked to is clear: you have a call to loadForm() and you immediately lightbox the form.

It also looks like you're using an entirely different form for the Privacy Policy popup. I *definitely* wouldn't do it this way. While it lends the advantage of having the MktoForms lightbox() function available to wrap the popup,  it's a relatively massive amount of overhead. What I'd do is keep the Privacy text in a Rich Text area on the form. Hide it by default and show it on a popup as necessary.

[Anonymous]

Thanks, Sanford. Once someone clicks agree, we're populating a field indicating this. Could I make the rich text field visible only to people for whom this "agree" field isn't populated? As always, thanks for your guidance.

[SanfordWhiteman]

Sure. At its most basic, something like this: MktoForms2 :: /nation/40408

The RT in this case is the 3rd-last form row so I'm just directly targeting it in the CSS.  In production I would hide all rows to start, dynamically detect what section has the hidden RT area, then unhide the others.  (It's useful with advanced forms behaviors to pre-process the form elements while the form is still hidden.)

[Anonymous]

Thanks, Sanford. I'm a bit lost, I'm sorry to say. Where exactly is it that I would plug in the Javascript to make this magic happen?

[SanfordWhiteman]

In a <script> tag, after the <script> that loads forms2.min.js.

All advanced forms behaviors use methods on the MktoForms2 object. This object doesn't exist until the Forms2 JS library has been loaded.