Form¶
An embedded HubSpot form with an optional heading, plus full styling control over the form wrapper (layout preset, background, border, round corner, shadow, padding, field spacing). Best for: contact sections, lead capture, newsletter signups, demo requests, "get in touch" blocks.
📷 Hero image
Target file: assets/img/form/hero.webp
An embedded contact form on a Light background with a short heading above it and a stack of labeled input fields, ending in a solid Primary submit button. Show a clean single-column layout with comfortable spacing between fields. Keep the form centered with generous whitespace around it. Captured at desktop width.
At a glance¶
Form Lead capture Contact
- What it does: renders a chosen HubSpot form inside a styled wrapper, with an optional heading above it. Pick one of three layout presets that rearrange fields and labels, then override the wrapper background, border, round corner, shadow, and inner padding.
- Best used for: a contact or "get in touch" section, a newsletter signup, or a demo-request block.
- Not the right fit if: you only need a button that links to a form elsewhere (use Buttons) or a full CTA band with copy (use Call to Action).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Form.
- Drag it where you want the form to appear.
- Open Click to update content › Form and choose which HubSpot form to embed.
- Optionally turn on Add title and write a heading above the form.
- Under Style › Form style, pick a layout preset (
form-1/form-2/form-3). - Style the wrapper with Form background, Form border, Form round corner, and Form shadow (each has its own override toggle).
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
Just a heading and the form, no wrapper styling.
📷 Result
Target file: recipe-plain-inline-form-default.webp
A bare inline form with a heading and stacked input fields, no card box or border around the wrapper, on a Light background. End with a solid Primary submit button.
| Field | Set to |
|---|---|
| Content › Add title | on |
| Form style › Style of form | form-1 |
| Form background › Override background | off |
| Form border › Override border | off |
The form boxed like a card with a background and shadow.
📷 Result
Target file: recipe-card-form.webp
The whole form wrapped in a rounded card with a Light background, a thin border, and a soft shadow, floating on the section background.
| Field | Set to |
|---|---|
| Form background › Override background | on (a token or custom color) |
| Form border › Override border | on |
| Form round corner › Override round corner | on (e.g. 16) |
| Form shadow › Override form shadow | on |
A translucent, frosted wrapper.
📷 Result
Target file: recipe-glass-form.webp
The form inside a translucent frosted-glass wrapper over a colorful or image background, with the blurred background showing softly through the panel.
| Field | Set to |
|---|---|
| Form background › Override background | on (custom color with transparency) |
| Form background › Make background blur | on |
| Form background › Blur radius | e.g. 8 |
A submit button stretched across the form.
📷 Result
Target file: recipe-full-width-submit.webp
A form whose solid Primary submit button stretches the full width of the form beneath the fields, using the form-2 field arrangement.
| Field | Set to |
|---|---|
| Form submit button › Make a form submit button in full width | on |
| Form style › Style of form | form-2 |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Pick which form shows | Content › Form |
| Add a heading above the form | Content › Add title + Title |
| Change field arrangement | Form style › Style of form (form-1/form-2/form-3) |
| Box the form like a card | Override each of Form background + border + round corner + shadow |
| Glass / frosted form | Form background › Make background blur |
| Pad inside the form | Form spacing › Override spacing (desktop/tablet/mobile) |
| Tighten gap below each field | Spacing › Override spacing under form fields |
| Set column gap in multi-column forms | Spacing › Override spacing between form fields |
| Stretch the submit button | Form submit button › Make a form submit button in full width |
| Change how the submit button looks | Theme Settings › Form › the matching Form style › Submit button › Button style |
| Anchor link to this form | Content › Drag to section name › Section name |
Where the submit button look comes from
The submit button is rendered by HubSpot, so it cannot carry a theme button class. Its look comes from Theme Settings > Form > Form style 1/2/3 > Submit button > Button style, which points at one of the eight theme buttons. The Style of form choice on this module decides which of the three applies.
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. (130 fields total - expand each group as needed.)
Content tab¶
Click to update content
| Field | Type | Default |
|---|---|---|
| Add title / Title | boolean / text | on / Title |
| Form | form | required (inline response) |
Response handling (inline message or redirect) is carried from the form's own HubSpot config.
Section background settings + Drag to section name + Developer
- Section background:
none/color/image/video(Style tab adds overlay, position, blur, parallax, and dual radial glows). - Drag to section name: custom section ID for scroll-to-section links.
- Developer use only: per-module custom CSS 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 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: default / full-width / custom (per breakpoint) + block alignment.
- Inner content container: independent inner width + alignment.
Preset Settings - Title
| Field | Options | Default |
|---|---|---|
| Show title as | h2-h6 | h6 |
| Text transform | uppercase / lowercase / capitalize / as it is | as_it_is |
| Text color | tokens / custom | text-default |
| Spacing under element | sb-0 to sb-4xl | sb-l |
Form style + Form spacing
- Style of form:
form-1/form-2/form-3- each preset changes the field and label arrangement (defaultform-1). - Form spacing: Override spacing toggle, then responsive inner padding (desktop / tablet / mobile).
Form background / border / round corner / shadow
Each group has its own Override toggle and does nothing until it is on:
- Form background: none / token / custom color / custom gradient, plus Make background blur (glass effect) with a blur radius.
- Form border: width, token or custom color.
- Form round corner: custom radius in px.
- Form shadow: x / y / blur / spread / color.
Form submit button + Spacing
- Make a form submit button in full width: stretch the submit button (shows on the live page).
- Spacing under form fields: override the vertical gap below each field (desktop / mobile).
- Spacing between fields: override the horizontal gap for multi-column form layouts.
Tips & gotchas¶
Wrapper styles are opt-in
Background, border, round corner, shadow, and padding each stay off until you flip their Override toggle. Start from the plain inline form and turn on only what you need.
Full-width submit may not preview in the editor
The full-width submit stretch shows on the live page but does not always render inside the HubSpot editor preview. Check the published page to confirm.
Column gaps apply to multi-column forms only
Spacing between form fields sets the horizontal gap between side-by-side fields, so it has no visible effect on a single-column form layout.
Related modules¶
- Buttons: when you only need a button that links to a form elsewhere.
- Call to Action: a full CTA band with copy to pair above the form.
- Contact Card: a grid of contact methods to sit beside the form.