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.