Best Survey JavaScript Library

Dmitry Kurmanov February 13, 2023

ADN
best-survey-javascript-library

Live Preview Download

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

SurveyJS 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
  • Available in multiple languages
  • Form validation compatible with Angular, ReactJS, VueJS, KnockoutJS, jQuery, etc.,
  • Built-in responsive themes
  • Supports 3rd plugins: select2, jQuery UI date picker, Nouislider, and much more

SurveyJS Implementation using jQuery

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

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

var json = {
    "completedHtml": "
Thank you for your feedback.
 
Your thoughts and ideas will help us to create a great product!
",
    "completedHtmlOnCondition": [
        {
            "expression": "{nps_score} > 8",
            "html": "
Thank you for your feedback.
 
We glad that you love our product. Your ideas and suggestions will help us to make our product even better!
"
        }, {
            "expression": "{nps_score} < 7",
            "html": "
Thank you for your feedback.
 
 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.
\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"
};

Create a container to place the survey

Generate a surver form from the JSON you provide

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

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
}

Set the theme you'd like to use

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");

 

Next: Smart WordPress Theme Options

Supported Devices

Chrome, IE9+, Firefox, Opera, Safari, MS Edge

ADN

Tags

survey js react, javascript survey library, jquery quiz plugins, survey angular components, typescript feedback library, devstoc freebies, vue packages, javascript form builder libraries, knockoutjs packages, survey, quiz, surveyjs, questionnaire plugins, quiz packages

also view other related posts,