# Hubspot form

External component that embeds a HubSpot form (portal + form GUID) inside a standard site section, with optional heading and rich-text copy around the form.

## Fields & Schema

| Field | Type | Required | Notes |
|-------|------|----------|-------|
| `cmsLabel` | Symbol | Yes | Internal label for CMS/analytics. |
| `externalComponentType` | Symbol | Yes | Must be `Hubspot form`. |
| `heading` | Symbol | No | Section heading above the form. |
| `preHeading` | Symbol | No | Eyebrow above the heading (paragraph, not a heading tag). |
| `postHeading` | Symbol | No | Supporting line under the heading. |
| `copy` | RichText | No | Intro copy beside/above the form. |
| `additionalCopy` / `extraCopy` | RichText | No | Secondary copy regions when used by the layout. |
| `anchor` | Symbol | No | In-page jump target id. |
| `backgroundColour` / `textColour` | Symbol | No | Palette colour names for the section. |
| `data` | Object | Yes* | HubSpot payload (see below). |
| `html` | Text | No | Not the primary path for HubSpot forms. |
| `internalLink` / `externalUrl` / `attachment` | Link/URL/Asset | No | Optional supporting fields; form config lives in `data`. |

### `data` object (HubSpot)

| Key | Type | Required | Notes |
|-----|------|----------|-------|
| `formId` | string | Yes | HubSpot form GUID. |
| `portalId` | string | No | Defaults to server `HUBSPOT_PORTAL_ID` when omitted. |
| Other keys | — | No | As supported by `@se-studio/hubspot` form data type (region, css, etc. if used). |

Server also needs `HUBSPOT_PAT` to load form definitions. Missing `formId` or portal config surfaces an on-page error indicator in non-production.

## Usage

Use for marketing lead forms, newsletter signups, and any HubSpot-managed form that should match site styling.

```
cms-edit add "Hubspot form" --content-type externalComponent --target content
```

Then set `data` JSON, for example:

```json
{ "formId": "<hubspot-form-guid>" }
```

Prefer a short heading, clear offer copy, and a high-contrast background/text pair. Do not paste raw HubSpot embed HTML into `html` when `data.formId` works — the site renderer loads the form definition and applies HopSkipDrive form classes.