Sectioned FAQ page
#Overview
Join our community to suggest new recipe ideas!
This guide shows how to create an FAQ model that lets you add pre-created lists of Q&A pairs as sections.
You'll create a component as a template for the Q&A pairs, a model to store the Q&A pairs with data as lists with a title, and a model to let you create entries where you add this information through reference fields.
Sectioned FAQ page
This recipe is a great option if you prefer to work on Q&A lists as individual content pieces that you can easily add to another model to create topic-based FAQ sections on a page. It is also a great option if you need to show different sets of Q&A pairs throughout your website, as it allows you to create content entries grouping different configurations of questions and answers.
This image shows what a frontend using this setup could look like:
What this could look like on the frontend
#Prerequisites
REQUIRED:You need to have a Hygraph account. If you don't have one, you can sign up here.REQUIRED:You need to have a Hygraph project. Look into the following section to learn more about your options.
#What you can do
Use this guide to create a Sectioned FAQ Page model. You have two options:
OPTION 1:Create a project. This is the way to go if you want to follow the entire tutorial for learning purposes.OPTION 2:Use an existing project of yours. This is the way to go if you already have a project and want to add this model. In this case, you may need to adjust parts of the tutorial to your own project schema.
- Take plan limits into consideration when adding a recipe to your own project.
- Are you new to Hygraph? You may want to check out our Getting Started Tutorial!
#Not in the mood to start building?
This is the way to go if you're curious about how we built the FAQ recipes but don't want to follow the step-by-step creation process. This project contains the entire FAQ Cookbook so you can compare recipes or look into what instances they contain.
#Core concepts
In this guide, you'll work with different schema elements to create a Sectioned FAQ Page model. Let's look into them:
- Model: Your schema is the content structure of your project. You can define your schema by creating models, adding fields, reusable components, and sidebar widgets, integrating remote sources, and establishing relationships with other models.
- Component: a predefined set of fields that can be reused across models and content entries. You can think of a component as a flexible, reusable template: you define the fields that will be used inside a component once and then fill them with different content every time you use it in a content entry.
- References: References are relations between two or more content entries in your project. With references, you can reuse content entries by connecting them. Once the relation is configured, you can also create related content directly from the content form.
#Step-by-step guide
This video follows the same step-by-step tutorial offered in this document.
#1. Build the component
We will create a component that will allow us to create different sets of questions and answers.
Simple FAQ component
In the Schema builder, click +Add next to Components and use the following information:
| Field | Input |
|---|---|
| Display name | Simple FAQ Component |
| API ID | SimpleFaqComponent |
| API ID Plural | SimpleFaqComponents |
Click Add component to save.
Now that you've created the component itself, it's time to add fields to it. This will be a very simple component that only contains a Single line text field for the question, and a Rich Text field for the answer.
We'll start with the question. Add a Single line text field from the right sidebar, and use the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display name | Question |
| Settings | API ID | question |
| Settings | Description | Write the question here |
| Settings | Use as title field | Leave this checkbox selected |
| Validations | Make field required | Select this checkbox |
| Validations | Set field as unique | Select this checkbox |
Click Add to save.
This field configuration ensures that editors won't be able to repeat the exact same question on a list.
Next, you want include a rich text field for the answer, which will also allow some formatting. Add a Rich text field from the right sidebar, using the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display name | Answer |
| Settings | API ID | answer |
| Settings | Description | Write the answer here |
Click Add to save.
In this case, we're not enabling embedding because we don't need to insert content from other Q&A pairs or even from other models in our simple setup. Consider enabling embedding if your content can benefit from it.
Now that our simple FAQ component is ready, we can create the first model.
#2. Create the FAQ list model
This model will let you create lists of Q&A pairs as content entries.
To create the model, navigate to the Schema builder and click +Add next to Models. Use the following information:
| Field | Input |
|---|---|
| Display name | FAQ List Group |
| API ID | FaqListGroup |
| API ID Plural | FaqListGroups |
Click Add Model to save.
Now that the model has been created, you can start adding fields to it.
We will add a Single line text field to use as title, and a Basic component field to hold the component that we created in the previous step.
Let's start with the title. Add a Single line text field from the right sidebar, and use the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display name | FAQ Title |
| Settings | API ID | faqTitle |
| Settings | Description | FAQ group title |
| Settings | Use as title field | Leave this checkbox selected |
| Validations | Make field required | Select this checkbox |
| Validations | Set field as unique | Select this checkbox |
Click Add to save.
This configuration ensures that editors can't create lists without a unique name.
It's time to add the Simple FAQ component that you built earlier. Add a Basic component field from the right sidebar, using the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display name | Q&A Pair |
| Settings | API ID | qAPair |
| Settings | Description | Add a pair of question and answer fields |
| Settings | Allow multiple values | Select this checkbox |
| Settings | Select a component | Use the dropdown to select Simple FAQ Component. |
Click Add to save.
While you could have added the Q&A fields manually rather than use a component field, this setup simplifies adding the repeated set of fields over and over.
We chose to create the FAQ list as a model because in a use case like this, we want to create question & answer sets as content entries that can be easily referenced in other models later on. In the next step, we will create the Sectioned FAQ Page Model with a reference field that connects this model, which will allow editors to quickly set up FAQ landing pages containing topic-based FAQ sections.
#3. Create the FAQ page model
To create the FAQ page model, navigate to the Schema builder and click +Add next to Models. Use the following information:
| Field | Input |
|---|---|
| Display name | Sectioned FAQ Page |
| API ID | SectionedFaqPage |
| API ID Plural | SectionedFaqPages |
Click Add Model to save.
This model will contain only two fields: a Single line text field for the page title, and a Reference field to add lists of Q&A from the model you created in the previous step.
Let's start with the title. Add a Single line text field from the right sidebar, and use the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display name | Page title |
| Settings | API ID | pageTitle |
| Settings | Description | Write a page title here |
| Settings | Use as title field | Leave this checkbox selected |
| Validations | Make field required | Select this checkbox |
| Validations | Set field as unique | Select this checkbox |
Click Add to save.
This configuration ensures that all FAQ Page entries contain a unique title that will allow easy identification in the content form.
Next, you will create a reference field that editors can use to add content entries from the model you created in the previous step.
Add a Reference field from the right sidebar, using the following information:
| Tab | Field | Input |
|---|---|---|
| Define | Allow only one model to be referenced | Select this radio button. |
| Define | Model to reference | use the dropdown to select FAQ List Group |
| Define | Reference direction | Use the radio button to select One-way reference |
| Define | Relation cardinality | One to many |
| Define | Allow multiple (…) | Select this checkbox |
| Configure | Display name | FAQ List |
| Configure | API ID | faqList |
| Configure | Description | Select a list of questions and answers |
Click Add to save.
Your model is ready! This is how you build a Sectioned FAQ Page model that lets you add lists of questions & answers to a content entry. You can use this in your front end in different ways, such as rich text embeds or landing pages.
You could also add the same set of fields to a component rather than a model to reuse as a template for an FAQ list block.
#Resulting content form
If you followed this tutorial, your resulting content form should look like this:
Resulting content form
Editors will be able to easily create FAQ pages by referencing lists from the FAQ List model. The FAQ Pages they create could contain a single Q&A list, or several ones.