FAQ Pro for HubSpot

Why FAQ Pro

Most HubSpot FAQ modules give you an accordion. FAQ Pro also gives you FAQPage JSON-LD structured data, emitted automatically from the same question and answer content you're already writing — no duplicate work, no separate schema tool.

Structured data matters more than it used to. While Google restricted FAQ rich snippets to authoritative government and health sites in 2023, AI search platforms have moved in the opposite direction: ChatGPT, Perplexity, Google AI Overviews, and Microsoft Bing all use structured data as a signal when generating and citing answers. Microsoft's Bing team publicly confirmed in 2025 that schema markup helps their LLMs understand content.

Per-Element Font Controls

FAQ Pro exposes a dedicated HubSpot font field for every text element in the module. Each field provides family, weight, size, and color in one unified control — the standard HubSpot font picker:

• Heading Font — Section title
• Eyebrow Font — Small label above the heading
• Subtitle Font — Descriptive text below the heading
• Question Font — Accordion trigger text
• Answer Font — Expanded answer text
• CTA Font — Call-to-action link

Each font field inherits from the theme's body or heading font by default, but can be overridden per-element. Line-height, letter-spacing, and eyebrow uppercase are exposed as separate fields since the HubSpot font picker does not cover those properties.

Zero Hardcoded Values

Every style value in the module is driven by a configurable field — fonts, sizes, weights, colors, padding, gaps, border radius, shadows, column ratios, sticky offsets, responsive scale factors. Nothing is hardcoded in the CSS. If you need to change anything about how the module looks, there is a field for it.

FAQPage JSON-LD Schema

Every instance of FAQ Pro emits a <script type="application/ld+json"> block with @type: FAQPage structured data by default. The schema is built from the same question and answer fields you're already editing — no duplicate content to maintain.

What's included

• @context — https://schema.org
• @type — FAQPage
• mainEntity — An array of Question objects, one per FAQ item
• Question.name — The question text (plain string, properly escaped)
• Question.acceptedAnswer — An Answer object containing the full rich-text answer (HTML preserved per Google's spec — lists, links, and formatting are allowed)

Example output

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How does the 14-day free trial work?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Start your trial with full access..."
      }
    }
  ]
}
</script>

Disabling the schema

If you're already emitting FAQ schema via another tool or a global script on your page, toggle Output FAQPage Schema (JSON-LD) off under the module's Content > Settings tab. Default is on.

Layout Modes

• Split — Heading and subtitle sit sticky on the left, accordion on the right. Column ratio and gap are configurable. Collapses to stacked on mobile.
• Full Width (Centered) — Heading and accordion stack vertically in a single centered column. Max width is configurable.
• Grid (Multi-Column) — Accordion items flow into a 1, 2, or 3-column grid. Collapses to a single column on tablet and below.

Content Fields

Header

• Eyebrow — Small label above the heading.
• Heading — Main section heading with configurable heading tag (H2–H4).
• Subtitle — Descriptive text beneath the heading.

FAQ Items (Repeater, 1–30 items)

• Question — Plain text. Used as the accordion trigger and as Question.name in the JSON-LD output.
• Answer — Rich text with full support for paragraphs, headings, lists, links, bold, italic, blockquotes, code, tables, and images. Used as acceptedAnswer.text in the JSON-LD output.

Call to Action

• Show CTA Link, Link Text, Link URL — Optional CTA below the content.

Settings

• Layout — Split, Full Width, or Grid.
• Columns — 1, 2, or 3 (Grid only).
• Header Alignment — Center or Left (Full and Grid only).
• Open First Item — Automatically expand the first FAQ item on page load.
• Allow Multiple Open — Allow multiple FAQ items to be expanded simultaneously.
• Output FAQPage Schema (JSON-LD) — Default: on.

Style Controls

Container

Maximum width and horizontal padding for the entire section.

Typography (per-element)

Six dedicated HubSpot font fields (Heading, Eyebrow, Subtitle, Question, Answer, CTA), each providing family, weight, size, and color in one unified control. Plus: heading line-height and letter-spacing, eyebrow letter-spacing and uppercase toggle, subtitle line-height, question line-height, answer line-height.

Colors (non-text)

• Section Background — with opacity.
• Accent Color — drives active question color, active icon color, hover state, focus ring, link color inside answers, and blockquote border.
• Icon Color, Item Background, Item Border, Item Hover Background, Shadow Color.

Layout

• Split Heading Column Ratio and Content Column Ratio — Fractional units (default 1 / 1.5).
• Split Column Gap and Sticky Header Top Offset.
• Full Max Width — Max width of Full layout content area.
• Header-to-Items Gap — Full and Grid layouts.
• Subtitle Max Width when Centered.

Item Card

• Padding Vertical/Horizontal, Gap Between Items, Border Radius, Border Width, Box Shadow, Icon Size, Question-to-Icon Gap, Answer Max Width.

Spacing

• Section Padding Top/Bottom, Header Internal Gap (between eyebrow/heading/subtitle), CTA Padding Top.

Responsive

• Tablet Breakpoint, Mobile Breakpoint.
• Split Tablet Stacked Gap.
• Heading Tablet Scale, Heading Mobile Scale, Question Mobile Scale, Answer Mobile Scale — Multipliers for responsive typography.
• Mobile Horizontal Padding.

Accessibility

• Semantic HTML with proper heading hierarchy and <button> elements for accordion triggers.
• aria-expanded on every trigger reflects open/closed state.
• Keyboard navigation via Tab, Enter, and Space. Works with screen readers.
• Visible focus rings using focus-visible, colored to match the Accent color.
• All question and answer text is rendered as real HTML (not hidden behind JS), so Google, Bing, and AI crawlers index every Q&A regardless of whether it's expanded or collapsed.

Demo Notes

• Demo 1 (Bold SaaS) — Inter 800 at 72px, electric violet accent, split layout with sticky left header. Card-style items with 16px gap, 20px radius, 32px vertical padding. 120/140 section padding.
• Demo 2 (Warm Editorial) — Libre Baskerville headings + Inter body, brown accent, 2-column grid with card-style items. 20px gap, 16px radius.
• Demo 3 (Luxury Atelier) — Fraunces at 96px on warm espresso, champagne accent, full centered layout. Seamless stacked accordion with 48px vertical item padding. 160/180 section padding.