Form Hero | SaaSFlow Docs

51 settingsPages

Where it is used

Content settings

What the module says and shows. Repeaters (groups you can add items to) are marked as such.

Setting Type What it does

Eyebrow Text Short label shown above the heading. Leave empty to hide it.Default: BOOK A DEMO

Heading Text Main heading of the page. Wrap words in [brackets] to highlight them.Default: See SaaSFlow in [action]

Description Rich text Supporting text under the heading.

Checklist Text Short points with a check mark. Remove them all to hide the list.

FeaturesRepeater · 5 settings

Short points with an icon, shown in a row under the description. Use these or the checklist above, or both.

Icon	Choice	Icon on a soft colored tile. Choose Pick from icon library or Upload my own for any other icon.Options: Chat bubbleLightning boltPeopleHeadsetEnvelopePhoneClockShieldGlobeStarPick from icon libraryUpload my ownDefault: `Chat bubble`
Library icon	Icon	Search the Font Awesome library and pick an icon. It takes the icon color.
Icon image	Image	A square SVG or PNG, at least 48 x 48px. Uploaded images keep their own colors.
Title	Text	Short title, for example Fast response.Default: `Feature`
Text	Text	One short line under the title.

Image under the textGroup · 2 settings

An optional picture under the checklist, for example your app on a phone.

Show	Choice	Choose My own image to upload one below.Options: NothingMy own imageDefault: `Nothing`
Image	Image	A picture with a transparent background works best, about 900px wide.

Form, image or videoGroup · 9 settings

What sits beside the text.

Show	Choice	A HubSpot form in a card, an image, or a video that plays when clicked.Options: HubSpot formImageVideoDefault: `HubSpot form`
Form title	Text	Heading at the top of the form card.Default: `Book a demo`
Form description	Text	Text under the form title. Leave empty to hide it.Default: `Fill in your details and we'll get in touch to schedule a personalised demo.`
Form	HubSpot form	Choose the HubSpot form visitors fill in. Until you choose one, the card shows a reminder in the editor and is hidden on the live page.
Privacy note	Text	Small text under the form, with a lock icon. Leave empty to hide it.Default: `We respect your privacy. Your information will never be shared with third par...`
Image	Image	Shown beside the text. A product screenshot or photo, about 1000px wide.
Video link	Text	A YouTube or Vimeo link, or a link to an .mp4 file. The video plays in place when the visitor clicks.
Video cover image	Image	Shown with a play button until the video starts, ideally 16:9. Leave empty for a soft brand-colored cover.
Video title	Text	Describes the video for screen readers.Default: `Product demo video`

Style settings

In the module's Styles tab: layout, color mode, background, fonts, spacing and animation.

Setting Type What it does

Color mode Choice "Same as site" follows Theme settings > Color mode.Options: Same as siteLightDarkDefault: Same as site

Eyebrow style Choice "Same as theme" follows Theme settings > Eyebrow.Options: Same as themePlain textPillGradient badgeDefault: Same as theme

Highlight color Color Color of [highlighted] words, the check marks and the bubbles. Starts as the theme's primary color.

FontsGroup · 2 settings

Heading font	Font	Starts as the theme's heading font. Change it to use another font in this module only.Default: `Outfit`
Text font	Font	Starts as the theme's body font. Change it to use another font in this module only.Default: `Inter`

Transparent background On/off Removes this section's background so the page background shows through. Useful for blending sections together.Default: Off

Background color Color Leave empty to use the theme colors for the current light or dark mode.

Background effectGroup · 6 settings

Show background glow	On/off	Default: `Off`
Intensity	Number	How strong the glow is. 0% hides it.Default: `60`
Flowing movement	On/off	Plays an entrance animation. Visitors who turn off motion on their device don't see it.Default: `On`
Fade out at the top and bottom	On/off	Fades the glow out at the edges so it blends into the next section.Default: `On`
Glow color 1	Color	Leave empty to use the theme primary color.
Glow color 2	Color	Leave empty to use the theme accent color.

Form, image or video position Choice Which side the form, image or video sits on desktop. On phones it always comes after the text.Options: RightLeftDefault: Right

Form, image or video width Number Share of the row it takes on desktop.Default: 46

Background animation Choice Soft bubbles: glass circles floating behind the form, image or video. Aurora: large blurred color clouds drifting slowly. Dot grid: a faint dotted pattern that slowly drifts. Ripples: soft rings spreading out. All use the brand colors and stay still for visitors who turn off motion.Options: Soft bubblesAurora glowDrifting dot gridRipplesNoneDefault: Soft bubbles

Animation strength Number How visible the background animation is. Lower is subtler.Default: 45

SpacingGroup · 4 settings

Leave empty to use the theme section spacing (Theme settings > Layout).

Top padding (desktop)	Number	Space above the content on desktop.
Bottom padding (desktop)	Number	Space below the content on desktop.
Top padding (mobile)	Number	Space above the content on phones.
Bottom padding (mobile)	Number	Space below the content on phones.

Animate when scrolled into view On/off Content fades up as the section comes into view. Visitors who turn off motion on their device see no animation.Default: On

Interface labels

Words on buttons and for screen readers. Change them to translate the module.

Setting	Type	What it does
Play button	Text	Read by screen readers for the play button.Default: `Play video`

Tip

Headings support [brackets] to highlight words and | for a new line. See Editing tips.