Form Banner


The form banner component is a full-width component that allows a form to be placed higher on a page.

Primary functionality:

  • To support forms of varying heights, the form can anchor at five different starting positions (from 0-4). From the top of the background image, to the bottom.
  • For flexible SEO, the background image area (top half) will grow vertically if the top-left content is longer than usual.
  • The background color can be changed like a Highlight Section Component. If using a background image, the image will be on top of the background color.

For detailed instructions for using this component, please reference the CMS Guide.

When to use

Its primary use case is for landing pages where a user needs to be able to see the form above the fold. Use this component when the main action is to complete a form.

This component is designed to be used with a form. It is a required element in this banner and a key part of its use case. Current state also requires a background image for both desktop and mobile.

Component properties

Background Image Theme:

  • Light
  • Dark

The background image supports dark-themed images and light-themed images. Change the background-image theme to match the image. For example, a dark image would need light text on it. To achieve that, choose a dark theme to match a dark image. Vice versa for a light image. The Placeholder 2 area, Header, paragraph, eyebrow-text, and eyebrow-decoration change based on the background-image theme.

Decorative Bar:

  • Standard color options

Background Color:

  • Standard color options

This changes the background-color for the entire component. When a background image is being used, it sits on top of this background color. Making the background color only visible for the bottom half.

Background Theme Color:

  • Dark
  • Light

Use this to ensure the content in the bottom half has good accessibility with the chosen bottom background color. Like the HSC, dark with dark and light with light.

Form anchor position:

  • Options 0-4

Sitecore fields

Eyebrow Heading (Optional)

  • Single Line Text Field

Heading (H1) (Required)

  • Multi Line Text Field
  • Character limits: <50 characters="">

Description (Optional)

  • Multi Line Text Field
  • Character limits: 140 characters

Background Image (Optional)


The form banner has two placeholders:

  • Placeholder 1 allows for the following components:
    • New content component
    • Rich text
    • Video
    • Divider
    • Icon-List
  • Placeholder 2 expects a HSC with a new content component + Acoustic/WFFM inside of it.

Image specs

Suggested image sizes:

  • Desktop: 1920x580
  • Mobile: 770x580


Multiple height options:

To support forms of varying heights, the form can anchor at five different starting positions. These options are from the top of the background image to the bottom.

The banner will adjust itself to accommodate long forms or long content in the following ways:

  • Tall form - The overall banner will stretch to fit it
  • Background image area - This will stretch to accommodate longer content


Below are some common examples of this component.

Long form

Offer Colonial Life Benefits

Optional eyebrow heading

Form Banner - long form example