The HubSpot Form component lets you seamlessly embed HubSpot forms in your Framer projects — while retaining complete control over their look and feel. Instantly match your brand with editable typography, colors, spacing, borders, shadows, and more — all without touching CSS.
It’s powered by HubSpot’s official embed API, ensuring your forms stay fully functional, responsive, and synced with your HubSpot account.
You can customize all the content:
Form Data — Enter your Portal ID and Form ID to connect your HubSpot form.
Global Styles — Set base typography, text colors, and colors that apply across all elements.
Rows & Spacing — Adjust vertical and horizontal spacing between rows, fields, and modules.
Buttons — Customize font, text color, background, border, radius, padding, and shadows.
Headings & Text — Control typography, text color, and even apply text shadows for emphasis.
Fields (Input, Textarea, Checkbox, Radio) — Style labels, inputs, placeholders, borders, padding, and background colors.
Alerts (Error & Info) — Match your brand by styling alert colors and typography.
Progress Bar — Customize the font, progress colors, track colors, and borders.
Background — Set background color, image, size, position, repeat, padding, border, and radius.
Extra CSS — Add any custom CSS directly from the property panel.
You can control all the styles:
Typography (font, weight, size, and color)
Borders (style, color, radius, and width)
Spacing (padding, margin, and gaps between elements)
Shadows, including box shadows and text shadows
Background images with size, position, and repeat options
Color customization
To use the component, copy it into your Framer project.Enter your HubSpot Portal ID and Form ID to load your form automatically.
All visual and layout properties can be adjusted directly from the right-hand sidebar in the HubSpotForm section.
HubSpot Settings
Portal ID — Your HubSpot account portal ID
Form ID — The HubSpot form ID to embed
Global Styles
Font — Default typography for all form elements
Text Color — Base text color
Error Color — Color for error states
Row Settings
Horizontal Spacing — Adjust row spacing
Vertical Spacing — Adjust vertical spacing between fields
Module Spacing — Adjust spacing between form modules
Buttons
Font, color, background, border radius, padding, and shadows
Headings & Text
Font, color, and text-shadow
Fields
Label, description, footer, and input text styles
Placeholder and background color controls
Border and padding controls
Progress Bar
Font, progress colors, track colors, border styles
Background
Color, image, size, position, repeat
Border and padding controls
Extra CSS
Add custom CSS for advanced styling overrides
Marketers, designers, and developers who want to visually style HubSpot forms directly in Framer while keeping full functional integration with HubSpot CRM.
João Saraiva
