Just a nice and easy to use FAQ built in Webflow powered by a connected CMS and using styling elements from Finsweets Client-first System.
Using only Webflow interactions, no JavaScript or any other custom code.
UPDATE: Added Microdata FAQ Scheme properties for Google Q&A Cards
How does the FAQ Work?
The FAQ is set up to use a Webflow CMS to add questions and answers as well as set the sort order. From there the Collection List automatically populates the entries and styles them.
Styles can easily be changed either using your own custom classes or swapping out the Finsweet Client-First selectors as required.
You can find out more about the Client-First design system here: https://www.finsweet.com/client-first/
I have no affiliation with Finsweet.
How many questions does the FAQ support?
Technically, as many as the Webflow CMS supports and the plan you are on. But I wouldn't have more than 5 or 10 items as the list will get too long and cumbersome.
How do I impliment this in my Webflow project?
First you will need to set up a CMS in your Webflow project.
I recommend setting up a CMS with collection fields like below:
After you have set up your CMS, you just need to copy the Collection List from the elements panel in Webflow and paste it in your Webflow project. This will bring across all the required components and styling.
After you have pasted the CMS collection to your Webflow project you will need to relink it to the CMS collection you created earlier and reconnect the Text Fields for the Question and Answer sections.
In some cases, the interactions might not come across when you copy/paste the Collection List, in this case you will just need to recreate them by duplicating the interactions in this project file.
Do I need to copy the Global Styles Embed?
No, it is only there for the Finsweet Client-First styling.
Do you offer support for this FAQ?
Simple answer is, nope.
However, I am happy to try and help you out if there are any issues integrating it, just email me at hi@reworkdigital.com.au and if I can help, I will do my best.