SOLVED

Re: Removing duplicate checkbox label in Marketo Form

Go to solution
dkonig
Level 3

Removing duplicate checkbox label in Marketo Form

I've added a checkbox to our form and it appears it is creating a second empty label. Any ideas how to remove that?

 

dupe_label.png

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Removing duplicate checkbox label in Marketo Form

MktoForms2.whenRendered(function(mktoForm){
   const arrayify = getSelection.call.bind([].slice);
   
   let formEl = mktoForm.getFormElem()[0],
       emptyLabels = formEl.querySelectorAll("label:empty");
   
   arrayify(emptyLabels)
   .forEach(function(label){
     label.parentElement.removeChild(label);
   })
});

View solution in original post

5 REPLIES 5
SanfordWhiteman
Level 10 - Community Moderator

Re: Removing duplicate checkbox label in Marketo Form

What's your specific reason for needing it to be removed from the DOM?
dkonig
Level 3

Re: Removing duplicate checkbox label in Marketo Form

Mainly for ADA Compliance. Screen readers can get confused seeing two labels and may grab the wrong one.

SanfordWhiteman
Level 10 - Community Moderator

Re: Removing duplicate checkbox label in Marketo Form

They’ll grab the first one in DOM order (which is the one with the ARIA accessible name).
dkonig
Level 3

Re: Removing duplicate checkbox label in Marketo Form

Thanks for responding. Regardless of the order in which the label is grabbed is it possible to remove that second label? I'm getting pushback from the team. They want to make sure they cover their bases for legal reasons and removing that second label would do that.

SanfordWhiteman
Level 10 - Community Moderator

Re: Removing duplicate checkbox label in Marketo Form

MktoForms2.whenRendered(function(mktoForm){
   const arrayify = getSelection.call.bind([].slice);
   
   let formEl = mktoForm.getFormElem()[0],
       emptyLabels = formEl.querySelectorAll("label:empty");
   
   arrayify(emptyLabels)
   .forEach(function(label){
     label.parentElement.removeChild(label);
   })
});