FAQ Module for HubSpot with Schema Support

Updated 02/02/2024, Posted 02/02/2024 by James Parsons James Parsons •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

Hi, I'm James Parsons! I founded Content Powered, a content marketing agency where I partner with businesses to help them grow through strategic content. With nearly twenty years of SEO and content marketing experience, I've had the joy of helping companies connect with their audiences in meaningful ways. I started my journey by building and growing several successful eCommerce companies solely through content marketing, and I love to share what I've learned along the way. You'll find my thoughts and insights in publications like Search Engine Watch, Search Engine Journal, Forbes, Entrepreneur, and Inc, among others. I've been fortunate to work with wonderful clients ranging from growing businesses to Fortune 500 companies like eBay and Expedia, and helping them shape their content strategies. My focus is on creating optimized content that resonates and converts. I'd love to connect – the best way to contact me is by scheduling a call or by email.