Checkboxes not appearing in embedded Marketo Form

[MichaelOsborne]

Hi Marketo Community,

We have encountered an error with the form on this page - https://elmosoftware.com.au/hr-software-capterra/?utm_source=capterra&utm_medium=ppc&utm_campaign=hu...

The selection boxes are missing in the form when testing in Chrome and MS Edge.  

Here is the form setup:

Any ideas/tips?  

[SanfordWhiteman]

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.

[Darshil_Shah1]

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:

[MichaelOsborne]

Thanks @Darshil_Shah1 

I solved the issue by following these steps in the Marketo form.

https://nation.marketo.com/t5/product-discussions/opt-in-check-box-rich-text-alignment-issue/m-p/113...

Unfortunately I dont currently have access privilege to edit the CSS on the form template or the website page.

But good to get feedback from a pro!

Thanks,

Michael.

[SanfordWhiteman]

Wait, what did you change?