help with form display on mobile device

SOLVE
Highlighted
Occasional Contributor

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.

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Regular Advisor | Silver Partner

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.

Reply
0 Upvotes
6 Replies 6
Regular Advisor | Silver Partner

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

Reply
0 Upvotes
Occasional Contributor

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.

Reply
0 Upvotes
Occasional Contributor

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

Reply
0 Upvotes
Regular Advisor | Silver Partner

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.

Reply
0 Upvotes
Occasional Contributor

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

Regular Advisor | Silver Partner

Excellent, happy to help.

 

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

 

THank you

Mike

Reply
0 Upvotes