SR Offer Two Col 01
This module renders a two column offer with a heading, rich text description, optional CTA buttons, and a side image in one column, plus an embedded HubSpot form stacked below the copy in the other column.
Pick it over sr-offer-two-col-02 and sr-offer-two-col-03 when you want standalone page copy with its own heading and description sitting alongside both an image and a form, rather than letting the form carry its own heading or dropping the image entirely. It expects a connected form and a side image, and content_side controls whether the image sits left or right of the text and form column.
Use cases
- Lead gen offer with supporting visual
- Ebook download with sign-up form
- Webinar registration with promo image
- Gated content offer page
- Demo request with product image and form
Where it fits
- Included with: PRO
- Page sections: Form, CTA, Content
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. |
| Image | Image | |
| Content Side | Choice | Options: Left, Right. |
| Grid | Choice | Options: One Column, Two Column. |
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. |
| Add icon | Boolean |
CTA › Default
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border | Color |
CTA › Hover
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border Color | Color |
CTA › Icon
| Field | Type | Notes |
|---|---|---|
| Icon | Icon | |
| Position | Choice | Options: Left, Right. |
| Purpose | Choice | The purpose of the icon, used for accessibility. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon. Options: Decorative, Semantic. |
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. |
| 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 |
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 | 25 options, including Primary, Secondary, Tertiary. |
| Size | Choice | Options: Small, Default, Large. |
| Align | Choice | Options: Auto, Left, Center, Right. |
| Full Width | Boolean |
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 › Styles › Shadow
| Field | Type | Notes |
|---|---|---|
| Shadow | Boolean | |
| Horizontal | Number | A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. |
| Vertical | Number | The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box. |
| Blur | Number | The blur radius. The higher the number, the more blurred the shadow will be. |
| Spread | Number | The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. |
| Inset | Boolean | Changes the shadow to an inner shadow. |
| Color | Color | The color of the shadow. |
Style tab
Change log
| Version | Change |
|---|---|
| 4.0.0 | Stardust update |
| 3.3.2 | Added ability to set custom button styles |
| 3.3.1 | Added ability to use new HS form |
| 3.3.0 | Accessibility improvements |
| 3.2.0 | Added responsive background options |
| 3.1.0 | Introduced a lazy loading feature for forms |
| 3.0.1 | Added new Link options |
SR Offer Smart Pop 02
This module renders a corner tab that stays fixed on screen with a teaser line and icon, then expands into a slim panel holding a heading, description text, and a HubSpot form.
SR Offer Two Col 02
This module renders a two column layout with a single image on one side and an embedded HubSpot form on the other, where the form block itself includes its own heading and rich text description rather than relying on separate page copy.