Form Issue - Please Help!

[CDunne7]

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

[TomM2]

@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! 

[TomM2]

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? 

[CDunne7]

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

[CDunne7]

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

[TomM2 · Accepted solution]

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! 

[franksteiner79]

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

[CDunne7]

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

[TomM2]

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. 

[CDunne7]

Thanks @TomM2 

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

[TomM2]

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! 

[CDunne7]

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

[TomM2]

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? 

[CDunne7]

A bit of an effect but missing form fields