Skip to main content
June 21, 2017
Question

Lightbox form open on click

  • June 21, 2017
  • 1 reply
  • 4363 views

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

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

1 reply

SanfordWhiteman
Level 10
June 21, 2017

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.

June 21, 2017

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
Level 10
June 22, 2017

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