Back to All Modules

Form

Search (CSOL) Form in the CMS

Jump to Guidelines and Use Cases

Theme Options:

Module Preview

An example of a Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a <pre> element, it displays text inside a background-01 fill 4px corner radius container. With 8px horizontal and 16px vertical padding.

Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

This is a Block Quote element. It displays text with a 24px left indent

Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore:

  • Consectetur adipiscing elit, sed do eiusmod
  • Tempor incididunt ut labore?
  • Diusmod tempor incididunt ut labore et?

Register now

An example of a Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a <pre> element, it displays text inside a background-01 fill 4px corner radius container. With 8px horizontal and 16px vertical padding.

Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

This is a Block Quote element. It displays text with a 24px left indent

Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore:

  • Consectetur adipiscing elit, sed do eiusmod
  • Tempor incididunt ut labore?
  • Diusmod tempor incididunt ut labore et?

Register now

An example of a Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a <pre> element, it displays text inside a background-01 fill 4px corner radius container. With 8px horizontal and 16px vertical padding.

Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

This is a Block Quote element. It displays text with a 24px left indent

Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore:

  • Consectetur adipiscing elit, sed do eiusmod
  • Tempor incididunt ut labore?
  • Diusmod tempor incididunt ut labore et?

Register now

Module Preview

FAQ's

How To Use This Module

Add a form with an option to pair it with rich text on your page

Use Cases

Rich Text Section

Add rich text content alongside the form with full WYSIWYG editing capabilities. The rich text section is optional and the form can be displayed standalone.

Layout Options

Configure the order of elements (rich text first or form first) and form width (medium or wide).

Card Container

Forms are displayed in a Component Library card with light theme and border styling for visual separation.

HubSpot Form Integration

Uses the CsolForm macro to embed any HubSpot form with full functionality including validation, submission handling, and analytics tracking.

Guidelines

Character Count

  • Recommended header character count is ~45 characters

Form Sizing

  • The module provides two options for form sizes- Medium and Wide

    • Medium forms will take up ½ the space leaving ½ for rich text
    • Wide forms will take up ⅔ of the space leaving ⅓ for rich text

    Things to Know

    • Adding a form is mandatory. Only use MarTech approved forms including the Reduced Field Form (RFF).
    • Rich Text is optional. When it is not provided, the form will be centered horizontally.
    • Option to enable the Reduced Field Form feature to display the form as a RFF. Important Note: The RFF will not work with all forms and form settings. Review the Form Requirements found on the RFF Wiki . For questions about the RFF, reach out on Slack in #mktg-reduced-field-form
  • Similar Modules

    Page Header - Form

    Place any existing MarTech form alongside the Tagline/Header/Description content block in the headers, to help drive conversion.

    What's New?

    | v2.9.0 June 2024

    • This module now has the option to enable the Reduced Field Form feature to display the form as a RFF.