Advanced Survey/Feedback/Quiz System - SurveyJS

SurveyJS is a robust, customizable, cross-platform Survey/Feedback/Questionnaire/Quiz JavaScript library designed for jQuery, Angular, React, VueJS, knockout, etc.

Main features:

• Supported question types: input, radio, checkbox, dropdown, matrix, rating, image picker, comment, custom function, etc.
• Share data between questions.
• Print to PDF.
• Analyze survey results.
• Supports condition logic.
• Markdown and Text Processing.
• Multiple languages.
• Form validation.
• 8 built-in themes.
• Supports 3rd plugins: select2, jQuery UI date picker, Nouislider, and much more.

Basic usage (jQuery):

1. Include jQuery library and the SurveyJS library's files on the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/survey.jquery.js"></script>
<link href="/path/to/survey.css" type="text/css" rel="stylesheet"/>

2. Define your questions using JSON. You can build your own JSON using the online survey editor.

var json = {
    "completedHtml": "<h3>Thank you for your feedback.</h3> <h5>Your thoughts and ideas will help us to create a great product!</h5>",
    "completedHtmlOnCondition": [
        {
            "expression": "{nps_score} > 8",
            "html": "<h3>Thank you for your feedback.</h3> <h5>We glad that you love our product. Your ideas and suggestions will help us to make our product even better!</h5>"
        }, {
            "expression": "{nps_score} < 7",
            "html": "<h3>Thank you for your feedback.</h3> <h5> We are glad that you share with us your ideas.We highly value all suggestions from our customers. We do our best to improve the product and reach your expectation.</h5>\n"
        }
    ],
    "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": "What features do you value the most?",
                    "isRequired": true,
                    "validators": [
                        {
                            "type": "answercount",
                            "text": "Please select two features maximum.",
                            "maxCount": 2
                        }
                    ],
                    "hasOther": true,
                    "choices": [
                        "Performance", "Stability", "User Interface", "Complete Functionality"
                    ],
                    "otherText": "Other feature:",
                    "colCount": 2
                }, {
                    "type": "comment",
                    "name": "passive_experience",
                    "visibleIf": "{nps_score} > 6  and {nps_score} < 9",
                    "title": "What is the primary reason for your score?"
                }, {
                    "type": "comment",
                    "name": "disappointed_experience",
                    "visibleIf": "{nps_score} notempty",
                    "title": "What do you miss and what was disappointing in your experience with us?"
                }
            ]
        }
    ],
    "showQuestionNumbers": "off"
};

3. Create a container to place the survey.

<div id="myContainer"></div>

4. Generate a surver form from the JSON you provide.

window.survey = new Survey.Model(json);
$("#myContainer").Survey({
  model: survey,
  onComplete: sendDataToServer
});

5. The example JS that shows how to send the results to your server.

function sendDataToServer(survey) {
  var resultAsString = JSON.stringify(survey.data);
  // send the resultAsString to the server
}

6. The example JS that shows how to send the results to your server.

function sendDataToServer(survey) {
  var resultAsString = JSON.stringify(survey.data);
  // send the resultAsString to the server
}

7. Set the theme you'd like to use. All themes:

Survey.StylesManager.applyTheme("bootstrap");
Survey.StylesManager.applyTheme("orange");
Survey.StylesManager.applyTheme("darkblue");
Survey.StylesManager.applyTheme("darkrose");
Survey.StylesManager.applyTheme("stone");
Survey.StylesManager.applyTheme("winter");
Survey.StylesManager.applyTheme("winterstone");

Changelog:

2019-12-03

• v1.1.23: Decrease margin-right for inline imagepicker item

2019-11-27

• v1.1.22: Decrease margin-right for inline imagepicker item

2019-11-19

• v1.1.21: Decrease margin-right for inline imagepicker item

2019-11-14

• v1.1.20: Add currencySymbol to cultureInfo

2019-11-07

• v1.1.19: Update & bugfix

2019-10-30

• v1.1.18: Update & bugfix

2019-10-23

• v1.1.17: Update & bugfix

2019-10-17

• v1.1.16: Update & bugfix

2019-10-09

• v1.1.15: Fix react margin collapsing

2019-10-02

• v1.1.14

---

This awesome jQuery plugin is developed by surveyjs. For more Advanced Usages, please check the demo page or visit the official website.