A full-width CTA section for HubSpot CMS — not a popup. Pick from six layouts, drop in buttons or your own HubSpot form, and style every part from the editor. The eight examples below are all the same module.
Six layouts, buttons or an embedded HubSpot form, and solid, gradient, image or video backgrounds — all set from the module's fields.
Eyebrow, heading, sub-text and two pill buttons, centered on a deep gradient. A techy Space Grotesk heading and a gold accent.
An editorial, warm-cream band — Fraunces serif heading left, terracotta solid + ghost buttons right with crisp square corners. Collapses to stacked on mobile.
Message left, your embedded HubSpot form right — submissions route into your CRM. The form below is a real, live HubSpot form; the card, inputs and button are all styled from the module's fields.
Heading, a one-line subtitle and a single button on a compact row — for dropping between content blocks without taking a whole screen. Wraps cleanly on mobile.
Heading, sub and a row of trust points — "2,000+ teams", "4.9 rating" — then the buttons. The stats are a small repeater with their own typography and dividers.
The CTA sits in a rounded, shadowed card on a tinted section — perfect inside narrower content areas. An elegant DM Serif Display heading and a violet button.
Two background types, two treatments. The image sits in a contained, rounded section, left-aligned with square buttons; the video below runs full-width, edge to edge, with its content in a centered container.
Full-bleed background, no corner radius, content held in a centered container.
This page is the demo and the manual. The sections above are the live module; everything below explains how to build them and what every field does.
CTA Section Pro is a full-width, in-page conversion section — the "Ready to get started?" band every site has above the footer, on product pages, and at the end of landing pages. It is not a popup, slide-in or exit-intent overlay (HubSpot's native CTA tool does those). It's a styled section that sits inside your page content, driving a single conversion with buttons or an embedded HubSpot form.
Each preset works with buttons or a form, and each looks intentional with one CTA, two CTAs, or a form. The eight examples above are all the same module — only the fields differ (Space Grotesk, Fraunces, Manrope and DM Serif Display headings; pill, sharp and rounded buttons; gradient, solid, image and video backgrounds).
Set the Conversion element to HubSpot form (or use the Split — form layout) and pick a form with HubSpot's native form selector. HubSpot renders the form; submissions route into your own CRM. We style the surround — card background, radius, padding — and the reliable form controls: input background, border, radius, label colour, field spacing and the submit button. HubSpot's form markup varies between versions, so we expose only the controls that work consistently, and never break the form's own labels or accessibility.
Choose a solid colour, a two-stop gradient (HubSpot’s native gradient picker), an image, or a looping video — each with an overlay (colour or gradient + opacity) so text stays readable. The background controls live in the Style tab; the video file is picked in the Content tab (HubSpot doesn’t allow file fields in Style). Image/video lazy-load; optional parallax drifts them on scroll (disabled under reduced-motion). Defaults keep text at WCAG AA contrast.
Every visible value is a field: section padding, max-width, full-bleed vs contained, radius, border and shadow; independent eyebrow / heading / sub typography (font, size, weight, colour); the primary and secondary buttons (background, hover, text, border, radius, padding, optional icon and position); the stat row and the card preset. The base font inherits your theme body font and the primary button inherits your theme primary colour, so it looks right the moment you drop it in.
prefers-reduced-motion.| Field | Where | What it does |
|---|---|---|
| Layout & conversion | Content | Layout preset (6) + conversion element (buttons or HubSpot form). |
| Content | Content | Eyebrow, heading, heading tag (H2/H3), sub-text. |
| Buttons | Content | Primary + secondary label, link, optional icon and icon position. |
| Form | Content | Enable, heading, HubSpot form selector, small-print line. |
| Trust points | Content | Repeater of value + label (Stat-backed preset only). |
| Background | Style | None / colour / gradient / image / video, overlay, position. |
| Video background | Content | The video file (.mp4) + poster, when Background type is Video. |
| Layout (style) | Style | Max width, content width, padding, alignment, full-bleed, gaps. |
| Typography | Style | Eyebrow / heading / sub fonts, sizes, weights, colours. |
| Buttons (style) | Style | Colours, hover, border, radius, padding, icon size + gap. |
| Form (style) | Style | Card, inputs, labels, submit button styling. |
| Stat-backed | Style | Value/label fonts, layout, gap, dividers. |
| Card preset | Style | Card background, border, radius, padding, max-width, shadow. |
| Effects | Style | Entrance animation, stagger, background parallax. |
| Decoration | Style | Section radius, border, shadow. |
| Responsive | Style | Breakpoints, mobile padding, full-width buttons on mobile. |