I just migrated my site to a new platform and now I have to embed all my HubSpot forms instead of using them natively. The problem is that these embedded forms are showing up way too big on my new site. They look completely oversized and take up way more space than they should.
I’m working with the current form builder (not the old legacy one). I’ve been looking everywhere but I can’t seem to find any settings to control the dimensions of these embedded forms.
Does anyone know if there’s a way to set a maximum width or height for embedded HubSpot forms? Or maybe there’s some CSS I can add to make them smaller? Any help would be great because right now they look terrible on my site.
CSS override is the most effective approach to resize embedded HubSpot forms. After experiencing the same issue during my migration last year, I found that HubSpot’s form builder lacks direct size controls. To manage dimensions, wrap the embedded form in a custom container div and apply a max-width style. For instance, using .hubspot-form-container { max-width: 400px; } can help. Be mindful to adjust the form fields as needed, targeting the .hs-form class. Also, ensure your CSS doesn’t compromise mobile responsiveness, as I learned that hard way when fixed widths rendered my forms unusable on smaller screens. Testing across various devices is crucial after implementing these changes.
Had this exact problem when I switched platforms a few months ago. Those embedded forms were huge and wrecked my page layouts. I fixed it with transform: scale() to shrink the whole form proportionally. Used transform: scale(0.8); on the form container - cut it down 20% while keeping everything proportional. You might need to tweak transform-origin depending on where you want the scaling anchored. This beats max-width because all the internal spacing and field relationships stay intact. Just test it thoroughly since scaling can mess with validation message positioning sometimes.