NPS Survey Question

NPS (net promoter score) is a metric used to evaluate customer loyalty and business growth opportunities. To measure NPS, respondents should rate on a scale of 0 to 10 how likely they would recommend your product or service to a friend or colleague. You can also ask follow-up questions to solicit additional feedback, for instance: "What is the reason for your score?". This demo shows how you can use the SurveyJS Form Library to create an NPS question and additional follow-up questions with predefined conditional logic.

To create an NPS question, use the Rating question type. It allows you to score answers to a question on a simple zero-to-ten scale. Define an object with the type property set to "rating" and add it to the elements array.

Use the rateMin and rateMax properties to limit the range of possible answers. Optionally, you can set the minRateDescription and maxRateDescription properties to add descriptions for the extreme scale values (0 and 10).

If users should not leave the NPS question unanswered, enable its isRequired property as shown in this demo.

Follow-up questions allow customers to elaborate on their score and help you better understand customer needs. Typically, follow-up questions ask respondents to select one or more values from a set of choices or leave a comment.

SurveyJS Form Library includes multiple choice-based question types: Dropdown, Radiogroup, Checkbox, Image Picker. In this demo, respondents are asked to select features they value the most. For this question, the best suitable type is Checkbox because it allows users to select multiple text values.

To create a Checkbox question, add an object with the type property set to "checkbox" to the elements array. Use the choices array to specify choice values. Populate it with primitive values as shown in this demo if you do not need to change display texts. Otherwise, fill the array with objects in which the value field contains a choice value and the text field contains display text for the value.

Choice-based questions can include special choices: None, Select All, Other. To enable them, use the following Boolean properties:

• showNoneItem
  Adds the None choice item. Use the noneText property to change the item's display text.

• showSelectAllItem (supported by Checkbox questions only)
  Adds the Select All choice item. Use the selectAllText property to change the item's display text.

• showOtherItem
  Adds the Other choice item. Use the otherText property to change the item's display text.

This demo enables the Other item.

You can use data validation to impose restrictions on selected values. For example, this demo shows how to limit the number of selected choices. To define validation rules, use the validators array.

If you want to arrange choices in multiple columns, specify the colCount property. In this demo, colCount is set to 2.

To add an open-ended question to your survey, use the Text or Comment question type. Unlike Text, the Comment type supports multi-line input. The NPS survey in this demo contains two Comment questions. To create them, add objects to the elements array and set their type property to "comment". Optionally, set the maxLength property to specify the maximum answer length in characters.

Conditional visibility is built upon Boolean expressions. To display different follow-up questions based on the NPS score, assign a Boolean expression to the visibleIf property of each follow-up question. A question is visible only when its expression evaluates to true. For example, the following expression displays the question only if the NPS score is 9 or higher:

visibleIf: "{nps_score} >= 9"

If you also want to display different Complete pages depending on the NPS score, specify the completedHtmlOnCondition property. It accepts an array where each object specifies a Boolean expression and HTML markup to display when this expression evaluates to true:

{
  "expression": "{some-question} = 0",
  "html": "<p>My custom HTML markup</p>"
}

If none of the expressions evaluates to true, the survey displays the markup specified by the completedHtml property. In this demo, this markup is displayed when the NPS score is 6 or lower.