Footer - Newsletter led¶
The site page footer with a signup form on top: form column, then a brand block beside your navigation link columns, then a bottom bar. Best for: sites where the footer is a conversion point and list growth matters more than a compact footer.
📷 Hero image
Target file: assets/img/footer-newsletter-led/hero.webp
A full width site footer on a Dark background. Across the top, a bordered card holding a short headline and a one line description on the left and an email field with a submit button on the right. Beneath it a brand column with logo and social icons, four columns of navigation links, then a divider and a copyright line with legal links. Captured at desktop width so the form card reads as a distinct band above the rest.
At a glance¶
Footer Site pages Form
- What it does: everything Footer - Classic renders, with a HubSpot form column added above the row. The form can sit beside its text or under it, optionally inside a card with its own background, border and radius.
- Best used for: growing a mailing list from every page of the site.
- Not the right fit if: you do not want a form in the footer (use Footer - Classic) or you are on a landing page, where a second form competes with the page's own.
- 🔗 Live demo: (add demo link)
You do not add this to a page
Footers are not dropped into a page. One footer is chosen for the whole site in Theme Settings, and any single page can override it.
How it gets on your page¶
- Go to Theme Settings › Website footer.
- Set Which footer do you want as default footer? to Footer - Newsletter led.
- Open the footer from any page: click into the footer area and choose Edit global content.
- In Form column, pick your Form, then write the Title and Description above it.
- Fill in Brand info, Nav link columns and Bottom bar as you would on Classic.
Pick the form before you style it
The card, spacing and button settings all describe a form that is already selected. With no form chosen the block renders nothing, so the styling appears to do nothing.
Design recipes¶
Text on the left, form on the right, inside a bordered card.
📷 Result
Target file: recipe-card-form-side-by-side.webp
| Field | Value |
|---|---|
| Preset settings › Form column › Card › Show card | on |
| Form column › Layout › Form layout | side by side |
| Form column › Layout › Responsive breakpoint for stacking | 767px |
No card, the form sitting directly on the footer background.
📷 Result
Target file: recipe-bare-form.webp
| Field | Value |
|---|---|
| Preset settings › Form column › Card › Show card | off |
Headline and description above the form, everything centred.
📷 Result
Target file: recipe-stacked-centred.webp
| Field | Value |
|---|---|
| Form column › Layout › Form layout | stacked |
| Style › Alignment › Content alignment | center |
Submit button spanning the width on phones.
📷 Result
Target file: recipe-full-width-mobile-button.webp
| Field | Value |
|---|---|
| Form settings › Make a form submit button in full width | on |
Brand and link columns left empty so only the signup block and bottom bar render.
📷 Result
Target file: recipe-form-only.webp
| Field | Value |
|---|---|
| Brand info › Logo | empty |
| Nav link columns | no columns added |
Common setups¶
| Goal | Setting |
|---|---|
| Use this footer across the site | Theme Settings › Website footer › Which footer do you want as default footer? |
| Choose which form appears | Form column › Form |
| Put the form in a card | Preset settings › Form column › Card › Show card |
| Form beside the text instead of under it | Form column › Layout › Form layout |
| Change where the form stacks | Form column › Layout › Responsive breakpoint for stacking |
| Full width submit button on mobile | Form settings › Make a form submit button in full width |
| Cap how wide the description runs | Form column › Description › Maximum width |
| Space between the form block and the row | Preset settings › Form column › Card › Spacing below element |
| Hide the brand description | Brand info › Show description |
| Remove the line above the bottom bar | Preset settings › Bottom bar › Show divider |
Field reference¶
182 fields, the 40 extra over Footer - Classic being the form column and its styling.
Content
| Group | What it holds |
|---|---|
| Section background settings | none, colour, gradient, image or video |
| Form column | title, description, HubSpot form |
| Brand info | logo, logo link, description, contact details, social icons |
| Nav link columns | a repeater of columns, each a title plus a HubSpot menu |
| Bottom bar | copyright text and a legal link group |
Style › Preset settings › Form column
| Group | What it styles |
|---|---|
| Layout | form layout, stacking breakpoint, gaps between the two sides |
| Card | show card, background, border, radius, padding, spacing below |
| Title | heading level or custom size, colour, weight |
| Description | typography, colour, maximum width |
| Form settings | form style, full width button, button alignment |
Every field, exhaustively
The complete list lives in MDS/MODULE-FUNCTIONALITY/Footer - Newsletter led.md in the theme repository.
Tips & gotchas¶
The form is a real HubSpot form
Response handling, redirects and follow up emails are configured on the form itself in HubSpot, not here. This module only chooses which form appears and how it looks.
Footers do not share content
Switching between Classic and Newsletter led does not carry your content across. They are separate modules with separate stored content.
Two forms on one page
On a landing page that already has a form, this footer puts a second one below it. That usually hurts conversion. Use a landing page footer instead and set it in Header and footer settings.
Related modules¶
- Footers: how a page picks its footer, and how the four fit together.
- Footer - Classic: the same footer without the form.
- LP Footer - Minimal: the light footer for landing pages.
- LP Footer - Centered Nav: a centred stack for landing pages.
- Header and footer settings: the per page override.