Display Specific Marketo Form in Lightbox in an AEM page containing Multiple Forms

Question

Hello Community!

I am trying to use the Marketo Lightbox form on an AEM Landing page which already contains multiple Marketo forms. The idea is to display a specific form in Lightbox when a link is clicked. Currently, the script used is displaying all the Marketo forms in Lightbox overlapping each other.

I tried to insert the form using the attribute but it doesn't work.

Ex -

lightbox(form[data-formid=19103]).show();

Any suggestions would be appreciated!

<script>
MktoForms2.whenReady(function (form) {
$(".Form1").click(function ()
{ MktoForms2.lightbox(form).show(); });
});
</script>

SanfordWhiteman · Accepted Answer

Please use the syntax highlighter ("Insert/Edit Code Sample") in future, thanks. I edited your post this time.

I am trying to use the Marketo Lightbox form on an AEM Landing page which already contains multiple Marketo forms. The idea is to display a specific form in Lightbox when a link is clicked. Currently, the script used is displaying all the Marketo forms in Lightbox overlapping each other.<script> MktoForms2.whenReady(function (form) { $(".Form1").click(function () { MktoForms2.lightbox(form).show(); }); }); </script>

Well yes, that’s exactly what you told it to do! The code above adds a click even listener to the button whenever a form is ready. So if forms 1, 2, 3 are ready then the button has three listeners. Each one opens the corresponding form in a lightbox because the value of form is stored in a closure.

If you want to filter by form id, use the form.getId() method.

<script>
{
  const lightboxTriggers = new Map();
  lightboxTriggers.set(1234, ".Form1");  

  MktoForms2.whenReady(function (form) {
    let formId = form.getId();
    if(lightboxTriggers.has(formId)) {
      $(lightboxTriggers.get(formId)).click(function (){ 
        MktoForms2.lightbox(form).show(); 
      });
    }
  });
}
</script>

I don’t like the use of magic numbers in code proper, thus a Map is used as a separate config block.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded