5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T1092,

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.

5a:[["$","$L5d",null,{"post":{"id":"019db662-d2d7-74f0-b7e6-66f1172f9cab","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7c929c23-1162-47a4-b459-a0651efe64aa","name":"Concealed","slug":"concealed","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1242931/avatar-UwgSqFrdUyvuNG93m0Z8JtGKDbBCSt.jpg","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"swhV2IBMDVfwnGVM8DpT","resolved":true,"title":"HubSpot Form","body":"$5e","bodyJson":null,"introduction":"fully customizable with no code","slug":"hubspot-form","author":{"framerUserId":"7c929c23-1162-47a4-b459-a0651efe64aa","name":"Concealed","slug":"concealed","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1242931/avatar-UwgSqFrdUyvuNG93m0Z8JtGKDbBCSt.jpg","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/swhV2IBMDVfwnGVM8DpT/hubspot-form-woie8QvVnwU4AmmEDzRsdpKB2GGOVl","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-14T11:42:14.658Z","updatedAt":"2026-04-27T09:53:28.734Z","publishedAt":"2026-04-22T18:10:23.063Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://spectacular-strategy-555504.framer.app/","price":"13","paymentUrl":"https://buy.polar.sh/polar_cl_klAayKafwssSpeyj0FK9v2Qjkp90efO1M5Xev3KiaBw","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"7ckmZfkhole12uW9U1OZ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-22T18:10:23.063Z","updatedAt":"2026-04-22T18:10:23.063Z","reported":false}}],"$L5f"]

Suggested for you