Form is not mobile friendly

Marketing & Content Hub Lead Capture Tools
1

Hello, I have a problem of embeded form not being mobile friendly.

The form is on the link Kontakt - Benefiti.rs.

Report from Google Search Console is here Introduction to Lighthouse  |  Chrome for Developers

I tried several solutions and even some that were noted here but no luck in solving it.

Thank you,

Vladimir

2

Hi @Devla

Think the problem is in your code.

You can always inspect it using your browser developer tools.

52033i4DB6D341C052A757.JPG
52033i4DB6D341C052A757.JPG400×212 8.84 KB

The issue might be due to the fixed position of the form, then you need to change CSS in media queries.

Please add below CSS code in your page stylesheet.

@media (max-width: 767px) {
 .main-content {
 position: static !important;
 }
}

or

Set 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>

Hope some of this helps you. If you solve your problem please mark it solved.

Cheers,

Stjepan

3

I am not a coder and tried to enter the code in the first box above in the Stylesheet and it didn’t work. My form works fine on desktop, but in mobile, you have to exit the mobile mode to see the form fields. I am not sure where exactly to try to put the text in the 2nd suggestion above (the red text). Do I do that in Developer Tools in my browser? Or in Wordpress? Thanks.