SR Hero Form 01
This hero renders a two-column layout with a heading, rich text description, and optional CTA buttons on the left, paired with an embedded HubSpot form on the right that can carry its own heading and description above the fields.
Pick it over the other sr-hero modules when the goal is capturing a lead directly in the hero rather than sending visitors to another page, since it is the only hero with a built-in form column. It requires a connected HubSpot form and works best when the left column copy is short enough to sit level with the form.
Use cases
- Gated ebook download hero
- Demo request hero with form
- Webinar signup hero
- Free trial signup landing page
- Newsletter opt-in hero
- Contact sales hero
Where it fits
- Included with: Free
- Page sections: Hero, Form, Cta
Editable fields
Content tab
| Field | Type | Notes |
|---|---|---|
| Background Video | File | Repeats: min 0, default 1. Add multiple file formats in order to provide compatibility with a broad range of browsers. |
| Background Video Tablet | File | Repeats: min 0, default 1. This background video will only be used on tablet devices. |
| Background Video Mobile | File | Repeats: min 0, default 1. This background video will only be used on mobile devices. |
| Enabled | Boolean | |
| ID | Text | Assign a ID to the module. |
| Class | Text | Assign a CLASS to the module. |
| Description | Rich text | |
| Lead Text | Boolean | Turn on to make the Description text larger. |
| Height | Choice | Set to Auto to use the module's top and bottom padding values in the style tab. Options: Auto, Small, Medium, Large, Full. |
| Vertical Align | Choice | Options: Top, Center, Bottom, Stretch. |
Heading Repeats: min 0, default 1.
| Field | Type | Notes |
|---|---|---|
| Heading | Text | |
| Size | Choice | HTML heading size. Options: H1, H2, H3, H4, H5, H6, P. |
| Display Size | Choice | Size that heading is displayed at. 12 options, including Auto, H1, H2. |
| Color | Choice | 15 options, including Auto, Primary, Secondary. |
| Color | Color | |
| Align | Choice | Options: Auto, Left, Center, Right. |
| CSS Class | Text |
CTA Repeats: min 0, default 0.
| Field | Type | Notes |
|---|---|---|
| CTA Type | Choice | Options: HubSpot CTA, HubSpot Payment, Button, Modal. |
| CTA Style | Choice | 26 options, including Primary, Secondary, Tertiary. |
| CTA | CTA | |
| Button Text | Text | |
| Modal Target | Text | |
| Link | Link | |
| Payment link | Payment | |
| Checkout behavior | Choice | Options: Open in a new tab, Sliding overlay. |
| CTA Size | Choice | Options: Small, Default, Large. |
Form
| Field | Type | Notes |
|---|---|---|
| Enabled | Boolean | |
| Lazy Load | Boolean | To use this feature, you must have either Marketing Hub or Content Hub Professional or Enterprise, and you need to enable the "Set as raw HTML" option in the form settings. |
| Form Height | Number | Used to set a minimum height for the form, this prevents layout shifts when the form loads. |
| Description | Rich text | |
| Lead Text | Boolean | Turn on to make the Description text larger. |
| Form | Form | |
| Send form notifications to specified email addresses instead of the form defaults | Boolean | |
| Email Addresses | ||
| Salesforce campaign | Salesforcecampaign |
Form › Styles
| Field | Type | Notes |
|---|---|---|
| Background Color | Color | |
| Text Color | Choice | Set to Auto to use the default text color. Set to Custom to set a custom text color. 15 options, including Auto, Primary, Secondary. |
| Text Color | Color | |
| Hide Field Labels | Boolean | |
| Shadow | Boolean |
Form › Styles › Fields
| Field | Type | Notes |
|---|---|---|
| Style | Choice | Options: Default, Custom. |
| Height | Number | |
| Background Color | Color | |
| Border Color | Color | |
| Size | Number | |
| Radius | Number | |
| Focus | Color | |
| Field Color | Color | |
| Placeholder | Color |
Form › Styles › Button
| Field | Type | Notes |
|---|---|---|
| Style | Choice | 26 options, including Primary, Secondary, Tertiary. |
| Size | Choice | Options: Small, Default, Large. |
| Align | Choice | Options: Auto, Left, Center, Right. |
| Full Width | Boolean |
Form › Styles › Button › Default
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border | Color |
Form › Styles › Button › Hover
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border Color | Color |
Form › Styles › Padding
| Field | Type | Notes |
|---|---|---|
| Top | Number | |
| Bottom | Number | |
| Left | Number | |
| Right | Number |
Form › Styles › Border
| Field | Type | Notes |
|---|---|---|
| Style | Choice | Options: Gradient One, Gradient Two, None, Solid, Dotted, Dashed, Double. |
| Color | Color | |
| Width | Number | |
| Radius | Number | |
| Top | Boolean | |
| Bottom | Boolean | |
| Left | Boolean | |
| Right | Boolean |
Form › Heading Repeats: min 0, default 0.
| Field | Type | Notes |
|---|---|---|
| Heading | Text | |
| Heading Size | Choice | HTML heading size. Options: H1, H2, H3, H4, H5, H6, P. |
| Heading Display Size | Choice | Size that heading is displayed at. 12 options, including Auto, H1, H2. |
| Heading Color | Choice | 15 options, including Auto, Primary, Secondary. |
| Heading Color | Color | |
| Heading Align | Choice | Options: Auto, Left, Center, Right. |
| CSS Class | Text |
Columns › Content Repeats: min 1, max 4, default 1. Columns follow a twelve column grid.
| Field | Type | Notes |
|---|---|---|
| Column Breakpoint | Choice | Options: None, Mobile, Tablet, Desktop, XL. |
| Column Width | Choice | 12 options, including 1, 2, 3. |
| Column Offset | Choice | 13 options, including 0, 1, 2. |
| Column Order | Number |
Columns › Form Repeats: min 1, max 4, default 1. Columns follow a twelve column grid.
| Field | Type | Notes |
|---|---|---|
| Column Breakpoint | Choice | Options: None, Mobile, Tablet, Desktop, XL. |
| Column Width | Choice | 12 options, including 1, 2, 3. |
| Column Offset | Choice | 13 options, including 0, 1, 2. |
| Column Order | Number |
Style tab
Change log
No change log is recorded for this module.
SR Hero Card 01
This hero renders a heading, rich text description, and up to two CTA buttons inside a bordered card that floats over a full-bleed image or video background, with vertical and horizontal controls to pin the card to any corner or edge.
SR Hero Parallax 01
This hero renders a single centered content block with a heading, rich text description, and up to two CTA buttons layered over a full-bleed image or video background, with configurable height.