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 Show title and write a heading above the form.
- Under Style › Preset settings › Form style, pick which theme form style the fields use (Style 1 / Style 2 / Style 3).
- Turn on Card UI and style the wrapper under Card UI settings: background, border, round corner and shadow.
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 › Show title | on |
| Preset settings › Form style | Style 1 |
| Style › Card UI | 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 |
|---|---|
| Card UI settings › Background › Background | a token or custom color |
| Card UI settings › Border › Show border | on |
| Card UI settings › Round corner › Round corner | e.g. round-m |
| Card UI settings › Shadow › Shadow | regular-shadow |
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 |
|---|---|
| Card UI settings › Background › Background | custom color with transparency |
| Card UI settings › Background › Make background blur | on |
| Card UI settings › 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 Style 2.
| Field | Set to |
|---|---|
| Form submit button › Full-width submit button | on |
| Preset settings › Form style | Style 2 |
Every text colour in a Form style is fixed, not scheme-aware
Label, input text, placeholder, help text, error, consent text, and the checkbox/radio label each have their own colour field under Theme Settings > Form > Form style 1/2/3 > Colors. None of them follow the section's Light/Dark colour scheme any more; all three styles ship with colours suited to a light background, Style 2 included.
Setting a section to Dark no longer lightens the form's text automatically. If a form on Style 2 sits on a Dark section, open that style's Colors group and set light-appropriate values by hand (label, input text, placeholder, help, checkbox/radio label) - otherwise the text stays dark on a dark background.
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Pick which form shows | Content › Form |
| Add a heading above the form | Content › Show title + Title |
| Change how the fields look | Preset settings › Form style (Style 1 / 2 / 3) |
| Box the form like a card | Style › Card UI, then Card UI settings |
| Glass / frosted form | Card UI settings › 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 › Full-width submit button |
| 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 Form style 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-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: default / full-width / 8 presets 384px to 1152px / 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 | Default / 0 / S / M / L / XL / 2XL / 3XL / 4XL | Default |
Form style + Form spacing
- Form style: Style 1 / Style 2 / Style 3 - each is a different field treatment, set in Theme Settings > Form (default Style 1).
- Form spacing: Override spacing toggle, then responsive inner padding (desktop / tablet / mobile).
- Colors: each Form style has its own Colors group in Theme Settings, fixed values for label, input text, placeholder, help text, error, consent text, checkbox/radio label, and focus border. They do not change with the section's Light/Dark scheme.
Card UI settings
The card around the form, switched on by Card UI. It does nothing until that is on:
- Background: none / token / custom color / custom gradient, plus Make background blur (glass effect) with a blur radius.
- Border: show border, width, token or custom color.
- Round corner:
round-0toround-xxl, or a custom radius in px. - Shadow: none / light / regular / dark.
Form submit button + Spacing
- Full-width submit button: 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.
Frequently asked questions¶
What parts of the form can I actually edit from this module?
Only the wrapper: the optional heading, which theme Form style (1/2/3) is used, content alignment, and the card and spacing around it. The form's own fields, labels, required settings, and what happens after submission all come from the form itself, chosen under Content › Form.
Can I control what happens after someone submits the form?
Response type (inline message, redirect, and so on) and the confirmation message are read from the chosen form's own configuration, not from a field on this module. Change them on the form itself and the module picks up whatever it's set to.
Can I make the form show two columns of fields instead of one?
No, column layout comes from the form's own field-width settings, not from this module. This module only supplies Spacing between fields to set the gap once the form is already multi-column.
Why can't I find the Card UI settings?
Card UI settings only appears in the editor once Style › Card UI is switched on. With it off, none of the background, border, round corner, shadow, or padding fields inside it have any effect.
Does Content alignment center the input fields too?
No. Content alignment only affects the heading text and the submit button row; the form's input fields keep the form's own layout regardless of this setting.
Can two Form modules on the same page use different styles?
Yes. Form style is set per module instance, so one Form block can use Style 1 while another on the same page uses Style 2 or 3.
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.