How to build a FAQ page in Bubble is a simple 5 step journey. A FAQ, or Frequently Asked Questions, page is a must-have for any business website. Building one in Bubble.io is a fast, and cost effective way of building one yourself.
Here’s how to go about building your own FAQ page in Bubble:
1. Get your design into Bubble
To save time I used the Figma to Bubble.io import. When you have a simple design, this can help speed up your front-end development, by getting everything you need into Bubble.
2. Configure your database
You’re going to want to create one Data Type, call it whatever you want. In this case we’re calling ours “FAQ”.
Then add two Data Fields:
- Question — Defined as Text
- Answer — Defined as Text
3. Make an expandable group
For this design, we’re going to create a group under each question called “Group Answer [Number]” that we make not visible on page load and collapse when hidden checked.
Then, make the question group above it clickable. When clicked we want to toggle the answer group below it.
Now in this case, I’ll repeat this 4 times for each question & answer group as I want my design to have 4 FAQ’s.
4. Make questions & answers dynamic
To do this, you’ll want to do a search for your Data Type name, in this case “FAQ”. Then for question text, you’’ select item # [faq number] question.
As seen below.
Then do the same for each answer text.
5. Finally, fill in your database with your Questions & Answers
Fill in your database with questions & answers to appear on your FAQ table. To do this, go into your database and click new entry. Then type in a question & answer for each FAQ.
--
Just like that you have a dynamic FAQ built in Bubble. If you’re looking to build more stuff in Bubble reach out to us — we love to chat to no-code, products, Bubble & more.
