Marketo form checkbox styling issue

[SanfordWhiteman]

Dave, the specific reason I didn’t make that suggestion is that a Checkboxes set with a single checkbox isn’t supposed to behave the same way as a Checkbox.

There is currently a bug (I’ve written about it before) that makes the forms library behave as you want here. But it’s a bug that may be fixed at any time, so you can’t rely on it. When it’s fixed, your form breaks.

By design, a Checkbox manages a boolean field in both directions, sending “yes” if it’s checked and “no” if it’s unchecked. This works reliably.

By design, a checkbox within a Checkboxes set is different. It sends a value if it’s checked, but it will not send a value if it’s unchecked — thus leaving the server value as-is.

But due to a coincidental bug, if you have a single checkbox within a Checkboxes set and its value is “yes”, the library misinterprets the original type as being Checkbox. (Rather than consulting the actual type checkbox as it should, it duck-types the field and guesses it’s a single_checkbox based on the value attribute.) It then proceeds as if it were a Checkbox with the two possible values “yes” and “no”. But again, this isn’t supposed to be the case. The Checkboxes value “yes” should be no different than “yass”.

[Dave_Roberts]

Thanks for the explanation here, appreciate it. Any idea when/if this bug is going to get addressed? 

[SanfordWhiteman]

Can’t say. Probably not until there’s another major version of the library? But I’m sure it wasn’t not intentional.

Btw to work around it and have a Checkboxes set work as it should with only one visible checkbox, add a second checkbox (it doesn’t matter what value it has, no one will ever see it) and hide it with CSS:

/* hide extra checkbox used to fix checkboxes bug */
.mktoForm .mktoLabel[for="Unsubscribed"] ~ div input:not(:first-child),
.mktoForm .mktoLabel[for="Unsubscribed"] ~ div input:not(:first-child) ~ label {
  display: none;
}

Since there’s more than one checkbox in the DOM, even if not shown to the end user, Marketo won’t accidentally treat the set as a single. Now if the checkbox is unchecked the server value will be untouched.

[Disha_Goyal6]

Hi @Yavor_Todorov,

You can achieve the desired result by using the below CSS

.mktoFieldWrap {
    display: flex;
    flex-wrap: wrap;
}
label#LbltemporaryEmailOptIn {
    order: 2;
}
.mktoGutter.mktoHasWidth {
    display: none;
}
.mktoForm .mktoFormRow .mktoRadioList, .mktoForm .mktoFormRow .mktoCheckboxList {
    width: auto !important;
    padding: 0 !important;
    float: left !important;
    margin-top: -5px !important;
}

Thanks,

Disha