Form Banner

Introduction

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.

Frames

The form banner is a full width component so it is not placed within any frames.

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 decorative bar color options

Background Color:

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 decorative bar color options

Background Color:

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

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)

Placeholders

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

Spacing

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

Examples

Below are some common examples of this component.

Long Form

Optional eyebrow heading

Form Banner Long Form Example

Optional content area

This is a New Content component. All New Content features are available for use here. This example demonstrates how the Form Banner stretches to accommodate a long form.

Short Form

 

Short Form Banner Example

This is an example of the component with a shorter form. The anchor point is set to its default position.

Long Content

 

Long Content Form Banner

This is an example to show how longer content in the top area of the banner will grow. This is an example to show how longer content in the top area of the banner will grow. The background image area within the banner will grow taller if long form content is added to this part of the banner. This is an example to show how longer content in the top area of the banner will grow. This is an example to show how longer content in the top area of the banner will grow. The background image area within the banner will grow taller if long form content is added to this part of the banner.

This is some longer content

This is an example to show you how the Form Banner grows to accommodate longer form content. Longer form content could be necessary for SEO purposes.