help with form display on mobile device

[hnanne]

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.

[Mike_Eastwood]

Hi @hnanne 

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:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
  hbspt.forms.create({
	portalId: "XXXXXXX",
	formId: "YYYYYYYY-YYYY-YYYY-YYYY-YYYYYYYYYYYY",
        css: ''
});
</script>

Alternately, you could try to edit your theme (experts only) to NOT target the HubSpot form.

Can you share a link (publicly or privately) to your page with the form?

Mike

[hnanne]

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.

[hnanne]

Forgot to add a mention so you get a notification: @Mike_Eastwood 

[Mike_Eastwood · Accepted solution]

Hola @hnanne 

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.

<div id="divFormHolder">
  <!--[if lte IE 8]>

    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js" defer></script>

  <![endif]-->

  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js" defer></script>

  <script>

    window.onload = function() {
        hbspt.forms.create({

             portalId: 'XXXXXXX',
 
             formId: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',

             target: "#divFormHolder",

        });

    };

  </script>

</div>

Let me know how you get on.

Mike

p.s. I wrote a blog post about HubSpot Forms if you want to geek out.

[NigelRS]

I have tried that, and instead of showing the form, it has actually hidden it.

Using latest WP version.

Code embedded from the form is:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
hbspt.forms.create({
portalId: "6598804",
formId: "794e1933-ae0b-4a8c-a93f-4dbe7fedb190"
});
</script>

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.

[hnanne]

This did the trick, thank you so much @Mike_Eastwood !  Have a great rest of the week.

[Mike_Eastwood]

Excellent, happy to help.

Can you please mark this post as Solved to help other people searching in the future?

THank you

Mike