Need help with form that is duplicating in Lightbox

[WDesign]

I currently have a page that displays the form in a Lightbox when clicking a button. There are two instances on the page that opens the form. One in the hero and another at the bottom of the page.

The form uses a custom thank you script as well. I’ve included the code for each form instance (Lightbox) and the custom script below for the thank you.

First form Lightbox:

<a href="#inline" class="btn dream-btn" data-lity>Let's Talk</a>

Second form Lightbox:

<a href="#inline" class="btn dream-btn" data-lity>Let's Talk</a>

Marketo form script/lightbox code:

<!-- form pop up -->

     <div id="inline" style="overflow:auto;background:#ffffff;padding:20px;width:600px;max-width:100%;border-radius:6px" class="lity-hide">

      <script src="//offers.premierinc.com/js/forms2/js/forms2.min.js"></script> <form id="mktoForm_5050"></form> <script>MktoForms2.loadForm("//offers.premierinc.com", "381-NBB-525", 5050);</script>

<div id="confirmform" style="visibility:hidden;overflow:auto;background:#ffffff;padding:20px;width:600px;max-width:100%;border-radius:6px;color:#000000;text-align:center"><p><strong>Thank you for your interest. A member of our team will be in touch soon.</strong></p></div>

    </div>

The issue I’m having is that the form is being called twice and duplicating in the Lightbox. For the life of me I con’t figure out why this is happening. Why would this be showing up twice?

Here is a link to the Marketo landing page in question:

https://offers.premierinc.com/Remote-Surveillance-Test

I appreciate any help on this!

[SanfordWhiteman · Accepted solution]

You can't have the loadForm call inside the lightboxable element! That means Lity, because it has no reason to think otherwise, will run the code again. So it's basically doing what you ask (even though you didn't realize you were asking).

You must put scripts outside the lightbox area unless you deliberately want them to run again:

<script src="https://offers.premierinc.com/rs/381-NBB-525/images/lity2.js"></script>
<link rel="stylesheet" href="https://offers.premierinc.com/rs/381-NBB-525/images/lity.css">
<div id="inline" style="overflow:auto;background:#ffffff;padding:20px;width:600px;max-width:100%;border-radius:6px" class="lity-hide">
   <form id="mktoForm_5050"></form>
   <div id="confirmform" style="visibility:hidden;overflow:auto;background:#ffffff;padding:20px;width:600px;max-width:100%;border-radius:6px;color:#000000;text-align:center">
      <p><strong>Thank you for your interest. A member of our team will be in touch soon.</strong></p>
   </div>
</div>
<script src="//offers.premierinc.com/js/forms2/js/forms2.min.js"></script>
<script>
   MktoForms2.loadForm("//offers.premierinc.com", "381-NBB-525", 5050);
</script>
<a href="#inline" class="btn dream-btn" data-lity>Let's Talk</a>

[WDesign]

Thanks so much!! That did the trick. I assumed it was something minor. Make total sense. Thanks again.