Form hosted in Hubspot Checkbox not working correctly in mobile phone view

Hi all,
I have some forms that we are using to get feedback from a show next week.
The forms are hosted in Hubspot, and they are embedded in Hubspot landing pages.
When viewed on mobile, old and new, the checkboxes do not function correctly.
Can anyone advice please.
Here is an example of one of the forms.

Any help most appreciated.
Cheers
Carl

Hi @CMoreton,

Looks like a color selection might be missing in your theme settings.

Do you currently have the “Accent color 3” set to anything?

Hi Evaldas,

Thanks for replying. :blush:

Yes, I have the theme colours set to either the brand colours or ANY colour to enable me to see what’s going on. I have attached the theme colour settings.
It surely must be something to do with the stylesheets and the active state of the checkboxes, or something like that.

Bit annoying as am in a hurry, but I’ll get there, we always do… :slightly_smiling_face:
Cheers

Did you add any custom CSS or edit this theme?

I am using the Elevate theme to test and the “Accent color 3” seems to be controlling the checkbox color:

On your page that color appears as “transparent” in the inspector, which is really odd.

Also, could you add a color to the “Base color” to make sure all color values are populated? Just in case that causes the conflict and then publish the changes.

Hi there,
I have changed the theme colours so there is a colour for ALL settings.
The check boxes seem to be working fine now, and I think I may have fixed it now by looking at the theme primary button colour settings and changing one setting that was either set to ‘No Fill’ to ‘Fill’ and then changed to a dark blue.
If you look at the attachment the checkbox bg is definitely the same blue we use, #006699, so i think that must have solved it.

Or could be that I changed the Form button colours to the following, hence making the checkbox bg the blue #006699 and the text #f2f2f2

I’ll do a bit of playing about tomorrow and confirm what I did etc and then I will post my confirmation to this thread so it can be of use to others.
Thanks for your help :slightly_smiling_face:

You’re welcome! Confirming I also now see checkboxes properly on a mobile device :check_box_with_check:

Hi @CMoreton, I’ve just tested the link you shared in mobile view (from the desktop but emulating a mobile device) and seems to be working fine.
Could you please describe more the issue and maybe attach a short screen recording for the Community to better see what the issue might be?
Thanks!

Hi Albert,

Many thanks for taking the time to reply.

Yes, if I view in developer mode in Firefox then the form functions as should.

On my phone, when I select a check box, it disappears. So maybe the equivalent of active mode in CSS. I have checked to see if in the theme editor I have any colours set to white which might produce this effect, but all the theme colours are set to a colour, except for page background.

I am new to Hubspot. I do have experience in multimedia, and can work my way around a style sheet etc, and I did in fact create a basic style sheet (heading, paragraph link colours etc) for this Landing page when I first did it a few days agio as I was struggling to understand how the Theme editor setting correlated to the actual landing page.

I wouldn’t say this is the most intuitive application I have ever tried working with so far. LOL
Cheers :slightly_smiling_face: