Checkbox selections showing up with very low visibility

[LBranch]

In the form screenshot here, if you look very closely at the bottom, I’ve selected options for “Subscribe to our monthly newsletter” AND “Are you interested in talking to us to learn more.” The selection color is obviously too light for several reasons and I’m struggling to find a solution with no response from HubSpot so far.

• This is only happening on some of our forms and pages but not on others
• On those respective pages and forms, the issue is happening for single checkbox, radio select, and multiple checkbox contact properties/fields

Has anyone ever run into this issue or have suggestions? Thank you in advance!

[PamCotton]

Hello, @LBranch thank you for reaching out to our Community!

Are the other forms have the same color as the background? Are you able to change the background color to see if the checkbox will be more clear? From what I can see both colors are very similar and that may be the reason why is more light in the checkbox.

To our experts @mbrown @Mike_Eastwood any recommendations to @LBranch matter?

Thank you,

Pam

[LBranch]

Hi Pam, you and I are on the same page because that crossed my mind as well. However, we have pages/forms where this isn’t happening despite the same template and background color. For example, on the form at the bottom of this page, the single checkbox selecrtion is coming up darker (which is perfect).

[PamCotton]

Thank you @LBranch for this information, this behavior happens with before I check the box but not once checked.

do you have the link for the form that is having this behavior so I can continue investigating more? Thank you,

Pam

[LBranch]

So I’ve found a temporary solution of using dropdowns so the issue is being covered up on our public pages and forms BUT for the sake of find a resolution, I’ve created a gated test page where you can see that the issue is persisting. It’s happening with single and double checkboxes (as shown in the example) and radio select as well.

[Mike_Eastwood]

Hi @LBranch

Thank you for sharing the Landing Page – that made it easy to see what’s happening.

The checkbox labels are 14px high, but the rest of the form uses 16px fonts (which is the recommended minimum size).

Here’s a CSS tweak that you can add to your theme-overrides.css file if you want to change all forms:

form .inputs-list:not(.no-list) label, 
form .inputs-list:not(.no-list) label > span, 
form .inputs-list:not(.no-list) label > span p {
 font-size: 16px;
}

You can find your theme-overrides.css file in Marketing (top menu) > Files and Templates (drop down) > Design Tools (sub menu).

Here’s some more information about how HubSpot uses CSS.

Have fun

Mike

p.s. thanks for the mention @PamCotton

[LBranch]

Hi @Mike_Eastwood,

Thank you for you response. I’m sure this is a helpful solution that’ll solve my issue but I’m wondering if I can get more detailed instruction/support regarding what to do with this information?
I’m not familiar with CSS but I’ve navigated to theme-overrides.css and I’m unsure of where to drop in this tweak.

• Reminder: the issue is currently occuring on this gated test page but the form on the bottom of this page is functioning properly using the same property/field with a visible selection for the checkbox.

CC: @PamCotton

[Mike_Eastwood]

Hi @LBranch

I just checked – both pages have the Checkbox Label set to 14px (pixels) so the tweak will help both forms.

In your theme-overrides.css look for the Forms Section which looks like this:

Then shimmy down to the bottom of the Forms Section and paste the code like this:

Now, hit the Publish Changes Button (top right) and check your forms (it takes a while - seconds not minutes - to publish).

You will need to refresh your page to reload the CSS

• Windows : Hold down Ctrl and Shift and then press R.
• Mac: Hold down Shift and Command and then press R.

Did that fix it?

Mike

[LBranch]

@Mike_Eastwood For some reason, we have three separate theme-overrides.css files. So far the issue is still happening.

• I successfull updated 2/3, you can see it’s all the way down @ 966

• The third is currently showing 6 of the exact same error

• When I click any “1:1,” it highlights the brackets on the top line 1