Form padding

Marketing & Content Lead Capture Tools
1

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;
}

2

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, however this does not support mult-step forms at the moment.

3

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:

​.hub-iframe-padding {
 margin-left: -40px;
 margin-right: -40px;
}
4

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.

.hsfc-Step .hsfc-Step__Content {
	width: 100%;
	box-sizing: border-box;
	padding: var(--hsf-background__padding, var(--hsf-default-background__padding));
}
5

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. This would allow other users to upvote your idea and expand on it!
We look forward to seeing your collaboration!
Shane, Senior Community Moderator

6

Not sure if you’re still looking to fix this but I managed to remove this padding using this css:

[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.

7

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.

8

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
screenshot1.png990×860 139 KB