CMS Development

CMoreton
Member

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.

https://resources.wave9.co.uk/bett-2025-waveconnect

Any help most appreciated. 

Cheers

Carl

0 Upvotes
7 Replies 7
albertsg
Guide

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

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!



Did my answer help you? Mark it as a solution
0 Upvotes
CMoreton
Member

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

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 🙂

 

Mobile-View-iPhone-11.pngTheme Colours.jpgWorks in Firefox.jpg

0 Upvotes
evaldas
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

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

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?

 

evaldas_0-1736959233556.png

 


✔️ Did this post help answer your query? Help the community by marking it as a solution.

0 Upvotes
CMoreton
Member

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

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. 

 

checkbox.png

 

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

form button settings.jpg

 

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 🙂

evaldas
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

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

You're welcome! Confirming I also now see checkboxes properly on a mobile device ☑️


✔️ Did this post help answer your query? Help the community by marking it as a solution.

0 Upvotes
CMoreton
Member

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

Hi Evaldas,

 

Thanks for replying. 😊

 

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... 🙂

Cheers

 

Theme Colours.jpg

 

evaldas
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

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

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:

 

evaldas_0-1736965683637.png

 

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.

 


✔️ Did this post help answer your query? Help the community by marking it as a solution.

0 Upvotes