Simple feedback pages in 5 easy steps

by michal-frackowiak on 31 Oct 2012 10:31

Last week we introduced a new feature people had been waiting for — fine-grained view permission settings for page categories. The view permission allows you to set who can view a given page category: let it be everyone, just Wikidot users, members of your site or just admins and moderators of your site.

The new option allows granting the view permission to the user who created a page. A small addition, but as you will see it opens a number of possibilities — you can now hide pages from everyone, while allowing users to create pages and view the pages they create.

Imagine a drop-box system where you want your users to leave messages as wiki pages so that you and a given user can read the page and comment on it. At the same time you want to keep the conversation hidden from other users. The new permission settings make it easy to set up.

I would like to show a small example of a system collecting feedback which works just as described. It will use 4 major Wikidot features:

  1. Templates and Data Forms
  2. Autonumbering
  3. Permissions
  4. Listing pages

We will use category feedback as a drop-box to contain all pages defining the structure, as well the actual feedback pages.

Step 1: Design a data form and a template

We will use an easy form to get things started. Let's create a page feedback:_template with the following content:

[[form]]
fields:
  title:
    type: static
    value: "[[size 200%]]##666|Please leave your feedback!##[[/size]]"
  feedback:
    label: How do you like my site?
    type: text
    height: 5
[[/form]]

Nothing fancy so far, just one field. Now, when you try to create any page in a category, a form will appear:

8140912255_2cbbe476f0_o_d.jpg

Sure this needs some styling — we will get back to it. Explaining how forms work and how to design them is beyond this example, but you can look at the official documentation.

Step 2: Set autonumbering

Asking users to choose name (URL) for every page they create does not work in this case. Autonumbering to the rescue! This way you can point users to a single URL, e.g. feedback:create and the page they save will automatically get a sequential number as a name — feedback:1, feedback:2, feedback:3 etc.

Within the Site Manager you need to find Autonumbering of pages option and set the category feedback to be autonumbered.

8140958354_e5e6134da3_o_d.jpg

Now you can set a single URL for creating feedback pages. Let it be feedback:create/edit/true. Whenever a user visits this page, the form automatically appears. Upon saving, the page automatically get its name and it's displayed on screen.

Step 3: Set permissions

Right now everyone could view everyone else's pages. We should dig into Permissions settings and make sure that:

  1. any Wikidot user can create a page,
  2. only the user who created the page can view it,
  3. the user who created the page can edit it (this is optional).
8140960298_ea59b52790_o_d.jpg

Of course admins and moderators can view the pages too.

Step 4: List all your feedback

Now let us create a simple page to list all feedback pages. ListPages module should make it easy. Let's create a page feedback:_list with content:

[[module ListPages category="feedback"]]
by: [[*user %%created_by%%]]

%%form_data{feedback}%%

[[%%link%% link]]

--------
[[/module]]

Here is how it works with a couple of my own feedbacks:

8140975926_75b5d190f5_o_d.jpg

Step 5: Final refinements

The system already works! One final thing is to style the form a bit and add a "Thank you" text that should appear after the feedback page is saved.

First part is unfortunately involves editing the CSS theme for the given category. You should add the following piece of code to the theme for category feedback:

tr.row-0 {
  display: none;
}

#action-area h1 {
  display: none;
}

#page-title {
  display: none;
}

If your site originates from the default template, the easiest thing to do is to create a new custom theme (under Custom Themes in Site Manager) like this:

8140988088_76d42c65ba_o_d.jpg

and apply it to the feedback category:

8140957915_c6e2a99544_o_d.jpg

Now for the "Thank you" text. The change is easy and involves editing the feedback:_template page:

= [[size 250%]]Thanks for leaving your feedback![[/size]]

= [[size 150%]][/ Back to the main page][[/size]]
====

[[form]]
fields:
  title:
    type: static
    value: "[[size 200%]]##666|Please leave your feedback!##[[/size]]"
  feedback:
    label: How do you like my site?
    type: text
    height: 5
[[/form]]

We could also display the data from the feedback page, but this is up to you now.

Rather than seeing another screenshot, why don't you just take a look how it works live:

feedback-example.wikidot.com


Wikidot already had powerful tools to build application-like websites. In the example above, the key elements have been used to create a really simple, but extendible feedback system, where the new permission settings play a critical role.

The above system could be easily adapted to handle various contact forms or even support requests from customers if you also enable page comments.

If you find the above example useful and decide to implement a similar system on your site, please let us now by adding your comment here!

Comments: 11

Add a New Comment