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.

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.

fully customizable with no code