Lightbox form on click of form button

[Anonymous]

Hi all,

This has been killing me for the past few days. We have an email unsubscribe form where the user enters their email address in and clicks the submit button that Marketo provides in their form building studio. I want to make it so a lightbox form appears when the user clicks submit asking them if they're sure.

I have found code that works, but it creates a new button, which wouldn't retain the information from the user input because it's a separate deal. I have successfully edited the CSS styling of the button but when I put the code for the pop-up form in there, it doesn't work (of course). I don't seem to be able to access the hard code of the form so that I can attach the lightbox to the initial form's button.

Is there any way to do this? Once again, I've got a separate button to produce a lightbox form on click, but I can't get the first form's button to do the same thing.

For reference, this is the code I'm using for the seperate button: MktoForms2 :: Lightbox onClick - JSFiddle

(I place it in an HTML box on the landing page)

Thank you!!!!

[SanfordWhiteman · Accepted solution]

Doing this with two different forms is overkill, and will unnecessarily increase page load time. If the first button is never allowed to submit anything, it shouldn't be part of a full-fledged form.

Instead have the first button and text box fill in hidden fields on the lightbox form. MktoForms2 :: Lightbox onClick - Pre-form

[Anonymous]

Hi Sanford!

Thanks so much, this is a much better solution.

I've tried implementing it, but there is one issue: upon visiting the landing page, the lightbox form appears on the page until you click the button, in which case it reappears properly as a lightbox. I'm not really sure what to do -- it worked initially, and while I changed a couple of style options, I replaced the code again with the unaltered version and it's still having issues. Any idea?

[SanfordWhiteman]

Be sure to check the CSS in the Fiddle as the last 2 rules are related to your situation.

[Anonymous]

Great! It's working now, thanks!!

One last question while I'm here -- I'm having trouble getting the "required" tag to work. It also is not checking the emails to make sure the user enters valid input. I've played around with altering some of the HTML but I haven't been successful (some of the alterations I've taken from other guides cause the lightbox button to no longer work, or nothing changes).