Simple Survey (Toolbar)

The Simple Survey Toolbar adds a survey insert icon to the toolbar of the content editor. This will allow you to build surveys for the user to fill out. A survey consists of one or more questions with one or more scored answers. The visitor will get to see the questions one at a time. Answers, scores and totals are stored in properties of the visitors profile.

To view the results of a survey, add a Survey Results insight to a dashboard.

Adding a survey

To add a survey, click on "Insert Object" and choose the option "Survey".

survey.png

                             

Inserting a survey will insert an empty canvas in the editor and will open a tabbed lightbox with form controls. The lightbox itself can be repositioned on the page by dragging it using the drag bar on its left side.

The lightbox contains these tabs:

 The following sections will discuss each tab in detail.

Editing in the lightbox will automatically update the preview on the editing canvas. When you are done editing close the lightbox, click Ok to confirm the edit and finally click Save to save the changed dialogue.

Overview

On this tab you construct your survey by adding questions.

Click the Add Question button to add a new question to the survey. To edit a question, click its text, this will take you to the Question Details tab. To change the order of the questions, hover over the question, grab its handle on the left and drag the question to its intended location.

To delete a question hover over its name and click the delete icon that appears on the right.

Link with Profile Property

Set calculation in
Select the profile property that will hold the total sum of the answer scores for all questions, for example "7".
Store results in
Select the profile property that will hold the textual questions and answers of the survey, for example "What is your name? - King Arthur", "What is your quest? - To find the Holy Grail", etc.

Question Details

This tab will automatically open when you click on a question on the Overview tab. It allows you to edit the details of the selected question. Note that the active question is also displayed on the page. Changes to the question or its answers will be reflected on the page so you can see what the result will look like.

Available options:

Required / Optional
Select whether answering the question is required or optional. If a question is required the visitor cannot proceed to the next question or finish the survey without selecting an answer first.
Question
Enter the text for the question.
Expert settings
Click to toggle expert settings for this question:

Instructions for User
Enter optional text to display to the user.
Set to Profile Property
Select the profile property to hold the textual answers to this particular question. The score of the answer will be stored in a profile property with the same id as the selected profile property with "_score" appended. For example: if you store the answer in a profile property "Survey 1" with id "survey_1", the answer score will be stored in a profile property named "survey_1_score".
Multiple answers possible
Check the box to allow a visitor to select multiple answers for the selected question.

Navigating between questions

There are a couple of options to navigate between questions:

  • Click the navigation arrow buttons at the bottom of the Question Details tab to go to the next or the previous question.
  • Open the Overview tab and click the question you want to go to.

Styling

On the Styling tab you can modify the look of your survey.

 

Available options:

Custom CSS URL
Optionally enter the URL to load custom CSS from. The CSS from the URL is loaded before the Custom CSS Code.
Custom CSS code

Optionally enter custom CSS to style the trigger and the message. This CSS will overrule CSS loaded from the URL. The HTML of the toaster schematically looks like this:

<div class="bcAssessment">
  <fieldset>
    <label>...</label>
    <ul>
      <li>
        <input type="radio" />
        <label>...</label>
      </li>
      ...
    </ul>
 <fieldset>
</div>

So to style the list you will want to prefix your CSS rules with div.bcToaster

As an example, the CSS below will style the labels with a green text color:

div.bcAssessment li label {
  color: green;
}
Button label
Enter the text for the button that submits the answer to the question.

 

After Submit

On this tab you specify what happens after the user clicks the button to submit the form.

 

 Available options:

Redirect to Web Page
Enter the web page URL where the user will be redirected after successfully submitting the last question of the survey.
Inline Message
Edit the message to display after successfully submitting the last question of the survey. The survey will be replaced by this message.
Close Lightbox
When the user successfully submits the last question of the survey, it will close the lightbox it is in. This assumes that you placed the survey in a dialogue of the type "Lightbox".

 

The Simple Survey Toolbar is a certified plugin.