HubSpot CMS: Implementing a "Step Flow" Module for Process Visualization

Purpose and Benefits

The primary goal of this module is to visualize the "Next Action" for the user.

By breaking down complex processes into digestible "Steps" and adding visual cues like icons and flow arrows, you can significantly reduce user friction and improve conversion rates (CVR). Furthermore, by utilizing HubSpot's repeating groups and style fields, marketing teams can easily add steps or change brand colors without touching a single line of code.

Key Use Cases

This design is versatile and can be applied to various business scenarios:

• SaaS / App Onboarding
  • Step 1: Create Account
  • Step 2: Initial Setup
  • Step 3: Start Using
• Service Delivery Flow
  • Step 1: Consultation
  • Step 2: Proposal & Quote
  • Step 3: Contract & Kickoff
• Recruitment Process
  • Step 1: Entry
  • Step 2: Interview
  • Step 3: Job Offer
• Event Registration
  • Step 1: Submit Form
  • Step 2: Receive Ticket
  • Step 3: Attend Event

How to Use in HubSpot CMS

Once implemented, this module provides a user-friendly experience in the Page Editor.

1. Style Settings (Global Design)You can customize the look and feel to match your brand directly from the module options:

• Main Title: The header for the section (e.g., "How it Works").
• Text Color: Controls the font color for the entire module.
• Border Color: Changes the color of the card borders.
• Border Width: Adjusts the thickness of the card borders (in pixels).
• Base Font Size: Sets the root font size for the module.

2. Managing Steps (Content)The "Steps" section uses a Repeater Group, allowing you to add as many steps as needed.

• Add / Remove: Click "Add" to create a new step or drag to reorder them.
• Step Label / Number: Customizable text fields for "STEP" and "01".
• Icon: Uses HubSpot's native icon picker (FontAwesome etc.).
• Title / Description: Rich text support for the step details.

Module Source Code

To implement this, create a new module in the HubSpot Design Manager and paste the code below into the respective files.

1. fields.json

This defines the module interface. It includes the style_settings group for design control and a steps group for the repeating content.

‍

‍

[
 {
  "allow_new_line": false,
  "display_width": null,
  "id": "acf72606-d674-5f90-274d-f9c9c98e6b77",
  "label": "main_title",
  "locked": false,
  "name": "main_title",
  "required": false,
  "type": "text"
 },
 {
  "children": [
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "3f2e92b0-dd50-01d2-4a95-8fb5702cc954",
    "label": "text_color",
    "locked": false,
    "name": "text_color",
    "required": false,
    "type": "color"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "e2ed5fe3-b347-78ce-c90d-2742e74c580d",
    "label": "border_color",
    "locked": false,
    "name": "border_color",
    "required": false,
    "type": "color"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "ad9d333e-9eed-5663-82c8-5ad75cedb5cf",
    "label": "border_width",
    "locked": false,
    "name": "border_width",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "1bafc3e9-47f2-b52b-004b-a4ae36be0c0b",
    "label": "base_font_size",
    "locked": false,
    "name": "base_font_size",
    "required": false,
    "step": 1,
    "type": "number"
   }
  ],
  "default": {
   "text_color": {
    "color": null,
    "opacity": null
   },
   "border_color": {
    "color": null,
    "opacity": null
   }
  },
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "8ed3eabc-3007-ad43-8ae9-b5ed3c076cc0",
  "label": "style_settings",
  "locked": false,
  "name": "style_settings",
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 },
 {
  "children": [
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "61df6f80-bb75-828e-ace3-d996467e4528",
    "label": "step_label",
    "locked": false,
    "name": "step_label",
    "required": false,
    "type": "text"
   },
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "75918939-9e65-2c0d-8a9f-eca248270ae4",
    "label": "step_number",
    "locked": false,
    "name": "step_number",
    "required": false,
    "type": "text"
   },
   {
    "default": {},
    "display_width": null,
    "icon_set": "fontawesome-5.14.0",
    "id": "f1c6fdf9-a639-f2cb-adcb-bc47aec3ca2a",
    "label": "step_icon",
    "locked": false,
    "name": "step_icon",
    "required": false,
    "type": "icon"
   },
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "e263b998-b922-2d87-a978-fac5256b8572",
    "label": "step_title",
    "locked": false,
    "name": "step_title",
    "required": false,
    "type": "text"
   },
   {
    "display_width": null,
    "id": "a085be67-2afd-839b-a162-9af69150c0f3",
    "label": "step_description",
    "locked": false,
    "name": "step_description",
    "required": false,
    "type": "richtext"
   }
  ],
  "default": [],
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "a1f6d8a3-0a35-c9fa-2a9a-079247675a8c",
  "label": "steps",
  "locked": false,
  "name": "steps",
  "occurrence": {},
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 }
]