Skip to content

Banner with Form

A two-part banner that pairs a content column (subtitle, title, description, feature list, buttons) with a HubSpot form, side by side or stacked. Best for: lead-capture heroes, "request a demo" / "get a quote" banners, newsletter signups, contact sections, and gated-content offers.

Skeleton layout of the Banner with Form module
Structure at a glance

📷 Hero image

Target file: assets/img/banner-with-form/hero.webp

A two-part lead-capture banner captured edge to edge. The left column holds a subtitle, a bold headline with one word highlighted in the Secondary color, a short paragraph or feature checklist, and a Primary CTA button; the right column holds a HubSpot form with labelled fields and a Primary submit button. Sit both over a Light or gradient background. Captured at desktop width so the side-by-side split is clear.

At a glance

Hero Form Lead-gen

  • What it does: renders a banner split into a left content column (subtitle, title with highlight / stroke / image-fill, description, feature checklist, CTA buttons) and a right form column embedding a HubSpot form. The form wrapper can take its own background, border, radius, shadow, glass blur, and padding.
  • Best used for: a demo/quote request hero, a newsletter or contact form banner, or any gated-content offer where the form is the main call to action.
  • Not the right fit if: you want the form as one of several right-column options rather than the focus (use Multi Column Banner - Simple), a hero with no form (use Single Column Banner - Simple), or a standalone form block (use Form).
  • 🔗 Live demo: (add demo link)

Add it to your page

  1. In the HubSpot page editor, click Add and search for Banner with Form.
  2. Drag it to the top of your page.
  3. Open Click to update content › Left column and set your Tag, Title, and (optionally) description, feature list, and buttons.
  4. Open Right column and pick your Form.
  5. On the Style tab, choose Layout settings › Width › Layout style (horizontal or vertical) and the Content - form ratio.
  6. Turn on Card UI and style the form under Card UI settings: background, border, round corner and shadow.

Design recipes

Each recipe is a look plus the exact fields to reproduce it.

Content on the left, form on the right, equal columns.

📷 Result

Target file: recipe-horizontal-lead-capture-default.webp

The banner split into two equal columns - copy and CTA on the left, the HubSpot form on the right. Capture the full width at desktop so both columns are visible.

Field Set to
Layout settings › Width › Layout style horizontal
Layout settings › Width › Content - form 1fr 1fr
Form style › Style of form form-1

A wider form column to draw focus to the fields.

📷 Result

Target file: recipe-form-emphasis-ratio.webp

The banner with a narrower content column and a noticeably wider form column, the form centered within its side. Capture at desktop width so the uneven split reads clearly.

Field Set to
Layout settings › Width › Content - form 2fr 3fr

Content above, form below, centered.

📷 Result

Target file: recipe-vertical-stack.webp

The banner stacked vertically - centered copy on top with the HubSpot form directly below it. Capture at desktop width so the single-column centered stack is clear.

Field Set to
Layout settings › Width › Layout style vertical
Layout settings › Width › Content alignment text-center

A frosted-glass form over an image section.

📷 Result

Target file: recipe-glassmorphism-form.webp

The form rendered as a frosted glass card - a blurred, semi-transparent panel - floating over a photographic background image. Capture at desktop width so the blur against the image behind it is visible.

Field Set to
Section background › Type image
Style › Card UI on
Card UI settings › Background › Make background blur on
Card UI settings › Background › Blur radius 4

"I want to..." quick reference

Goal Setting
Put the form beside the content Layout settings › Width › Layout style = horizontal
Stack content above the form Layout settings › Width › Layout style = vertical
Make the form column wider Layout settings › Width › Content - form = 2fr 3fr
Swap which side the form is on Layout settings › Width › Reverse column order
Choose when columns stack Layout settings › Width › Stacking on which responsive breakpoint?
Give the form a glass effect Style › Card UI, then Card UI settings › Background › Make background blur
Round the form corners Card UI settings › Round corner › Round corner
Full-width submit button Form submit button › Full-width submit button
Highlight a word in the title Wrap the word in <span>, then Title › Highlight style
Outline the title text Title › Text style = stroke
Fill the title with an image Title › Text style = image_text + upload image
Add a checklist of benefits Content › Show feature list + Feature items
Show features in two columns Feature list › Feature list columns [desktop] = 2
Add CTA buttons Content › Show button + Buttons repeater

Field reference

The editor is organized into a Content tab and a Style tab. Full field lists are grouped exactly as they appear in HubSpot. (217 fields total - expand each group as needed.)

Content tab

Section background settings
Field Type Options Default
Type choice none / color / image / video none
Upload background image image - -
Video file - -
Click to update content - Left column
Field Type Default
Show tag / Tag boolean / text on
Show title / Title boolean / text on
Add description / Description boolean / richtext off
Add features list / Feature items boolean / repeater off
Add buttons / Buttons boolean / repeater off

Buttons (per button): Type (link / drag_to_section / cta), Style (btn-1 to btn-8), Link/Section/CTA, Title, optional Icon.

Click to update content - Right column

Form (required): the HubSpot form to embed, with its own response type, message, and redirect.

