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.

📷 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 Subtitle, 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. Style the form under Form background, Form border, Form round corner, and Form 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
Form width › Maximum form width 600
Form width › Form alignment center

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
Form background › Override background on
Form background › Make background blur on
Form 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?
Cap the form width Form width › Maximum form width
Give the form a glass effect Form background › Override background + Make background blur
Round the form corners Form round corner › Override round corner + radius
Full-width submit button Form submit button › Make a form submit button in full width
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 › Add features list + Feature items
Show features in two columns Feature list › Feature list columns = 2
Add CTA buttons Content › Add buttons + 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 / gradient / image / video none
Upload background image image - -
Video file - -
Click to update content - Left column
Field Type Default
Show subtitle / Subtitle 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 / Gradient: token color (default bg-white) or token gradient (default bg-gradient-1).
  • Image / Video: overlay style (none / bg-overlay-1 to bg-overlay-6) 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.
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-l
Bottom bottom-y-0 to bottom-4xl bottom-l
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 width: Maximum form width (default 600) + form alignment within its column.
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: gap between icon and text, gap between buttons.
  • Feature list: shared icon, icon size/color, optional icon background shape (color/radius/padding), spacing, and 1 or 2 Feature list columns.
Form styling groups
  • Form spacing: override the padding inside the form (desktop / tablet / mobile, default 24px).
  • Form background: Override background with a token/color/gradient, plus Make background blur for glassmorphism.
  • Form border: override with width and token/custom color (default Light).
  • Form round corner: override with a custom radius.
  • Form shadow: override with a custom box shadow (offset / blur / spread / color).
  • Form submit button: Make a form submit button in full width.
  • Spacing: override the spacing under and between form fields.

Tips & gotchas

Glass form over an image

For the frosted-glass look, set the Section background Type to image first, then turn on Form 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.