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.
![](https://cdn.prod.website-files.com/63c513e10a00605d8aee53a9/63fc03fd300f0c525cab33e2_636c5768a4dc6af6a10728c5_1*mnQ6cDMEmwsPCJUV1a56JA.jpeg)
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
![](https://cdn.prod.website-files.com/63c513e10a00605d8aee53a9/63fc03fd300f0c930bab33e3_636c57686480fa80d33fbe9f_1*fqkpj5ULst80PwwPySMfCA.jpeg)
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.
![](https://cdn.prod.website-files.com/63c513e10a00605d8aee53a9/63fc03fd300f0c3612ab33e1_636c57686f88f1d0f1460c0b_1*g6q2Ml7xmG4nnmLJO_SsRg.jpeg)
Then, make the question group above it clickable. When clicked we want to toggle the answer group below it.
![](https://cdn.prod.website-files.com/63c513e10a00605d8aee53a9/63fc03fd300f0c8dd1ab33df_636c5768a115957fe6589e5c_1*-_ooiwhV5E1887mP_Cjg8g.jpeg)
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.
![](https://cdn.prod.website-files.com/63c513e10a00605d8aee53a9/63fc03fd300f0c1b8dab33e0_636c5768653cb24348ecfeca_1*HO2pV49vHaDiA0xvClYAzA.png)
Then do the same for each answer text.
![](https://cdn.prod.website-files.com/63c513e10a00605d8aee53a9/63fc03fd300f0cc7f8ab33de_636c576834d44a1f5847ff60_1*G0yI604aq6BC1eV6c5xYlA.png)
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.