CTA form

Anatomy

• Label: Short text that describes the required input form.
• Text input: Single-line text field
• Action: Call-to-action button that corresponds after completing the input form.
• Checkbox: An optional checkbox to request additional behavior.

Usage

The CTA form is designed to capture user input and call to actions on a website. It serves as an efficient tool to prompt user engagement and action. While it can be placed throughout the page, it is encouraged to be positioned at the bottom to conclude the user journey, summarize key information, and encourage users to take action.

The CTA form presents a concise label, prompting users to provide specific input in the form field. Once users enter the required information, they can trigger the call-to-action through the button. Additionally, the CTA form supports an optional checkbox to seek additional user behavior or acknowledge certain terms.

By adopting the same guidelines as the respective text input component, button component, and checkbox component, the CTA form ensures consistency in design and enhances user familiarity with the interface.

We recommend the CTA form over the CTA banner when the main action for a user to take is to submit a form (e.g subscribe to a newsletter) vs taking actions (sign in or bring the user to a pricing page).

Do

Place the CTA form near the end of the page to conclude the user journey and encourage users to take action.

Don’t

Don't place the CTA Form early on in the user journey. Use the Hero instead for early on.

Setting Context

Keep the CTA Form simple and intuitive to minimize friction and encourage user engagement. Ensure there is enough context surrounding the component. Utilize the label as a description of the form input.

Do

Include context in areas surrounding the CTA Form to encourage user engagement.

Don’t

Don't use the CTA Form without context. The label should be used to describe the input, not to provide context.

Component length

When implementing CTA form, it's important to consider the length of the input field in order to maintain consistency and enhance user familiarity with the interface. Keeping the string length (width) of the component relative to the expected input is a recommended practice. Pair the component with additional information or context instead of spanning in wide viewports.

Do

Keep the string length (width) of the component relative to the expected input.

Don’t

Don't over extend or compress the CTA form when possible.

Options

Checkbox

Use the checkbox property in the CTA form to prompt additional user behavior or seek acknowledgment– examples include to gather consent, confirm agreement to terms, or request optional actions.

It is crucial to provide a clear description of the checkbox's purpose and hyperlink to relevant resources. When using the checkbox, completion of the checkbox must be a requirement (not optional) to proceed with the CTA.

Do

Use short and concise text for the checkbox and inline links to relevant resources.

Don’t

Don't use lengthy text or unstlyed links.

Related components

• Button: To display a button that preforms an action.
• Text input: To create an input form for single-line text field.
• Checkbox: To select options or acknowledge information.
• CTA Banner: To draw attention to or create urgency around a user action.