# Form padding **URL:** \ **Category:** Lead Capture Tools\ **Tags:** forms\ **Created:** [March 14, 2025, 1:12am UTC](https://community.hubspot.com/t/form-padding/127954 "2025-03-14T01:12:49Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![TheAki](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@TheAki](https://community.hubspot.com/u/TheAki)\ **Post date:** [March 14, 2025, 1:12am UTC](https://community.hubspot.com/t/form-padding/127954/1 "2025-03-14T01:12:49Z")
I am trying to remove the padding of the embedded hubspot form on my wordpress site. I see the issue is .hsfc-Step .hsfc-Step\_\_Content { width: 100%; box-sizing: border-box; padding: var(--hsf-background\_\_padding); padding-top: 40px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; } but I can’t change it in css for some reason, it ignores it, I’ve tried .hsfc-Step .hsfc-Step\_\_Content { padding-left: 0 !important; padding-right: 0 !important; } and .hsfc-Step .hsfc-Step\_\_Content { padding: 40px 0 !important; } ---
**Author:** ![TomM2](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tomm2/32/70887_2.png) [@TomM2](https://community.hubspot.com/u/TomM2)\ **Post date:** [March 14, 2025, 10:38am UTC](https://community.hubspot.com/t/form-padding/127954/2 "2025-03-14T10:38:44Z")
Hey @TheAki it looks like this is CSS for the new forms editor form, the new forms editor always loads within an iframe, meaning no external styling can affect this. Currently there is no way to load this outside of the iframe so you can add your own custom styling to this. Currently the legacy forms editor is the only one which allows for [styling the form with your own css](https://knowledge.hubspot.com/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#with-css-in-your-external-stylesheet-marketing-hub-professional-enterprise-or-legacy-marketing-hub-basic-only), however this does not support mult-step forms at the moment. ---
**Author:** ![FaramarKolivand](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/faramarkolivand/32/76210_2.png) [@FaramarKolivand](https://community.hubspot.com/u/FaramarKolivand)\ **Post date:** [July 14, 2025, 4:50pm UTC](https://community.hubspot.com/t/form-padding/127954/3 "2025-07-14T16:50:03Z")
This is the correct answer, thank you. You cannot directly style or manipulate the contents of an iframe with CSS or JS if it’s from a different origin. However, you can control the space around the iframe tag itself on your page, using JS or CSS, including negative margins or paddings. This CSS did the trick for me for a multi-step form, the class **.hub-iframe-padding** is in my CMS, I can control it and it’s the parent node of the HubSpot iframe form: ```lia-code-sample ​.hub-iframe-padding { margin-left: -40px; margin-right: -40px; } ``` ---
**Author:** ![squatchcreative](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/squatchcreative/32/42150_2.png) [@squatchcreative](https://community.hubspot.com/u/squatchcreative)\ **Post date:** [January 7, 2026, 8:21pm UTC](https://community.hubspot.com/t/form-padding/127954/4 "2026-01-07T20:21:09Z")
Thank you for providing this trick. What’s a shame is that 1) That editing ability should come standard as part of the new form editor rollout or at least allow for custom CSS in the form editor and 2) This trick is contingent that the CSS variable they assign padding with never changes. Will it always be 40px? What about on mobile? Such a shame. ```lia-code-sample .hsfc-Step .hsfc-Step__Content { width: 100%; box-sizing: border-box; padding: var(--hsf-background__padding, var(--hsf-default-background__padding)); } ``` ---
**Author:** ![STierney](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stierney/32/186066_2.png) [@STierney](https://community.hubspot.com/u/STierney)\ **Post date:** [January 7, 2026, 9:22pm UTC](https://community.hubspot.com/t/form-padding/127954/5 "2026-01-07T21:22:21Z")
Hey @squatchcreative - thanks for providing that feedback! To ensure that your suggestions make it to our Product Team, we highly encourage that you post them in our [Ideas Forum](https://community.hubspot.com/t5/HubSpot-Ideas/idb-p/HubSpot_Ideas). This would allow other users to upvote your idea and expand on it! We look forward to seeing your collaboration! Shane, Senior Community Moderator ---
**Author:** ![JWright76](https://avatars.discourse-cdn.com/v4/letter/j/6a8cbe/32.png) [@JWright76](https://community.hubspot.com/u/JWright76)\ **Post date:** [July 10, 2025, 12:33pm UTC](https://community.hubspot.com/t/form-padding/127954/6 "2025-07-10T12:33:59Z")
Not sure if you’re still looking to fix this but I managed to remove this padding using this css: ```lia-code-sample [data-hsfc-id=Renderer] .hsfc-Step .hsfc-Step__Content { padding: 0px !important; } ``` I grabbed this from browser dev tools. But note I am using form on a HS LP, not sure if different when embedding. ---
**Author:** ![TomM2](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tomm2/32/70887_2.png) [@TomM2](https://community.hubspot.com/u/TomM2)\ **Post date:** [July 11, 2025, 9:25am UTC](https://community.hubspot.com/t/form-padding/127954/7 "2025-07-11T09:25:06Z")
Thanks for sharing @JWright76 as far as I know a form on a HS page embeds directly into the DOM of the page so can be customised. External embeds are always within iframes and the option to “set as raw html” form isn’t available right now for the new forms editor. ---
**Author:** ![squatchcreative](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/squatchcreative/32/42150_2.png) [@squatchcreative](https://community.hubspot.com/u/squatchcreative)\ **Post date:** [January 13, 2026, 6:01pm UTC](https://community.hubspot.com/t/form-padding/127954/8 "2026-01-13T18:01:27Z")
My earlier comment was incorrect and no answers allude to this, but you CAN in fact embed a new form and not have it rendered in an iframe, allowing you to modify CSS and use JS. Get Embed Code \> Developer Code (Advanced) \> I Understand the risks ![screenshot1.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/f/3ffd92ad616a3633a5d0f850ac7bfeaa4554bf3b.png)