---
title: "HubSpot Form — Framer component · Best of Framer"
description: "$13.00 · Framer component · by Concealed · Forms. Description The HubSpot Form component lets you seamlessly embed HubSpot forms in your Framer projects — while retaining complete control…"
canonical: "https://framer.elliotli.dev/component/hubspot-form"
---

[Home](/)/[Components](/components)/[Forms](/components/category/forms)/HubSpot Form

# HubSpot Form

fully customizable with no code

[View on Framer](https://framer.com/marketplace/components/hubspot-form/?via=elliot-li)

![HubSpot Form preview image 1](https://framer.elliotli.dev/og/component/hubspot-form/f0ad4039a4333f67/1600x1200.jpg)

## Summary

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

### 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #6225

## Details

- **Author**: Concealed
- **Price**: $13.00
- **Published**: 2026-04-22
- **Updated**: 2026-04-27
- **Added**: 2026-04-14
- **Categories**: Forms

## More across types

-   [Wallble: Guest Book & Wall of Love](/plugin/wallble-guest-book-wall-of-love) — Wallble · Free — Guest book & Wall of Love

## More like this

-   [Stay Booking Pro](/component/stay-booking-pro) — Design Foundry · $10 — Stay Planner with Dynamic Pricing
-   [Postcode Checker](/component/postcode-checker) — Sean Weekes · $15 — Do we cover your area? (UK
-   [Property Calculators](/component/property-calculators) — Sean Weekes · $12 — UK Stamp Duty, mortgage and yield
-   [UTM Lead Capture](/component/utm-lead-capture) — Sean Weekes · $9 — See where every lead came from