How to Use Custom CSS for HubSpot Forms ~ The Update We All Needed!

As a fellow web dev enthusiast, allow me to paint you a picture! (If it doesn’t resonate with you, dinner’s on me! 😉 )

It’s 3:14 PM. You’re mid-sprint on a website refresh for a client who’s very particular about brand aesthetics, you know the whole drill, fonts must match, button corners must be 6px rounded, and every form field needs to glide in with subtle fade-ins. You open HubSpot, grab a form, embed it, and…

Boom. An iframe.

Your beautifully responsive layout just got hijacked. You can’t tweak the spacing, can’t change font sizes, and might as well forget about animations. You open DevTools, look at that stubborn iframe container, and mutter the same thing every dev-marketer has at some point:

“Why can’t I just style HubSpot forms like normal forms?”

Source

Well, grab your coffee, fellas, this one’s worth a sip! HubSpot just quietly dropped a feature that ends this struggle for good.

Get set for the big news ~ HubSpot forms are now fully customizable

Yep, you read that right.

No more iframes.
No more CSS hacks.
No more sleepless nights trying to force HubSpot forms to match your brand design.

With this new update, HubSpot now allows you to export raw HTML of your new-style forms, which you can then embed directly into your site. That means you can now:

• Apply custom CSS for HubSpot forms
  
• Add inline JavaScript for validations or interactions
  
• Use forms natively in your layout
  
• Fully control the HubSpot form style and behavior
  

Let’s break it down on a deeper level, implications and all, human-to-human, web-dev-to-web-dev.

Cool, but what was the problem before?

Well, to begin with, HubSpot’s forms, particularly the new-style ones, were previously only embeddable as iframes. And if you’ve ever tried to style an iframe, you know the drill: you can’t. Period.

That meant if you wanted to style HubSpot forms:

• You couldn’t add your own class names or CSS animations
  
• You couldn’t trigger form submissions in Google Tag Manager
  
• You couldn’t match your site’s design system
  
• You couldn’t even make the form truly responsive inside certain sections
  

Let’s say your design system uses translucent backgrounds, custom-styled checkboxes, and floating labels. 

You’d have to either completely compromise or spend hours writing messy iframe workarounds that kinda work in Chrome but break in Safari.

So we tolerated it. We styled around the form. We lowered expectations. And maybe even started hiding forms in modals just to avoid layout disruptions.

But that era is over.

Here’s what’s new: HubSpot’s “Developer Code” option

When you now go to publish a form in HubSpot, you’ll see a new tab titled, Developer Code.

Click it, and boom! Say hello to clean, copy-pasteable HTML. That’s right, you get the entire structure of the form (labels, inputs, buttons, etc.) without any iframe wrappers.

This is not a basic embed code, fellas, it’s the real deal.

Here’s what you now get:

~ Fully accessible HTML

~ Structured class names

~ Clean separation of markup and behavior

~ Ability to drop it inside any div, section, grid, or component of your site

That means you can style HubSpot forms just like you would any other native form component. Seriously, though, how cool is that?!

How to customize HubSpot Forms

Here’s a quick rundown of what you can now do (that you couldn’t before):

1. Design freedom with CSS

Want to use your brand’s button styles? Font family? A background gradient with a blur effect behind input fields? You can now do it with elan.

.hs-form input[type="text"] {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  font-family: "Poppins", sans-serif;
  padding: 10px;
}

Bid adieu to CSS isolation as you now have full control over HubSpot form style. That means HubSpot custom forms can now feel truly on-brand.

2. Advanced JavaScript customization

Do you want to:

~ Validate a phone number in real-time?

~ Trigger animations on scroll?

~ Show/hide fields dynamically based on user input?

~ Trigger analytics or CRM events when a form is interacted with?

Done. You now have access to the form’s elements like any regular DOM object.

document.querySelector('.hs-form').addEventListener('submit', function(e) {
  // Custom tracking
  dataLayer.push({ event: 'formSubmission' });
});

Welcome to advanced HubSpot form customization minus the limitations.

3. Cleaner analytics & event tracking

You can safely bid adieu to more iframe event leakage. Here’s a quick insight into what you can do now:

~ Attach Google Analytics events

~ Push data to the dataLayer

~ Monitor conversion paths with HubSpot AND external tools like Heap or Mixpanel

Therefore, you get true integration without compromises.

4. Better performance & UX

An iframe adds another HTTP request and isolates CSS rendering. Embedding forms as HTML:

~ Speeds up page load

~ Reduces layout shift

~ Gives users a more seamless experience

Your forms are no longer visitors from another world; they’re now native citizens of your front end.

A quick sneak peek into the before vs. after scenario

Before (The old way)

You embed the form.

The layout cracks like a dropped iPhone.

The CTA button refuses to match your brand styling.

Google Tag Manager doesn’t even notice the form exists.

You’re knee-deep in Stack Overflow threads trying to override iframe styles.

Eventually, you mutter, “good enough,” and hit publish with a sigh.

After (Out with the old, in with the new!)

You drop the raw HTML form exactly where you want it.

It blends seamlessly into your layout grid sans the drama.

You style it with your framework of choice~ Tailwind, SCSS, whatever works.

Need animations? Add them. Need validation? Your JavaScript’s got it.

GTM fires like a charm.

You test, deploy, and for once, actually high-five yourself.

Source

HubSpot form design tips (Now that you can actually implement them!)

Now that you have full styling power, here are a few HubSpot form design tips to level up your UX:

~ Use floating labels to save space and look modern

~ Style error messages with subtle transitions

~ Animate the field focus to improve accessibility

~ Use media queries for a mobile-friendly layout

~ Pre-fill fields dynamically via JavaScript or query strings

These are things we have wanted to do for years. The wait is finally over, as we can now!

That’s so cool, but what about progressive profiling?

Great news, this still works!

Even though you’re embedding forms using raw HTML, HubSpot’s magic behind the scenes still tracks user behavior. If a contact already exists in your CRM, HubSpot will hide known fields automatically, just like before.

So, you still get:

~ Smart form logic

~ Auto-filled known fields

~ Multi-step forms

~ CRM integration

~ Workflow triggers

Only now, you get all that with a form you can actually style and control.

How to get started (Yes, it’s actually this easy)

Ready to ditch the iframe life? Here’s how you get rolling:

1. Head over to your form in HubSpot.
   
2. Click that familiar “Publish” button.
   
3. You’ll see a new tab called “Developer Code”, that’s where the magic lives.
   
4. Copy the raw HTML that HubSpot gives you. No wrappers. No fluff.
   
5. Drop it straight into your site wherever you want the form to appear.
   
6. Style it with your existing CSS, Tailwind classes, or whatever your stack prefers.
   
7. Sprinkle in your JavaScript for custom validation, animations, tracking, yeah, basically go wild.
   
8. Hit refresh, and admire: a fully functional, fully on-brand, fully trackable HubSpot form.
   

Still not convinced it’s that easy? Here’s a quick screenshot of the interface 

Why this matters for dev-marketers

If you’re someone who lives at the intersection of code and campaigns, you know how important the form experience is.

It’s the front door to your lead funnel.

And with this update, HubSpot form customization finally catches up to the expectations of modern marketing teams.

No more asking devs to “try and make it look better.”

No more saying, “This is the closest we can get.”

Now, you build what you imagine, and HubSpot powers it behind the scenes.

Think of it like this: you no longer have to choose between form performance and design flexibility. You finally get the best of both.

The road ahead

In case you’d like to partner with Mavlers for your HubSpot needs, but seek clarity on what that entails for you, we suggest reading “What makes Mavlers a good choice for your HubSpot needs?“