Style the new HubSpot forms in Webflow with your own CSS

The new HubSpot forms (new form editor, not legacy) work very differently from the old ones. Instead of classic CSS classes such as .hs-form or .hs-form-field, HubSpot now relies mainly on CSS custom properties (CSS variables) with the prefix --hsf-. You override them in the :root {} of your stylesheet.

Turn off the default styles

If you want full control, you can turn off HubSpot’s own styles completely in the embed code:

hbspt.forms.create({
  region: 'na1',
  portalId: 'YOUR_PORTAL_ID',
  formId: 'YOUR_FORM_ID',
  css: '', // ← empty string = no HubSpot default CSS
});

CSS custom properties (new forms, recommended)

You set every value in :root {}. These are the variables you can use:

:root {
  /* ── GLOBAL ─────────────────────────────── */
  --hsf-global__font-family: 'Inter', sans-serif;
  --hsf-global__font-size: 16px;
  --hsf-global__color: #1a1a1a;
  --hsf-global-error__color: #e53e3e;

  /* ── ROW / SPACING ───────────────────────── */
  --hsf-row__horizontal-spacing: 16px;
  --hsf-row__vertical-spacing: 16px;
  --hsf-module__vertical-spacing: 8px;

  /* ── BUTTON ──────────────────────────────── */
  --hsf-button__font-family: 'Inter', sans-serif;
  --hsf-button__font-size: 16px;
  --hsf-button__color: #ffffff;
  --hsf-button__background-color: #0057ff;
  --hsf-button__background-image: none;
  --hsf-button__border-radius: 6px;
  --hsf-button__padding: 14px 24px;
  --hsf-button__box-shadow: none;

  /* ── RICH TEXT ───────────────────────────── */
  --hsf-richtext__font-family: 'Inter', sans-serif;
  --hsf-richtext__font-size: 14px;
  --hsf-richtext__color: #1a1a1a;

  /* ── HEADING ─────────────────────────────── */
  --hsf-heading__font-family: 'Inter', sans-serif;
  --hsf-heading__color: #1a1a1a;
  --hsf-heading__text-shadow: none;

  /* ── BACKGROUND (form container) ────────── */
  --hsf-background__background-color: #ffffff;
  --hsf-background__background-image: none;
  --hsf-background__background-size: cover;
  --hsf-background__background-position: center;
  --hsf-background__background-repeat: no-repeat;
  --hsf-background__border-style: solid;
  --hsf-background__border-color: #e2e8f0;
  --hsf-background__border-radius: 8px;
  --hsf-background__border-width: 1px;
  --hsf-background__padding: 24px;

  /* ── PROGRESS BAR (Multi-Step) ───────────── */
  --hsf-progressbar-text__font-family: 'Inter', sans-serif;
  --hsf-progressbar-text__font-size: 14px;
  --hsf-progressbar-text__color: #1a1a1a;
  --hsf-progressbar-progressLine__background-color: #0057ff;
  --hsf-progressbar-progressLine__background-image: none;
  --hsf-progressbar-progressLine__border-color: transparent;
  --hsf-progressbar-progressLine__border-style: none;
  --hsf-progressbar-progressLine__border-width: 0px;
  --hsf-progressbar-trackLine__background-color: #e2e8f0;

  /* ── ERROR ALERT ─────────────────────────── */
  --hsf-erroralert__font-family: 'Inter', sans-serif;
  --hsf-erroralert__font-size: 14px;
  --hsf-erroralert__color: #e53e3e;

  /* ── INFO ALERT ──────────────────────────── */
  --hsf-infoalert__font-family: 'Inter', sans-serif;
  --hsf-infoalert__font-size: 14px;
  --hsf-infoalert__color: #1a1a1a;

  /* ── FIELD INPUT (Text, Email, etc.) ─────── */
  --hsf-field-label__font-family: 'Inter', sans-serif;
  --hsf-field-label__font-size: 14px;
  --hsf-field-label__color: #1a1a1a;
  --hsf-field-label-requiredindicator__color: #e53e3e;
  --hsf-field-description__font-family: 'Inter', sans-serif;
  --hsf-field-description__color: #6b7280;
  --hsf-field-footer__font-family: 'Inter', sans-serif;
  --hsf-field-footer__color: #6b7280;
  --hsf-field-input__font-family: 'Inter', sans-serif;
  --hsf-field-input__color: #1a1a1a;
  --hsf-field-input__background-color: #f9fafb;
  --hsf-field-input__placeholder-color: #9ca3af;
  --hsf-field-input__border-color: #d1d5db;
  --hsf-field-input__border-width: 1px;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-radius: 6px;
  --hsf-field-input__padding: 12px 16px;

  /* ── FIELD TEXTAREA ──────────────────────── */
  --hsf-field-textarea__font-family: 'Inter', sans-serif;
  --hsf-field-textarea__color: #1a1a1a;
  --hsf-field-textarea__background-color: #f9fafb;
  --hsf-field-textarea__placeholder-color: #9ca3af;
  --hsf-field-textarea__border-color: #d1d5db;
  --hsf-field-textarea__border-width: 1px;
  --hsf-field-textarea__border-style: solid;
  --hsf-field-textarea__border-radius: 6px;
  --hsf-field-textarea__padding: 12px 16px;

  /* ── FIELD CHECKBOX ──────────────────────── */
  --hsf-field-checkbox__padding: 4px 8px;
  --hsf-field-checkbox__background-color: #f9fafb;
  --hsf-field-checkbox__color: #1a1a1a;
  --hsf-field-checkbox__border-color: #d1d5db;
  --hsf-field-checkbox__border-width: 1px;
  --hsf-field-checkbox__border-style: solid;

  /* ── FIELD RADIO ─────────────────────────── */
  --hsf-field-radio__padding: 4px 8px;
  --hsf-field-radio__background-color: #f9fafb;
  --hsf-field-radio__color: #1a1a1a;
  --hsf-field-radio__border-color: #d1d5db;
  --hsf-field-radio__border-width: 1px;
  --hsf-field-radio__border-style: solid;
}
  --hsf-field-checkbox__border-width: 1px;
  --hsf-field-checkbox__border-style: solid;

  /* ── FIELD RADIO ─────────────────────────── */
  --hsf-field-radio__padding: 4px 8px;
  --hsf-field-radio__background-color: #f9fafb;
  --hsf-field-radio__color: #1a1a1a;
  --hsf-field-radio__border-color: #d1d5db;
  --hsf-field-radio__border-width: 1px;
  --hsf-field-radio__border-style: solid;
}