topic Re: Form Issue - Please Help! in Lead Capture Tools

Form Issue - Please Help!

CDunne7 — Wed, 21 Jun 2023 08:31:41 GMT

Hi Guys,

We have a website https://www.norcalcontainers.com/ and the form works really nice on the homeage and get quote page and https://www.norcalcontainers.com/get_quote/

BUT on mobile, I just cant get it to work, you will see half of it is cut off - when you click into a form field, it does expand but it's not ideal

Hoping some kind genius can help me here

Conor

Re: Form Issue - Please Help!

franksteiner79 — Wed, 21 Jun 2023 08:55:14 GMT

Hi @CDunne7

Can you share a screenshot of what you are seeing?

I just had a look on my Pixel 6 on Chrome and both forms look okay.

Cheers

Frank

Re: Form Issue - Please Help!

CDunne7 — Wed, 21 Jun 2023 08:59:55 GMT

Hey @franksteiner79 - thanks so much for coming back to me - desktop is totally fine - I am on iphone12 and this is what I see in Chrome and Safari

Re: Form Issue - Please Help!

TomM2 — Wed, 21 Jun 2023 11:26:16 GMT

Hey @CDunne7 this would be down to the container or "wrapper" you're putting the form embed code in. When the form is loaded with a HubSpot theme and not a raw HTML form, it loads inside an iframe, which is essentially a window embedded on your page. This iframe pulls it's height from the height of the container it's embedded in when the page loads, it doesn't dynamically determine the height or push the container "higher" if it's too small to display the form. When the container is too small to display the form, the form may appear cutoff like you're seeing.

You'll need to change the CSS from the section you're containing it in to ensure it has enough height on loading to display the form.

It looks like it currently has a "min-height: 1px" rule on it, it might be worth setting that to something a lot bigger for the form container class.

Re: Form Issue - Please Help!

CDunne7 — Wed, 21 Jun 2023 11:37:47 GMT

Thanks @TomM2

Would you have any idea what and where I need to update?! I am using rapid composer

Re: Form Issue - Please Help!

TomM2 — Wed, 21 Jun 2023 11:43:10 GMT

It's difficult to say for sure without seeing the overall configuration of your website @CDunne7 but you could try adding something like min-height:450px to the "inline style" section of your module to see if that works!

Re: Form Issue - Please Help!

CDunne7 — Wed, 21 Jun 2023 11:50:29 GMT

Thanks @TomM2 tricked around with it - it pushed the form down but didn't solve it so reverted back to how it was which is not ideal

Re: Form Issue - Please Help!

TomM2 — Wed, 21 Jun 2023 12:09:59 GMT

Interesting, I can't seem to consistentl recreate this so it's difficult to troubleshoot.

If you try add ".hbspt-form{min-height: 500px !Important}" to your stylesheet does this have any affect?

Re: Form Issue - Please Help!

CDunne7 — Wed, 21 Jun 2023 12:29:20 GMT

A bit of an effect but missing form fields

Re: Form Issue - Please Help!

TomM2 — Wed, 21 Jun 2023 12:52:32 GMT

Ah, the iframe is still loading at the container height. That's annoying. Long shot, but if you also add

.hs-form-iframe{min-height:500px !imporant} does it help?

Re: Form Issue - Please Help!

CDunne7 — Wed, 21 Jun 2023 14:30:48 GMT

Thanks Tom - where do you suggest i add this code? To here? i did that and no joy!

Re: Form Issue - Please Help!

CDunne7 — Wed, 21 Jun 2023 14:31:17 GMT

Also can I ask is there a way to change the * from red to white?

Re: Form Issue - Please Help!

TomM2 — Wed, 21 Jun 2023 16:48:18 GMT

@CDunne7 just a quick other workaround which should work. If you set your form to a "raw html form" in your form testing page it will load the html of the form inline with your webpages html so should avoid this issue (depending on your pages styling).

Only drawback of this though is you may need to add some further styling to have your form match the website style!

Re: Form Issue - Please Help!

TomM2 — Thu, 22 Jun 2023 05:40:40 GMT

It's difficult to say where to add the code without seeing your CMS setup, but generally you should be able to find your stylesheets for your wordpress template and add them in there!

You can't change this by using a HubSpot theme, but if you enable the "raw html form" option in your HubSpot form you can use your own custom styling and you'll be able to change this!