Hi! I have an issue I haven't been able to solve. The hubspot form on https://icondo.net/registro/ looks perfectly fine on desktop (even when testing responsiveness and shrinking the browser window) but when I load this same URL on a mobile phone (I'm using an iPhone 8 with the latest updates), it appears overlayed and scrambled with the other elements. Why does this happen and how can I fix it? It's kind of urgent since that's our main lead generation form.
A bit of context: The website is on Wordpress 5.0.3 using a purchased theme called ZurApp. Also, this issue was not happening in the past, not sure what or when something changed.
What's happening is the form is rendering wherever it feels like (on Desktop and Mobile)... it looks like it's happening because the JavaScript is loading last so the JavaScript doesn't know where to put the form.
So, what we can do is tell the HubSpot form to render inside a "div" (short for divider) which has an ID of divFormHolder.
You will need to add the code in red where you've embedded your form.
Difficult to diagnose without looking at the form and the code.
Are you using the HubSpot Form CSS? Sounds like there's a conflict with your theme.
You can disable HubSpot's Form Styling BUT (that's a big but) you will have to create styling to handle labels, fields and errors which would be a lot of work.
Here's how you disable the default HubSpot Styling:
Hi Mike, thank you very much for your support. I am using the hubspot wordpress plugin and copying/pasting the short code it provides. I also tried just literally pasting the embed code from my hubspot account but the result is the same.
There is a public link in my original post where you can see the form, it's this one: https://icondo.net/registro/
I'd rather not disable the hubspot styling, but I can edit the css on my theme. Problem is, this only happens on actual mobile phone browsers (both safari and chrome for iPhone), the responsive version (narrow browser screen) does render correctly.
What's happening is the form is rendering wherever it feels like (on Desktop and Mobile)... it looks like it's happening because the JavaScript is loading last so the JavaScript doesn't know where to put the form.
So, what we can do is tell the HubSpot form to render inside a "div" (short for divider) which has an ID of divFormHolder.
You will need to add the code in red where you've embedded your form.
It shows but doesn't response down to the smallest screen; it's OK for large screens & tablets. The thing, is when I create the form and then 'view' it in the HS test area, it renders perfectly on a narrow screen.