Developer use only

Add custom css here: per-module CSS injection field.

Style tab

Color scheme
Field Options Default
Color scheme light / dark light

Drives the section's surface and text tokens. Set the background Type to none (shown as "Default (scheme)") to let the scheme supply the background colour.

Section background settings
  • Color: Primary, Secondary, Tertiary, Light, Dark, White, Black, White transparent, or a custom color or custom gradient (default bg-light).
  • Image / Video: overlay (none / solid / gradient, plus a custom overlay color or gradient) and focal position.
  • Blur: toggle + amount. Parallax: toggle + scale + speed.
  • Radial glow (x2): two soft glows, each with a color (default Secondary / Tertiary), one of 9 positions, size, and opacity.
  • Use custom overlay: override the default image/video overlay with a custom color.
  • Background pattern: toggle Add pattern, then choose a style (Grid, Dots, Diagonal lines, Diagonal cross, Circuit board), its colour and opacity, a tile size, and a fade (none / top / bottom / left / right / edges) with a fade amount. Hidden when Type is Image or Video, because a pattern needs a flat surface to read against.
Section divider settings

Divider type: none / shape / border / shadow.

  • Border divider: from top/bottom/both, width, color (default Tertiary).
  • Shadow divider: regular / light / dark / custom shadow with x/y/blur/spread/color.
  • Shape divider: 25 shapes, top/bottom/both, flip/invert, color or gradient, responsive heights.
Section spacing settings
Field Options Default
Top top-y-0 to top-4xl top-xl
Bottom bottom-y-0 to bottom-4xl bottom-xl
Left left-x-0 / left-m / left-l / left-xl left-m
Right right-x-0 / right-m / right-l / right-xl right-m

Top and Bottom also accept custom, which reveals Custom top / Custom bottom number fields for desktop, tablet, and mobile (defaults 80 / 60 / 40).

Layout settings
  • Section wrapper container and Inner content container: width + alignment control.
  • Width: Layout style (horizontal / vertical), Content - form ratio (default 1fr 1fr), stacking breakpoint, vertical alignment, content alignment, and Reverse column order.
  • Gap between column: responsive gap (large / medium / small screen).
Form style

Style of form: form-1 / form-2 / form-3 (default form-1). Visual preset for the form fields and layout.

Element settings (content column)

Each has its own typography, color, and spacing fields:

  • Subtitle: show as h1-h6 / typo / default (default h6), color, transform, letter spacing, bold.
  • Title: show as h1-h6 or custom size (default h2, 72 / 52 / 36), per-screen line height, color / gradient, highlight style, and text style (none / stroke / image_text).
  • Description: typo style, color, spacing, and font-weight override.
  • Buttons: any button set to the Simple Link style (btn-7) switches to its own controls (color, underline + offset, bold, icon size and gap); the other seven skins share a size, an icon-to-text gap, and a full-width-on-mobile toggle. Gap between buttons applies to both.
  • Feature list: shared icon, icon size/color, optional icon background shape (color/radius/padding), spacing, and 1 or 2 Feature list columns [desktop].
Form styling groups
  • Form spacing: override the padding inside the form (desktop / tablet / mobile, default 24px).
  • Background: a token, colour or gradient, plus Make background blur for glassmorphism.
  • Border: show border, width and token or custom colour.
  • Round corner: round-0 to round-xxl, or a custom radius.
  • Shadow: none / light / regular / dark.
  • Form submit button: Full-width submit button.
  • Spacing: override the spacing under and between form fields.

Tips & gotchas

Glass form over an image

For the frosted-glass look, set the Type to image first, then turn on Card UI settings › Background › Make background blur. Blur only shows off when there is something behind the form to blur.

Button icons and CTA type

The per-button Add icon option does not apply when a button's Type is set to cta. Use link or drag_to_section if you need an icon on the button.

Reverse order for form-left layouts

Turn on Reverse column order to move the form to the left and the content to the right without re-typing anything.

Frequently asked questions

Can the content stack above the form instead of sitting side by side?

Yes. Set Layout settings › Layout › Layout style to Vertical. Horizontal (the default) places them side by side; the width-ratio, reverse-order, and vertical-alignment fields only apply to horizontal.

Can I make the form column wider or narrower than the content column?

Yes, in horizontal layout only. Layout settings › Layout › Content - form picks the ratio, from 50 x 50 (default) up to 30 x 70 or 70 x 30 either way.

At what screen width does it switch from side-by-side to stacked?

You choose. Stacking on which responsive breakpoint? is 1023px by default, or set it to 767px to keep the two columns side by side further down into tablet widths.

Is there a limit on how many buttons I can add?

Yes, up to 4. Click to update content › Left column › Buttons is a repeater capped at 4 items (minimum 1).

Is there a limit on how many feature list items I can add?

No. Feature list has no maximum, so add as many checklist lines as you need.

Can I embed a custom-coded form instead of a HubSpot form?

No. Right column › Form only picks an existing HubSpot form from your account; it isn't a rich text or HTML field, so raw form markup can't be pasted in.