SOLVED

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

Go to solution
ssRD
Level 1

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

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>

 

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

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

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.

View solution in original post

2 REPLIES 2
SanfordWhiteman
Level 10 - Community Moderator

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

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.

ssRD
Level 1

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

Hello Sanford,

Thanks a lot for this, works great!!!