FAQ Module for HubSpot with Schema Support

James Parsons by James Parsons • Updated Feb 2nd, 2024 •0 Comments•

This HubSpot module will let you insert an FAQ section into any page, compelte with Schema markup for each question and answer.

To create the new module, head over to the design manager and save this as the module HTML:

<div class="faq-main">
  <div class="content-wrapper">
    <h2 class="faq-heading">{{ module.faq_heading }}</h2>
    <div class="faq-container">
      {% for item in module.faq_group %}
      <div class="faq-item {% if loop.index == 1 %}active{% endif %}">
        <h3 class="faq-question">{{ item.faq_question }}</h3>
        <div class="faq-answer" {% if loop.index != 1 %}style="display:none;"{% endif %}>
          {{ item.faq_answer }}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {% for item in module.faq_group %}
    {
      "@type": "Question",
      "name": "{{ item.faq_question|striptags }}",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "{{ item.faq_answer|striptags }}"
      }
    }{% if not loop.last %},{% endif %}
    {% endfor %}
  ]
}
</script>

<style>
  .faq-main {
    padding: 60px 0;
  }
  .faq-heading {
    text-align: center;
    margin-bottom: 40px;
  }
  .faq-container {
    margin-top: 40px;
  }
  .faq-question {
    cursor: pointer;
    font-size: 24px;
    margin-bottom: 10px;
  }
  .faq-answer {
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 4px;
    display: none;
  }
  .active .faq-answer {
    display: block;
  }
  @media (max-width: 767px) {
    .faq-main {
      padding: 40px 0;
    }
    .faq-question {
      font-size: 20px;
    }
  }
</style>

This has fairly basic styling, but you can quickly and easily improve upon it with custom brand colors, icons, padding, spacing, whitespace, and so on, as I've done many times in the past for clients.

Enjoy, and if this helped you, please share in the comments!

Related Code Snippets

Written by James Parsons

James Parsons is the founder and CEO of Content Powered, a premier content marketing agency that leverages nearly two decades of his experience in content marketing to drive business growth. Renowned for founding and scaling multi-million dollar eCommerce businesses through strategic content marketing, James has become a trusted voice in the industry, sharing his insights in Search Engine Watch, Search Engine Journal, Forbes, Entrepreneur, Inc, and other leading publications. His background encompasses key roles across various agencies, contributing to the content strategies of major brands like eBay and Expedia. James's expertise spans SEO, conversion rate optimization, and effective content strategies, making him a pivotal figure in the industry.