--- title: How to Style HubSpot Forms in the New Form Editor (v4) description: Why your CSS doesn't reach forms from HubSpot's new form editor, and how to style them with the raw HTML embed, --hsf-* CSS variables and .hsfc-* classes. image: https://www.pixtheme.com/hubfs/hubspot%20v4%20forms.jpeg --- [Skip to content](https://www.pixtheme.com/blog/how-to-style-hubspot-forms-in-the-new-form-editor-v4#main-content) [![Pixtheme](https://www.pixtheme.com/hubfs/pixtheme-agency-demo/pixtheme-logo-light.svg)](https://www.pixtheme.com/) - [Services](https://www.pixtheme.com/services) Show submenu for Services - [Hire a HubSpot developer](https://www.pixtheme.com/hire-hubspot-developer) - [HubSpot CMS website development New HubSpot websites your team can edit without a developer.](https://www.pixtheme.com/services/hubspot-cms-development) - [HubSpot Website Redesign A fresh design for your HubSpot site, built on what already works.](https://www.pixtheme.com/services/hubspot-website-redesign) - [WordPress to HubSpot migration Pages, blog posts and redirects moved over with care.](https://www.pixtheme.com/services/wordpress-to-hubspot-migration) - [Custom HubSpot modules and integrations Custom modules, apps and integrations for your portal.](https://www.pixtheme.com/services/hubspot-custom-modules) [View all Services](https://www.pixtheme.com/services) [Themes and modules Ready-made HubSpot modules Calculators, countdowns, testimonials and more, built for the HubSpot Marketplace. Browse modules](https://www.pixtheme.com/themes-and-modules) - [Assets New](https://www.pixtheme.com/themes-and-modules) - [About Us](https://www.pixtheme.com/about) - [Contact Us](https://www.pixtheme.com/contact-us) [Book a call (opens in a new tab)](https://www.pixtheme.com/meetings/gotohubspot) [Book a call (opens in a new tab)](https://www.pixtheme.com/meetings/gotohubspot) [All posts](https://www.pixtheme.com/blog) / [HubSpot Development](https://www.pixtheme.com/blog/tag/hubspot-development) # How to Style HubSpot Forms in the New Form Editor (v4) [![](https://www.pixtheme.com/hs-fs/hubfs/mexu-event-demo/photos/marcus-hale.jpg?width=44&height=44&name=marcus-hale.jpg) Rafayel Sh.](https://www.pixtheme.com/blog/author/rafayel-sh) October 26, 2026 4 min read ![HubSpot v4 forms](https://www.pixtheme.com/hs-fs/hubfs/hubspot%20v4%20forms.jpeg?width=1600&height=900&name=hubspot%20v4%20forms.jpeg) Share Forms built in HubSpot's **new form editor** are embedded in an **iframe** by default, so your page CSS can't reach them. To style them with your own CSS, use HubSpot's **raw HTML (developer) embed**, which renders the form directly in the page, then style it with the `--hsf-*` CSS variables and `.hsfc-*` classes. We ran into this while building the lead form for our [Smart Calculator](https://assets.pixtheme.com/modules/smart-calculator-demo) HubSpot module, which has to match whatever theme it's placed in. This tutorial shows the approach that worked, with the code. ## Why your CSS stopped working Forms from the legacy form editor render straight into the page, so CSS like `.hs-form input { ... }` styles them. Forms from the new editor are different: the standard embed, and HubSpot's `` `` tag in themes, output a placeholder element with the class `hs-form-frame`, and HubSpot's script loads the form inside an iframe. An iframe is a separate document, so selectors on your page don't apply inside it. You have three options, from simplest to most flexible. ## Option 1: Use the form editor's style settings The new form editor has its own style options for fonts, colors, buttons and field shapes. If you only need the form to roughly match your brand, set them there. It needs no code, but you can't match a theme exactly, and every form has to be styled one by one. ## Option 2: Use the raw HTML embed and style it with CSS HubSpot also offers a developer embed that renders the form as normal HTML in your page. It looks like this: ```
``` Notes: - Use the region your portal lives in. For portals outside `na1` the script host includes the region, for example `js-eu1.hsforms.net`. - Load the script once per page, even if the page has several forms. - You can find the form ID in the form editor's URL or embed code. ### Style it with CSS variables The rendered form reads its styles from CSS custom properties that start with `--hsf-`. Set them on the form's renderer element and the whole form follows: ``` .my-form [data-hsfc-id="Renderer"], .my-form .hsfc-Renderer { --hsf-global__font-family: inherit; --hsf-global__color: #1f2933; --hsf-background__background-color: transparent; --hsf-background__padding: 0; --hsf-field-label__color: #111417; --hsf-field-label__font-size: 0.875rem; --hsf-field-input__background-color: #ffffff; --hsf-field-input__border-color: #d5dbe1; --hsf-field-input__border-radius: 10px; --hsf-field-input__placeholder-color: #8f9aa4; --hsf-button__background-color: #fe5900; --hsf-button__color: #ffffff; --hsf-button__border-radius: 12px; --hsf-button__width: 100%; --hsf-erroralert__color: #ef4444; --hsf-row__vertical-spacing: 1rem; } ``` Pointing these variables at your theme's own variables, for example `var(--brand-primary)`, makes every form follow your theme automatically. ### Fine-tune with .hsfc-\* classes For anything the variables don't cover, the rendered elements have stable class names starting with `hsfc-`, such as `.hsfc-FieldLabel`, `.hsfc-TextInput`, `.hsfc-Button`, `.hsfc-RichText` and `.hsfc-Step__Content`. Scope your rules to a wrapper so they don't leak: ``` .my-form .hsfc-RichText p { margin: 0 0 0.5rem; } .my-form .hsfc-Button { font-weight: 600; letter-spacing: 0.01em; } ``` ## Option 3: Inside a HubSpot module, swap the iframe embed automatically In a theme or module, editors pick a form with a form field and the `` `` tag renders the iframe version. In our Smart Calculator module we render that output inside a `