SOLVED: Checkboxes not appearing in embedded Marketo Form

MichaelOsborne
Level 2

SOLVED: Checkboxes not appearing in embedded Marketo Form

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.  

 

MichaelOsborne_0-1646094537261.png

Here is the form setup:

MichaelOsborne_1-1646094750477.png

Any ideas/tips?  

 

 

 

4 REPLIES 4
SanfordWhiteman
Level 10 - Community Moderator

Re: 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.

Darshil_Shah1
Level 10 - Community Advisor + Adobe Champion

Re: Checkboxes not appearing in embedded Marketo Form

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:

Darshil_Shah1_0-1646103719791.png

Snapshot of webpage as viewed in MS Edge:

Darshil_Shah1_1-1646103749368.png

 

 

MichaelOsborne
Level 2

Re: Checkboxes not appearing in embedded Marketo Form

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
Level 10 - Community Moderator

Re: Checkboxes not appearing in embedded Marketo Form

Wait, what did you change?