HubSpot Form Styler — Custom CSS for Webflow

Why HubSpot forms look different on your site

An embedded HubSpot form brings its own markup — .hs-form, .hs-form-field, .hs-input, .hs-button — and, unless you turn it off, HubSpot’s default stylesheet. The result rarely matches a carefully designed Webflow site: different fonts, narrow inputs, floated half-width columns and a generic orange button. Styling the form means overriding those classes with CSS that is specific enough to win.

What this styler covers

• Layout — full-width inputs, consistent spacing, and two- or three-column fieldsets rebuilt with flexbox (stacked on mobile).
• Inputs — text, email, select (with a custom arrow), textarea, checkboxes and radios with your accent colour.
• States — focus ring, invalid fields and HubSpot’s error messages, with the “please complete all required fields” roll-up hidden.
• Consent text and links — GDPR and legal text in a smaller, readable style.
• Button — colours, hover, radius, padding and full-width option.
• Thank-you message — the inline .submitted-message after submit.

All rules are scoped to the container class .hubspot-form, so they can’t affect anything else on the page.

Important: raw HTML forms vs iframe forms

CSS on your page can only style a form that renders in the page. HubSpot forms embedded with the classic hbspt.forms.create (v2) script render as HTML when the form is set as a raw HTML form (form options in HubSpot; availability depends on your HubSpot plan). Forms that render inside an iframe — including forms built with HubSpot’s newer form editor — can’t be styled from outside; style those in HubSpot’s own style settings instead. Quick test: right-click a form field on your live page and choose Inspect — if you see class="hs-input" directly in the page, this CSS will work.

The option css: "" in the embed code tells HubSpot not to load its default form CSS, so your styles apply cleanly. Untick it if you prefer to only override a few details.

Adding a HubSpot form in Webflow

1. Paste the Code Embed from this tool (or add a Code Embed and paste the full embed code).
2. The form only appears on the published site — the Designer shows an empty embed.
3. If you have several forms on one page, give each a different container ID.
4. Track conversions with hidden fields and UTM parameters, or listen for HubSpot’s onFormSubmitted callback in your footer script.

Matching colours from your design system? Convert them with the Color Converter and check text contrast with the Contrast Checker. For native Webflow sections, see HTML & CSS to Webflow.

Tools that pair well with the HubSpot Form Styler

• Date Format Converter — Paste a date format like DD.MM.YYYY HH:mm and get the equivalent for Make, Zapier, n8n, date-fns, Python and PHP — with a live preview and ready-to-paste expressions.
• JSON Path Finder — Paste a webhook payload or API response, click any value and copy its exact path — for JavaScript, JSONPath, jq, Python, PHP, n8n and Make.
• HTML & CSS to Webflow — Paste HTML and its CSS, click Copy to Webflow and paste into the Designer — you get real Div Blocks, Headings, Links, Images and Lists with classes, combo classes, tablet/mobile breakpoints and hover states instead of one big Code Embed.
• UTM Builder — Add utm_source, utm_medium, utm_campaign and friends to any link, see which GA4 channel the visit will land in, and tag a whole list of URLs at once.