Lead Capture Tools

hnanne
メンバー

help with form display on mobile device

解決

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.

0 いいね!
1件の承認済みベストアンサー
Mike_Eastwood
解決策
キーアドバイザー | Gold Partner
キーアドバイザー | Gold Partner

help with form display on mobile device

解決

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.

元の投稿で解決策を見る

0 いいね!
7件の返信
Mike_Eastwood
キーアドバイザー | Gold Partner
キーアドバイザー | Gold Partner

help with form display on mobile device

解決

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

0 いいね!
hnanne
メンバー

help with form display on mobile device

解決

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.

0 いいね!
hnanne
メンバー

help with form display on mobile device

解決

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

0 いいね!
Mike_Eastwood
解決策
キーアドバイザー | Gold Partner
キーアドバイザー | Gold Partner

help with form display on mobile device

解決

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.

0 いいね!
NigelRS
メンバー

help with form display on mobile device

解決

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.

0 いいね!
hnanne
メンバー

help with form display on mobile device

解決

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

Mike_Eastwood
キーアドバイザー | Gold Partner
キーアドバイザー | Gold Partner

help with form display on mobile device

解決

Excellent, happy to help.

 

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

 

THank you

Mike

0 いいね!