Issue with Form Checkboxes in Bottom Element

[anandrajs786]

Hi Team,

We’ve encountered an issue with the form checkboxes in one of our pages and would appreciate your help in resolving it.

Here’s the scenario:

• We have used the same form in two different elements on the page.

• In the top element, the form checkboxes are working perfectly fine.

• However, in the bottom element, the form checkboxes are not working.

• Also, sometimes the form got duplicated and shown under the original form
  
  We’ve tried isolating the issue by keeping only the bottom element on the page, but the checkboxes still don’t function as expected. Interestingly, the same form works correctly when embedded in the top element.

Additional details:

• The checkboxes are added with customized styling.

• We’ve checked for duplicate IDs, missing classes, and potential JavaScript/CSS conflicts, but the issue persists.

Could someone please take a look and help us identify the root cause? Any suggestions or guidance on how to fix this would be greatly appreciated.

Thanks in advance!

[SanfordWhiteman]

First: your code is deeply buggy as it reinjects a new copy of the form every time you load the lightbox, so you can end up in practice with infinite Marketo form objects.

You shouldn’t be doing it that way: you only require one copy of the form that will be moved in and out of the lightbox on demand.

---

• We have used the same form in two different elements on the page.

---

You have 2 different form IDs in use on this page (1566 and 1574), not just 2 copies of the same form.

Having 2 copies of the same form, without doing anything further to differentiate them, is worse than using multiple form IDs. But both are prone to error. The simple reason is you’ll have elements with duplicate id attributes — which are of course also your <label for> targets. This leads to <label>s targeting elements outside the current/visible form.

---

• Also, sometimes the form got duplicated and shown under the original form

---

This is due to the bug described above, where you’re mistakenly reloading the entire form instead of just moving it in/out of the lightbox modal.

---

• In the top element, the form checkboxes are working perfectly fine.

• However, in the bottom element, the form checkboxes are not working.

---

Can you please include a screenshot of the 2 forms in question and explain exactly what you mean by “not working”? Do you mean they’re literally not clickable? What browser+version are you seeing this in?

[SanfordWhiteman]

@anandrajs786 please return to your thread and check responses.