Plainform | Add FAQ Items

Learn how to add and customize frequently asked questions on your Plainform homepage.

Goal

By the end of this recipe, you'll have customized your FAQ section with questions and answers relevant to your product.

Prerequisites

A working Plainform installation
Basic understanding of JSON syntax

Steps

Locate the FAQ Content

All FAQ content is stored in the locale file:

locales/en.json

Navigate to homePage.faqSection in the JSON structure.

Update Section Header

Customize the FAQ section title and description:

locales/en.json

{
  "homePage": {
    "faqSection": {
      "title": "Frequently asked questions",
      "description": "Answer common questions about your product.\nHelp customers make informed decisions."
    }
  }
}

Add FAQ Items

Each FAQ item has a title (question) and description (answer):

locales/en.json

"faq": [
  {
    "title": "How does Reddit Lead Finder work?",
    "description": "Reddit Lead Finder monitors relevant subreddits for discussions where your product can help. When it finds a match, you get notified with the post details and suggested response templates."
  },
  {
    "title": "Which subreddits can I monitor?",
    "description": "You can monitor any public subreddit. Our Pro plan allows unlimited subreddit tracking, while the Starter plan includes up to 5 subreddits."
  }
]

Writing Guidelines

Questions:

Start with question words (How, What, Why, When, Can, Do)
Be specific and use customer language
Keep concise (under 15 words)

Answers:

Start with a direct answer
Keep scannable (2-4 sentences)
Link to docs for complex topics

Organize FAQ Order

Organize FAQ items by priority:

Most common questions first
Purchase-related questions (pricing, refunds, trials)
Technical questions (features, integrations)
Support questions (contact, help)

Preview Your Changes

npm run dev

Scroll to the FAQ section on the homepage to see your changes.

Common Issues

FAQ Not Showing

Check that the FAQ component is imported in the homepage:

app/(base)/page.tsx

import { Faq } from '@/components/Faq';

export default function HomePage() {
  return (
    <>
      <Faq />
    </>
  );
}

Accordion Not Working

Ensure the Accordion component is properly configured with type="single" and collapsible:

<Accordion type="single" collapsible className="w-full">

Text Overflow on Mobile

The component uses text-balance for better wrapping. If issues persist, add break-words class to the AccordionTrigger.

Best Practices

Optimal count: 8-12 questions for comprehensive coverage
Use customer language - Write questions as customers would ask them
Update regularly - Add new questions based on support tickets
SEO benefits - FAQ sections target long-tail keywords and can show as rich snippets

Next Steps

Customize Hero Section - Update your homepage headline
Add Blog Post - Create content marketing
Add Testimonials - Build social proof

Add FAQ Items

On this page