SOLVED: Checkboxes not appearing in embedded Marketo Form

OK, first: this isn’t the Marketo form’s fault. You have hundreds of custom, form-affecting CSS styles spread across several stylesheets. Naturally if these aren’t built to cooperate with each other, you will have conflicts, since that’s what the CSS cascade is all about!

Second: your CSS (well, some of it!) is trying to hide the actual <input type="checkbox"> elements and replace them with :before pseudo-elements on their corresponding <label>s. While this is attempted on a lot of sites, it’s prone to error if not carefully tested & coordinated across styles and devices. (I never do it, preferring to show the native, familiar <input> on all platforms.)

Because your styles aren’t injected in a fixed order, you have a race condition. Sometimes you get the layout with the hidden labels, sometimes you don’t and just see nothing where the checkbox widget is expected to be.  For example, this CSS stylesheet tries to do the hide-input-show-label stuff. But depending on when the theme styles load, it may or may not work.

Bottom line, you need a lot more control and coordination across your many, many custom styles.

Are you still seeing the error? I can see checkboxes in the MS Edge and Google chrome as of now, but this can be a case where styles were added in the order as expected, which may not always be the case because of the reasons mentioned by Sandy in the above comment!

Snapshot of webpage as viewed in Chrome:

Snapshot of webpage as viewed in MS Edge: