Skip to main content

Mauris purus urna, dictum non cursus et, congue et felis. Suspendisse porttitor mi et eros luctus suscipit.

Read More
Open Search
Schedule a Call
Search for topics or resources
Enter your search below and hit enter or click the search icon.
Close Search
TRUST Documentation

Hero with Form

hero-form--documentation

Module Styles Tab Walkthrough

 

Spacing: Use these inputs to configure the top and bottom spacing of your section. This can be useful to increase or decrease the height of a section, reduce spacing between sections which share the same background color, or scale this spacing based on screen size when using certain types of backgrounds.

  • Top Padding (Desktop): None, Extra, Small, Small, Medium, Large, Extra Large, Custom
  • Top Padding (Laptop): Same as Desktop, None, Extra Small, Small, Medium, Large, Extra Large, Custom
  • Top Padding (Tablet): None, Extra Small, Small, Medium, Large, Extra Large, Custom
  • Top Padding (Mobile): Same as Tablet, None, Extra Small, Small, Medium, Large, Extra Large, Custom
  • Bottom Padding (Desktop): None, Extra, Small, Small, Medium, Large, Extra Large, Custom
  • Bottom Padding (Laptop): Same as Desktop, None, Extra Small, Small, Medium, Large, Extra Large, Custom
  • Bottom Padding (Tablet): None, Extra Small, Small, Medium, Large, Extra Large, Custom
  • Bottom Padding (Mobile): Same as Tablet, None, Extra Small, Small, Medium, Large, Extra Large, Custom

Text Color Override: These inputs override the color of any text which appears directly on your background. Use these to make all text use a light color when using a darker background to ensure the text is legible. NOTE: Elements other than text may be affected as well and some text may not necessarily be white.

  • White Text on All Screens: Boolean (check to enable)
  • White Text on Desktop: Boolean (check to enable)
  • White Text on Laptop: Boolean (check to enable)
  • White Text on Tablet: Boolean (check to enable)
  • White Text on Mobile: Boolean (check to enable)

Layout Controls: This group contains inputs which are unique to this section for controlling the overall layout or style. Depending on the section, some inputs outside of this section may change based on the configuration here.

  • Column Widths (Desktop): Single Choice
    • 4/12 [Content] + 8/12 [Media]
    • 5/12 [Content] + 7/12 [Media]
    • 6/12 [Content] + 6/12 [Media] - Default
    • 7/12 [Content] + 5/12 [Media]
    • 8/12 [Content] + 4/12 [Media]
  • Content Position (Desktop): Single Choice: Left of Form, Right of Form 
  • Content Position (Tablet & Mobile): Single Choice: Above Form, Below Form
  • Content Vertical Alignment with Form: Single Choice: Top, Center
  • Header: Content Alignment: Single Choice: Left-Aligned, Center-Aligned
  • Header: Content Alignment (Mobile): Single Choice: Left-Aligned, Center-Aligned
  • Content Alignment (Mobile): Single Choice: Left-Aligned, Center-Aligned
  • Form: Title Alignment: Single Choice: Left-Aligned, Center-Aligned
  • Form: Title Alignment (Mobile): Single Choice: Left-Aligned, Center-Aligned
  • Form: Button Alignment: Single Choice: Left-Aligned, Center-Aligned
  • Form: Button Alignment (Mobile): Single Choice: Left-Aligned, Center-Aligned

Module Settings Walkthrough

Preheader: Text Input

Header: Text Input

Content: Text Area Below the Header

Enable Video: Single Choice: Above Content, Below Content, None

Based on your selection for Enable Video, whether Above Content or Below Content, the following inputs for Video Type will show.

  • Video: Type: Single Choice: YouTube/Wistia/Vimeo
    1. Option: YouTube/Wistia/Vimeo Modal
      • Video: Thumbnail Image: Image
      • Link to: Single Choice: External, File
      • Based on your selection for Link to the following inputs for Video Type will show.
        1. Option: External
          • URL: Input URL
        2. Option: File
          1. File: File
      • Video: Label Text: Text Input
    2. Option: Vidyard Modal
      • Video: Thumbnail Image: Image
      • Vidyard Video: UUID: Text Input - Enter the UUID (internal ID) of this Vidyard video.
      • Video: Image ALT Tag: Text Input
      • Video: Label Text: Text Input
    3. Option: HubSpot Video Modal
      • Video: Thumbnail Image: Image
      • Video: HubSpot Video: Video
      • Video: HubSpot Play Button Color: Numerical Hex Code Input, Opacity Percentage, and Color Picker - The opacity for this module is intended to be 100%, otherwise your color will display lighter than intended.
      • Video: Image ALT Tag: Text Input
      • Video: Label Text: Text Input
    4. Option: Embed Code
      • Video Embed Code: Text Input
      • Video Label Text: Text Input for Optional Label Text

Enable Image: Single Choice: Above Content, Below Content, None - This input will only show when Enable Video is set to None.

Based on your selection for Enable Image, whether Above Content or Below Content, the following inputs will show.

  • Image:  Image

 

Based on your selection for Enable Video or Enable Image, whether Above Content or Below Content, the following inputs will show.

Add Drop shadow to Featured Media: Boolean (check to enable) - Toggle this on to enable a drop shadow around the area allocated for the featured image, video thumbnail or calendar widget.

