SR Offer Faux Modal 01
This module renders a boxed card styled to look like a modal window sitting inline on the page, with an optional side-by-side featured image, a logo, a heading, rich text description, and an embedded HubSpot form.
Pick it over the SR Offer Bar variants when you need a full form with fields rendered directly in the section rather than just a button or link, and over SR Gated Content 01 when the offer should stay always visible instead of popping up on scroll. It expects a form to be connected and works best with a featured image sized for the two-column layout.
Use cases
- Always-visible lead capture card
- Ebook download form section
- Gated kit or template offer
- Modal-look inline signup
- Webinar registration block
- Content upgrade with 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. |
| Featured Image | Image | |
| Logo | Image | |
| Description | Rich text | |
| Lead Text | Boolean | Turn on to make the Description text larger. |
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 |
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.2.2 | Added ability to set custom button styles |
| 3.2.1 | Added ability to use new HS form |
| 3.2.0 | Added responsive background options |
| 3.1.0 | Introduced a lazy loading feature for forms |
| 3.0.0 | Added card style options |
SR Offer Exit Modal 01
This module renders a centered popup dialog with a close button, an optional image, rich text content, a single CTA button, and an embedded HubSpot form, triggered by exit intent or a configurable timer rather than sitting inline on the page.
SR Offer One Col 01
This module renders a single centered column with an optional heading and rich text description above an embedded HubSpot form, which carries its own heading, description, and style controls for background, text color, padding, and border.