-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Dropdown
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature
-
Multiple Textboxes
-
Rating Scale
-
Rating Scale UI Adaptation Modes
-
Ranking
-
Long Text
-
Image
-
HTML
-
File Upload
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Merge Question Values
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Conditional Visibility
-
Simplify Cascade Conditions
-
Dynamic Default Question Values
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage
NPS Survey Question
SurveyJS Form Library is a client-side component that allows you to create dynamic surveys and forms and integrate them into your JavaScript application. This component includes the following features:
- Dynamic forms, surveys, and quizzes for your JavaScript application
- Native support for React, Vue, Angular, and Knockout
- Integration of the Knockout version into jQuery applications
- 20+ built-in question types and support for custom question types
- Support for conditional survey logic
- Answer validation
- Modern, customizable UI themes
- TypeScript support
- Community-supported UI localization to 50+ languages
- Integration with any backend framework
- Survey results can be stored in any database
- Third-party component integration
Refer to one of the following tutorials to get started with SurveyJS Form Library on your platform:
This demo shows how to add an NPS question to your survey and configure follow-up questions.
NPS 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
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
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 thenoneText
property to change the item's display text.showSelectAllItem
(supported by Checkbox questions only)
Adds the Select All choice item. Use theselectAllText
property to change the item's display text.showOtherItem
Adds the Other choice item. Use theotherText
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.
Locale:
-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Dropdown
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature
-
Multiple Textboxes
-
Rating Scale
-
Rating Scale UI Adaptation Modes
-
Ranking
-
Long Text
-
Image
-
HTML
-
File Upload
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Merge Question Values
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Conditional Visibility
-
Simplify Cascade Conditions
-
Dynamic Default Question Values
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage