Setting up GTM tracking for form submissions where the checkbox has been checked

[Joanne_Lam]

Hi there,

I've set up form tracking on GTM, but I'm now having issues with tracking specifically form submissions where the opt-in checkbox has also been checked. I've discovered that the ID 

attribute of the checkbox is dynamic, which is why my custom javascript variable no longer works. This is what I have currently (which worked before the last four digits of the ID changed):

function() {
  var checkbox = document.getElementById("LEGAL_CONSENT.subscription_type_6337149-8b3f66b8-292e-411d-a20e-f08f28554e60_7739");
  return checkbox.checked || false;
}

Is there an easy workaround for this, such as selecting the element by an ID that starts with the portion that doesn't change? 

EDIT:

I've replaced it with the following, but it's still not firing:

function() {
var checkbox = document.querySelector('[id^="LEGAL_CONSENT.subscription_type_6337149-8b3f66b8-292e-411d-a20e-f08f28554e60_"]');
return checkbox.checked || false;
}

[WendyGoh]

Hi @Joanne_Lam,

I hope all is well with you 😄

When testing this out in my own portal by creating a form with a legal consent check box: https://share.hsforms.com/1txjHms06RQilN62vK0KEmw2tvo8, I'm not seeing the subscription link ID being dynamic. 

In this case, do you mind sharing with me the Hub ID, the form ID/name and the page that the form is on? So that I can look into things further here!

[Joanne_Lam]

Hi @WendyGoh, 

All's well thank you, and likewise to you 

Thanks for taking the time to respond and look into this as it's had me stumped for a good few days!

Hub ID: 5565170

Form ID: 8b3f66b8-292e-411d-a20e-f08f28554e60 (although when I view the variables summary on Tag Manager when doing a test submission, there are 4 extra digits at the end after an underscore.)

Page: https://resources.symec.co.uk/future-proofing-your-business

[WendyGoh]

Hi @Joanne_Lam,

Thank you for sharing these information across! 

Digging further into this, I can confirm that there has been a recent changes made such that the form is more unique with an additional id that you observe after the underscore. 

If you were previously targeting the ID to style the form, you can use the class name instead (e.g. #hsForm_8b3f66b8-292e-411d-a20e-f08f28554e60 to .hsForm_8b3f66b8-292e-411d-a20e-f08f28554e60). *Changing the # to a .

Keep a look up here: https://developers.hubspot.com/changelog for the detailed change annoucement. 

[Joanne_Lam]

Thanks for the suggestion @WendyGoh!

However, it's actually the dynamic ID of the subscription checkbox that's causing the issue as I can track the form submissions just fine. 

The initial bit of script I used to track the checkbox worked until the next day when I found that the ID had changed. Is there any workaround for this particular issue?

[WendyGoh]

Hi @Joanne_Lam,

The reason I mentioned about the dynamic form id change made recently is because due to the form id change, the check box ID was affected as well. Though the ID may change, the submission will still come through just fine.

You may want to grab the following class element instead:

.hsForm_8b3f66b8-292e-411d-a20e-f08f28554e60 .legal-consent-container .hs-form-booleancheckbox-display input