MktoForms2 :: Lightbox onClick

by sanford

HTML

<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<script>
    MktoForms2.loadForm('//app-sj01.marketo.com', '410-XOR-673', 116);
    MktoForms2.whenReady(function(form) {
      document.querySelector('#lightboxButton').addEventListener('click', function(e) {
        form.addHiddenFields({
          Email: Email.value
        });
        MktoForms2.lightbox(form).show();
      });
    });
</script>
<form id="mktoForm_116"></form>
<input id="Email" type="email" placeholder="Email address" required>
<button id="lightboxButton">Unsubscribe Me</button>

CSS

BODY {
  background-image: url(http://placekitten.com/g/200/300);
}

BUTTON#lightboxButton,
INPUT#Email {
  border: 2px outset white;
  background-color: white;
  padding: 4px;
  border-radius: 4px;
  line-height: 12px;
}

.mktoForm {
  visibility: hidden;
  position: absolute;
}
.mktoModal .mktoForm {
  visibility: visible;
  position: static;
}