Press "Enter" to skip to content

Create Awesome Product Feedback Survey | SurveyJS Library

Survey JS is a powerful, customizable, multi-platform JavaScript library for Survey / Feedback / Survey / Quiz designed for jQuery, Angular, React, VueJS, knockout, etc.

survey form using javascript, javascript survey library, surveyjs examples, react survey tool, surveyjs mode, jquery survey, simple jquery dynamic quiz plugin

Main options:

  • Supported query sorts: enter, radio, checkbox, dropdown, matrix, score, picture picker, remark, customized operate, and so on.
  • Share knowledge between questions.
  • Print to PDF.
  • Analyze survey outcomes.
  • Supports the situation logically.
  • Markdown and Text Processing.
  • Multiple languages.
  • Form validation.
  • Supports third plugins: select2, jQuery UI date picker, Nouislider, and far more.

Angular User Reviews And Feedbacks Collector Library | ngx-feedback

How to make use of it:

1. Include the jQuery library and the SurveyJS library’s record data¬†on the web 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 utilizing JSON. You can construct your personal JSON utilizing the on-line survey editor.

var json = {
    "completedHtml": "<h3>Thank you to your suggestions.</h3> <h5>Your ideas and concepts will assist us to create an ideal 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 first purpose to your rating?"
                }, {
                    "type": "comment",
                    "name": "disappointed_experience",
                    "visibleIf": "{nps_score} notempty",
                    "title": "What do you miss and what was disappointing in your expertise with us?"
                }
            ]
        }
    ],
    "showQuestionNumbers": "off"
};

3. Create a container to put the survey.

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

4. Generate a server kind from the JSON you present.

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

5. The instance JS that exhibits finds out how to ship the outcomes to your server.

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

6. The instance JS that exhibits finds out how to ship the outcomes to your server.

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

7. Set the theme you need to make use of. 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");

Survey Feedback Quiz System, JavaScript Surveys and Forms Library, survey-library Plugin/Github

SurveyJS Library


See Demo And Download

Official Website(surveyjs): Click Here

This superior jQuery/javascript plugin is developed by surveyjs. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.