CSS for Embedded forms Loads Layout CSS when it shouldn't
May 29, 2019 11:03 PM
Something must have changed recently with how HubSpot loads in CSS for embedded forms.
Generally speaking, we usually disable all the default styles on embedded forms to make them match ours (or our clients) brand without having to fight against existing stylesheet rules loaded in by HubSpot.
We did this using the documented form embed code property as seen below:
css : ''
That used to work brilliantly. Until someone decided to make the layout CSS that is loaded into the page for forms (such as multi-column fields) part of the CSS payload that is loaded for when the cssRequired option isn't disabled on the form embed.
This is a problem, mainly because it started breaking form layouts for forms that used to work perfectly fine prior to whatever change has been implemented.
What's worse - is that the only way to get rid of it is to remove the cssRequired - which 95% of the time is OK - but if you need to use a datepicker field - you're stuck between a rock and a hard-place. Rewriting the datepicker CSS is a pain (and I don't actually think you can without breaking the functionality).
Here's an example of the CSS im dealing with being loaded even though the css: '' is enabled in the embed code.
TL;DR; layout CSS shouldn't be part of the cssRequired payload.
Why: HubSpot can't know the context of where the form is being embedded, the developer or site should control the layout without having to write !important tags on CSS rules to override layout defined by HubSpot.