# Hubspot form

External component: a HubSpot form. The same entry can render as the HubSpot embed iframe or as the on-site form.

## Fields & Schema

| Field | Type | Required | Notes |
|-------|------|----------|-------|
| externalComponentType | Symbol | Yes | Set to `Hubspot form` |
| data | Object | Yes | JSON below |

`data` keys:

| Key | Type | Required | Notes |
|-----|------|----------|-------|
| portalId | string | Yes for iframe | HubSpot portal. Native forms fall back to `HUBSPOT_PORTAL_ID` |
| formId | string | Yes | HubSpot form GUID |
| region | string | Yes for iframe | Example `na1`. Ignored when `iframe` is false |
| formWidth | number | No | Percent width from the laptop breakpoint up |
| iframe | boolean | No | Omitted or `true` keeps the embed iframe. `false` renders the on-site form |
| submitButtonText | string | No | Native only |
| submittingButtonText | string | No | Native only. Pending button label |
| submitErrorText | string | No | Native only |
| submitTooFastText | string | No | Native only |
| hiddenFields | object | No | Native only. Static hidden field values |

## Usage

Add a Hubspot form external component and set `data`. Leave `iframe` unset to keep the current embed. Set `"iframe": false` only after the on-site form has been checked. Do not publish that change until it is accepted. A form with HubSpot CAPTCHA turned on cannot be submitted on-site. Leave `iframe` on for that form, or turn CAPTCHA off in HubSpot before switching.

Example:

```json
{
  "portalId": "4846411",
  "formId": "form-guid",
  "region": "na1",
  "iframe": false
}
```