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.

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.

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

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.

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.