Hi everyone,
I’m trying to add padding: 8px around my HubSpot form embedded via an iframe, but I haven’t been able to get it to work.
Here’s an example of a similar form where I want to replicate the 8px padding: Form Example
How can I properly apply 8px padding to the content of the HubSpot form embedded via the iframe? If modifying the iframe content isn’t possible, is there another workaround?
Thanks in advance for your help! 
Hi @ventit1
Because the iframe is essentially its own document, you can’t add styiling to the contents of the iframe from the parent document.
Is this form embedded on a Hubspot page or elsewhere ?
If it’s a Hubspot page, you should be able to see the Styles tab once the form is selected in the editor.
But if you are using it elsewhere, let us know.
And you are not able to edit the form itself ? If it is using Hubspot’s new form editor, you can edit the styling for each element (fields, buttons, etc) from the form editor itself.
Let me know if you need more help and feel free to set up a free call.
Hi @PMcConnell Thanks for your answer! We’re using in on our our website. And right now I can’t see the settings of making padding to the entire form.
Hi @ventit1
Can you perhaps include a screenshot of what you see?
I am just a bit confused as to where the problem is.
Hi!
You can switch the form to raw html (this will stripe the styling and just render a base html form not iframed) where you can style everything.
The default styling has very limited options like, font family and color pretty much.
There are also workarounds with “external forms” and it does require css and html and every field would need to be done manually.
heres a setup guide for raw html