NPS Survey Question


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        



                
                    var json = {
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "rating",
     "name": "nps_score",
     "title": "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
     "isRequired": true,
     "rateMin": 0,
     "rateMax": 10,
     "minRateDescription": "(Most unlikely)",
     "maxRateDescription": "(Most likely)"
    },
    {
     "type": "checkbox",
     "name": "promoter_features",
     "visibleIf": "{nps_score} >= 9",
     "title": "Which of the following features do you value the most?",
     "description": "Please select no more than three features.",
     "isRequired": true,
     "validators": [
      {
       "type": "answercount",
       "text": "Please select no more than three features.",
       "maxCount": 3
      }
     ],
     "showOtherItem": true,
     "choices": [
      "Performance",
      "Stability",
      "User interface",
      "Complete functionality",
      "Learning materials (documentation, demos, code examples)",
      "Quality support"
     ],
     "otherText": "Other features:",
     "colCount": 2
    },
    {
     "type": "comment",
     "name": "passive_experience",
     "visibleIf": "{nps_score} >= 7  and {nps_score} <= 8",
     "title": "What can we do to make your experience more satisfying?"
    },
    {
     "type": "comment",
     "name": "disappointing_experience",
     "visibleIf": "{nps_score} <= 6",
     "title": "Please let us know why you had such a disappointing experience with our product"
    }
   ]
  }
 ],
 "completedHtml": "<h3>Thank you for your feedback</h3>",
 "completedHtmlOnCondition": [
  {
   "expression": "{nps_score} >= 9",
   "html": "<h3>Thank you for your feedback</h3> <h4>We are glad that you love our product. Your ideas and suggestions will help us make it even better.</h4>"
  },
  {
    "expression": "{nps_score} >= 6  and {nps_score} <= 8",
    "html": "<h3>Thank you for your feedback</h3> <h4>We are glad that you shared your ideas with us. They will help us make our product better.</h4>"
  }
 ],
 "showQuestionNumbers": "off"
}
;

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
        
            function onAngularComponentInit() {
            Survey.SurveyNG.render("surveyElement", {
            model: survey 
            });
            }
            var HelloApp =
            ng.core
            .Component({
            selector: 'ng-app',
            template: '<div id="surveyContainer" class="survey-container contentcontainer codecontainer"><div id="surveyElement"></div></div> '})
            .Class({
            constructor: function() {
            },
            ngOnInit: function() {
            onAngularComponentInit();
            }
            });
            document.addEventListener('DOMContentLoaded', function() {
            ng.platformBrowserDynamic.bootstrap(HelloApp);
            });
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>NPS Survey Question, Angular Example | JS Survey and Form Library</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://npmcdn.com/zone.js/dist/zone-evergreen"></script>
    <script src="https://npmcdn.com/core-js@2.6.5/client/shim.min.js"></script>
    <script src="https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/Rx.umd.js"></script>
    <script src="https://npmcdn.com/@angular/core@2.0.0-rc.5/bundles/core.umd.js"></script>
    <script src="https://npmcdn.com/@angular/common@2.0.0-rc.5/bundles/common.umd.js"></script>
    <script src="https://npmcdn.com/@angular/compiler@2.0.0-rc.5/bundles/compiler.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser@2.0.0-rc.5/bundles/platform-browser.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser-dynamic@2.0.0-rc.5/bundles/platform-browser-dynamic.umd.js"></script>
    <script src="/DevBuilds/survey-angular/survey.angular.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
        <ng-app></ng-app>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.

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.

NPS Question

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

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.

Choice-Based Questions

The SurveyJS 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.

Open-Ended Questions

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

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.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.