Skip to content

Blog post - Blog Comments

A blog-post module that renders the comment thread and the comment form, and gives you deep control over how both look. The comments themselves are powered by HubSpot's blog comment system. Best for: turning on discussion at the bottom of your articles.

📷 Hero image

Target file: assets/img/blog-comments/hero.webp

A blog comment area at the bottom of an article on a Light background. Show a comments heading in a bold Dark style, a short thread of existing comments, and a comment submission form with input fields and a Primary submit button below. Captured at desktop width.

At a glance

Blog Comments Configuration

  • What it does: places the comment thread (view) and the comment submission form on a blog post, and styles both: form look, comment cards, author, date, body, reply link, and the confirmation message.
  • Best used for: the bottom of a blog post template where you want readers to read and leave comments.
  • Not the right fit if: you want a contact or lead form (use Form or Banner with Form) or a general content block (use Content).
  • 🔗 Live demo: (add demo link)

This is a configuration module

The comment list and submission fields are rendered by HubSpot's blog comment system. This module controls placement, the heading, the order of the view and form, and the full styling of the comment area.

Add it to your page

  1. Open your blog post template in the HubSpot editor.
  2. Add the Blog post - Blog Comments module near the end of the post body.
  3. Set the Title (defaults to "Comments").
  4. On the Style tab, choose the Order (comments view first or form first) and a Form style.
  5. Adjust comment card, author, date, body, and reply styling as needed, then save the template.

Common setups

Goal Setting
Rename the heading Content › Click to update content › Title
Show the form before the thread Style › Layout settings › Order = form_first
Pick a form look Style › Elements settings › Form › Form style (form-1 / 2 / 3)
Full-width submit button Style › Form › Form submit button › Make a submit in full width
Tighten spacing between comments Style › Comments view › Gap between comments
Indent replies more Style › Comments view › Reply indent [desktop]
Section background Content › Section background settings › Type

Field reference

The editor has a Content tab (heading and background) and a Style tab (the full look of the view and form).

Content tab

Section background settings
Field Type What it does Default
Type choice Background type for the section: none, color, image, or video. none
Upload background image image Background image when Type is image. -
Video file Background video when Type is video. -
Click to update content
Field Type What it does Default
Title text Heading above the comment area. Comments
Drag to section name / Developer use only
  • Section name: an internal label for the drag-to-section arrow target.
  • Add custom CSS here: per-module CSS injection field.

Style tab

Layout settings
  • Order: which block comes first, view_first (thread) or form first. Default view_first.
  • Maximum content width: independent max width and alignment for the Comments view and the Comments form.
  • Gap between Comments view and Comments form: desktop (40) / tablet (32) / mobile (24) px.
  • Plus the standard Section wrapper container and Inner content container width controls.
Elements settings - Form
Field Type What it does Default
Form style choice Which theme form look to render: form-1, form-2, or form-3. form-1
Background group Background none / custom color / custom gradient. none
Round corner group Corner radius token or custom px. round-0
Spacing around form group Desktop / tablet / mobile spacing. -
Shadow choice Optional form shadow. none
Border group Optional border with width and color. off
Form submit button group Alignment (left) and full-width toggle. off
Elements settings - Comments view
  • Comment card: gap between comments (16), reply indent desktop (32) / mobile (16), and a Divider line (spacing above/below, color, width).
  • Author: color (default Primary), hover color, font size (16).
  • Date: color (default Color 3), font size (13), gap from author name (10).
  • Body: color, font size (16), spacing above (10).
  • Reply link: color (default Color 1), font size (14), bold (on), spacing above (12).
  • Confirmation message: background, text color, bold toggle, corner radius, optional border, spacing around and under the message.
Shared section groups (from the theme's section system)

The section also carries the standard Section background settings, Section divider settings (none / shape / border / shadow), and Section spacing settings found across Flexoraa sections.

Tips & gotchas

Comments need blog settings enabled

For submitted comments to appear, make sure commenting is enabled in your HubSpot blog settings. This module controls placement and look, not the comment approval flow.

Keep it at the end

Place the comment area after the post body and any related-posts block so readers finish the article first.