HubSpot Form

Description

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.

Customization

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.

Styling

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

Usage

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.

Properties

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

This component is ideal for

Marketers, designers, and developers who want to visually style HubSpot forms directly in Framer while keeping full functional integration with HubSpot CRM.