Forms and CTAs
HubSpot forms and CTAs take the theme's look automatically, so they match your buttons and colors in light and dark mode.
Forms
Create forms in MarketingForms, then choose them in a module. These modules have a form slot:
- Form Hero: a hero with the form in a card, used on Book a demo and Lead capture.
- Call to Action Banner: a newsletter or download form. On the Resource download template the form card stays in view while visitors read; choose its form in the banner's Content tab.
- Site Footer and Blog Post sidebar: newsletter forms (a form with an email field).
- Case Study Detail: a form that unlocks a gated case study and its download.
- Contact and other templates use HubSpot's standard form module, styled by the theme.
Every form uses the Forms group of the theme settings: field and button colors, the focus color and the corner radius. Leave a color empty to follow the current light or dark palette. The submit button follows the theme's button style.
New and legacy forms
The styles cover HubSpot's legacy forms (multi-column fields, checkboxes, radio buttons, file uploads, consent text and reCAPTCHA) and forms made in the new form editor. The new form editor also has its own style options; if a form there looks different, check that its style is not overriding the theme.
| Setting | Type | What it does |
|---|---|---|
| Form background | Color | Background behind the whole form. Empty: no background. |
| Form border | Color | Border around the whole form. Empty: no border. |
| Label color | Color | Field labels and the required star. |
| Field background | Color | |
| Field border | Color | |
| Field text | Color | |
| Field focus color | Color | Border and glow while a field is in use. |
| Submit button background | Color | |
| Submit button text | Color | |
| Submit button background on hover | Color | |
| Field and button corner radius | Number | Empty: uses the theme button radius. |
Buttons and HubSpot CTAs
Most modules have one or two buttons. Each button slot has:
- Button text and Link: a normal theme button.
- HubSpot CTA ID (optional): paste the ID of a CTA from MarketingCTAs to show it instead of the button. HubSpot then tracks its views and clicks, and you can A/B test it or use smart rules.
Find a CTA's ID
Go to MarketingCTAs and open the CTA. The ID is the number in the page address (a legacy CTA uses a longer code with dashes, which also works). Paste it into the module's HubSpot CTA ID field. The field only accepts a valid ID, and an empty field shows the normal button.
Works on every subscription
The CTA ID field is a plain text field, so the theme installs on every HubSpot subscription. Adding a CTA needs HubSpot's CTA tool in your account; without it, leave the field empty and use the normal button.
With Match HubSpot CTAs turned on in Theme settings › Buttons, CTAs chosen in a button slot take the theme button look: the main button is filled and the second one is outlined. Turn it off to keep the design you made in the CTA editor.
To use the theme look on a CTA placed anywhere else (for example inside rich text), wrap it in an element with the class sf-hs-cta.