Add Border Radius to Featured Media: Boolean (check to enable) - Toggle this on to enable the default border radius around the area allocated for the featured image, video thumbnail or calendar widget.

 

BulletS
  • Disable Divider: Boolean (check to disable) - Toggle this on to disable the lines between the bullets
  • Bullets: Icon Type: Single Choice: Image, Lottie Animation, None
  • Bullets: Icon Max Width: Number Input
  • Bullets: Location: Single Choice: Above Rich Text Content, Below Rich Text Content
  • Bullets: Layout: Single Choice: Vertical Layout (Default), Grid Layout (Two Columns)
  • BulletS: Repeatable Group
    • Based on your selection for Bullets: Icon Type the following inputs for will show.
      1. Option: Image
        • Bullet: Icon Image: Image
        • Bullet: Icon Vertical Offset: Number Input
      2. Option: Lottie Animation
        • Lottie Embed: Type: Single Choice: URL of Lottie JSON File, Lottie JSON Code - Choose the type of embed you'll use for this card. URL is recommended if you're using a Lottie file from LottieFiles.com. Otherwise, for custom lottie json, choose JSON.
        • Lottie Embed: Loop Animation: Boolean (check to enable) - Toggle this "On" to have the animation loop indefinitely.
        • Lottie URL/Embed Code: Text - Use this field to paste the URL only of your externally hosted Lottie JSON file (like the ones provided on lottiefiles.com) or the JSON code of your custom Lottie animation. DO NOT PASTE THE FULL EMBED CODE PROVIDED ON LOTTIEFILES.COM.
        • Lottie: Container Width: Number Input - Use this field to control the width of the container for your animation. If left blank, the animation will go full width and centered.
        • Lottie: Container Height: Number Input - Use this field to control the height of the container for your animation (the width will automatically adjust based on this value). This is designed to keep the height of the animations consistent across cards in the same row. Leave this blank to allow the animation to go full width regardless of height.
    • Bullet: Header: Text
    • Bullet: Description: Text Area
    • Bullet: CTA Group
      • CTA: Type: Single Choice: Hubspot Call-to-Action, Custom Link, Scroll to Section, No CTA
      • Based on your selection for CTA: Type, the following inputs will show. 
        1. Option: HubSpot Call-To-Action
          • CTA: Select HubSpot CTA from the CTA Section of your portal
          • CTA: Button Color: Single Choice: Primary, Secondary, White, Simple Link
        2. Option: Custom Link
          • CTA: Button Text: Text Input
          • CTA: Button Color: Single Choice: Primary, Secondary, White, Simple Link
          • CTA: Hyperlink
            • Link to: External, Content, File, Email Address, Blog
            • URL: Input URL or Select Page
          • CTA: Open in a New Tab?: Boolean (check to enable)
          • CTA: Link Type - No Follow: Boolean (check to enable) - External links that open a page in a new browser tab should contain no follow. Enable if your link is linking externally.
          • CTA: Title Attribute - CTA title attribute gives additional information about the page being linked to. Leave this blank to use your button text.
        3. Option: Scroll to section
          • CTA: Button Text: Text Input
          • CTA: Title Attribute: Text Input - CTA title attribute gives additional information about the page being linked to. Leave this blank to use your button text.Option: Scroll to Section
          • CTA: Section Anchor ID: Text Input - Add the anchor ID of a section on this page to link to it. To link to a section on a different page, use the Custom Link option and add the section ID to the end of the URL preceded by a hashtag.
        4. Option: No CTA

 

Conversion Type: Single Choice: HubSpot Form, HubSpot Meeting Calendar, Calendly

Based on your selection for Conversion Type the following inputs will show.

  1. Option: HubSpot Form
    • Form: Header (optional): Text Area
    • Form: Select HubSpot Form from the Form Section of your portal
    • Form: Button Color: Single Choice: Primary, Secondary, White
    • Form: Ghost / Transparent Button: Boolean (check to enable) - Enable this to use a transparent “ghost” style for your button.
    • Send form notifications to specifies email addresses instead of the form defaults: Boolean (check to enable) - Enable this to use choose an email address from your portal
    • Send a follow-up-email: Boolean (check to enable) - Enable this to select a follow-up email from your portal
  2. Option: HubSpot Meeting Calendar
    • HubSpot Meeting Calendar: Header (optional): Text Area
    • HubSpot Meeting Calendar: Choice: Meeting
  3. Option: Calendly
    • Calendly Meeting Calendar Header (optional): Text Area
    • Calendly: URL: Text - Input the URL of the Calendly Calendar you want to embed. The full embed code will be generated automatically.

 

Show Share Links: Boolean (check to enable)

When Show Share Links is enabled then the following will appear as an option.

  • Share Type: Single Choice: Share Current Page, Share the URL of a Different Page
  • Based on your Share Type the following inputs for Video Type will show.
    • Option: Share Current Page
    • Option: Share the URL of a Different Page
      • Link to: Single Choice: External, Content
      • Based on your selection for Link to the following inputs for Video Type will show.
        1. Option: External
          • URL: Input URL
        2. Option: File
          1. File: File

FAQs

Help! My content isn't showing.

Development Notes

Reserved block class:

.section--heroform

Resources:

modules/Hero - Form/Hero - Form.css

module js inside main module