Hubspot forms are powerful—but let's be honest: it is hard to style Hubspot forms.

They're great at what they do behind the scenes: giving marketing teams control, feeding your CRM, and triggering automated workflows. But when dropped into a Webflow site out of the box, they tend to look… off. Misaligned fonts, clunky input fields, inconsistent spacing—it can make even a great site feel less trustworthy.

At Stormfors, we believe that every element on a site—including forms—should follow the brand’s visual language. So we’ve built a reliable way to integrate Hubspot’s flexibility without sacrificing your frontend aesthetics.

Here’s how.

Step One: Give Clients Control, Without Losing Style

The benefit of using Hubspot is clear—your client can create or update forms whenever they need, directly from their Hubspot portal. But styling them through Hubspot’s form builder is limiting, especially if you care about typography, spacing, responsiveness, or just general polish.

That’s why we let clients keep their control—but render the form natively within Webflow, so it blends perfectly with the rest of the design.

Step Two: Use Raw HTML Embeds (Avoid iFrames)

This is the part most people miss: In Hubspot’s form settings, you need to enable “Set as raw HTML form.”

Why? Because by default, Hubspot renders forms inside an iFrame, which means you can't access or style the inputs with your site's CSS. Enabling the raw HTML option allows the form to be inserted directly into the page's DOM—making it fully styleable.

Once this is done, you can:

• Match input fields to your design system
• Apply custom spacing and labels
• Maintain responsive behavior across breakpoints
• Use native fonts, colors, and hover effects

Step Three: Use Webflow CMS for Flexibility

To streamline the process, we use Webflow’s CMS and give clients a simple Rich Text field to paste their Hubspot embed code. This allows them to add or update forms without touching layout or style.

We also include helpful CMS instructions for clients—because support should be built-in, not bolted on.

Step Four: Style It With Purpose

Once the form is embedded, it’s all about smart CSS. We typically:

• Target form elements using class or attribute selectors
• Use scoped styling to keep everything clean
• Ensure accessibility standards are respected
• Test across browsers and devices
• Handle all expected input types (text, dropdowns, checkboxes, etc.)

Sometimes this means digging into the Hubspot-generated DOM and writing overrides—but it's a one-time effort that makes your forms feel like a native part of the site, not a bolt-on.

Bonus: Want to Get Fancy?

While it's rarely necessary now with raw HTML forms enabled, we’ve also developed advanced JavaScript techniques that can style forms inside iFrames. It’s tricky and not recommended unless you have no other choice, but it’s possible.

(If you’re curious about that technique, feel free to reach out—we’re always happy to share tips with fellow developers.)

Webflow + Hubspot = A Powerful Combo

With a bit of planning and a few technical tweaks, you can get the best of both worlds:

• Client-controlled forms
• Fully brand-aligned design
• Real-time updates, no dev intervention needed
• Clean handoff and long-term scalability

This approach is part of how we build modern, integrated platforms that look great and function even better.