About this post

Ironically, this question gets asked a lot, so I thought I would show you how simple and easy it is to create an FAQs page in Umbraco using the Archetype package, in 7 easy steps.

1. Install Archetype if you haven't already.

To install Archetype, go to the developer tab, click on Packages in the menu and in the search bar type in 'Archetype'

Next you want to click on the package that is just called 'Archetype'. It was created by Kevin Giszewski. https://our.umbraco.org/projects/backoffice-extensions/archetype/

Then click on the button titled 'Install package', tick to accept terms and click on install. Once it has installed, click Finish.

2. Create a new custom data type called 'FAQ List Control' using the Archetype Property editor.

Go to Developer Tab, right click on Data Types and choose Create > New data type

Put the name as FAQ List Control

Property editor: Archetype

Enter the following:

Label: FAQ List Control
Alias: faqListControl
Label Template: {{question}}

Add one for question
Label: Question
Alias: question
Help Text: Enter the question
DataType: TextArea
Required: Yes

Add another one for answer
Label: Answer
Alias: answer
Help Text: Enter the answer for this question
DataType: Rich Text Editor
Required: Yes

Click on Global Fieldset Options and tick the Start With Add Button checkbox. Then click on close in the bottom right corner.

Finally click on save.

3. Create a template called FAQs

  • Click on the Settings tab
  • Expand the templates folder
  • Right click on the master template and choose create.
  • Enter the name FAQs and then press save in the bottom right corner.

4. Create a document type called FAQs

  • Right click on document types, choos create.
  • Choose the second option 'Document Type without a template'
  • Enter the name as FAQs Controls
  • Add a tab called FAQs
  • Add a property called FAQ List
  • Enter a description 'Add the frequently asked questions here'
  • Click on Add editor and then click on the Reuse tab
  • In the search bar above the Reuse tab, start typing FAQ
  • Choose the FAQ List Control
  • Click on Submit and then click on Save
  • Staying on this page, click on the Templates icon in the top right corner
  • Click on Choose default template and choose the FAQs template you created. This will make it the default template for this document type.
  • Click save in the bottom right corner.

5. Add this code to the FAQs template to render the FAQs.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@using Archetype.Models
    Layout = "Master.cshtml";
    List<KeyValuePair<string,string>> faqs = GetFAQsModel();
@if(faqs != null && faqs.Count > 0)
<div class="container">
    <h2>See our FAQs</h2>
    <div id="accordion">
        @foreach(KeyValuePair<string,string> faq in faqs)
    To get this to work, you need to define it in the master template under the last script tag like this:
    @RenderSection("ScriptsBottom", false)
@section ScriptsBottom{
    <!-- find out more about the accordion in jquery-ui here http://api.jqueryui.com/accordion/ -->
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      $( function() {
        $( "#accordion" ).accordion({
          collapsible: true,
          active: false
      } );
    I've used a function in the template here so it is easier to take it out and put it into a separate helper class
@functions {
    public List<KeyValuePair<string, string>> GetFAQsModel()
        List<KeyValuePair<string, string>> model = null;
            model = new List<KeyValuePair<string, string>>();
            ArchetypeModel faqList = Model.Content.GetPropertyValue<ArchetypeModel>("fAQList");
            foreach(ArchetypeFieldsetModel faq in faqList)
                string question = faq.GetValue<string>("question");
                string answer = faq.GetValue<string>("answer");
                model.Add(new KeyValuePair<string, string>(question, answer));
        return model;


You will need to reference jQueryUi for this demo to work. You may want to do it differently, but to make this demo work you need to add this to your Master template under the last script tag.

@RenderSection("ScriptsBottom", false)

6. Allow the FAQs template under the home doc type.

  • Go to document types
  • Click on Home
  • In the top right, click on the permissions icon.
  • Then click on Add child and choose FAQs
  • click on save in the bottom right corner

7. Add the FAQs page under Home in the content section

  • Click on Content in the left menu.
  • Right click on home, choose Create and then choose FAQs
  • Enter the name FAQs
  • Click on add an item
  • Put in your first question and answer
  • Use the plus symbol in the top right to add more questions and answers.
  • Click on Save and Publish

All Done

You should be able to go the FAQs page on the front end and see them. Click on the question links and see the answers expand.

You can work on the styling yourself, and move the code into a separate controller and classes. I just wanted to get the basic premise across.

Paul Seal

Umbraco MVP and .NET Web Developer from Derby (UK) who specialises in building Content Management System (CMS) websites using MVC with Umbraco as a framework. Paul is passionate about web development and programming as a whole. Apart from when he's with his wife and son, if he's not writing code, he's thinking about it or listening to a podcast about it.

Proudly sponsored by


  • Moriyama build, support and deploy Umbraco, Azure and ASP.NET websites and applications.

  • CI/CD service for Windows, Linux and macOS
  • Build, test, deploy your apps faster, on any platform.

  • Custom stickers for startups, artists and brands.
  • Bespoke easy-apply, removable, custom brand stickers printed in the UK.

  • elmah.io is the easy error logging and uptime monitoring service for .NET.
  • Take back control of your errors with support for all .NET web and logging frameworks.
uSync Complete

  • uSync.Complete gives you all the uSync packages, allowing you to completely control how your Umbraco settings, content and media is stored, transferred and managed across all your Umbraco Installations.

  • More than a theme for Umbraco CMS, take full control of your content and design with a feature-rich, award-nominated & content editor focused website platform.

  • Affordable, Geo-Redundant, Umbraco hosting which gives back to the community by sponsoring an Umbraco Open Source Developer with each hosting package sold.