Survey问卷调查/反馈评分表单插件

演示  website 下载

Survey是一个强大、可定制、跨平台的调查/反馈/问卷调查/统计JavaScript库。

特点：

• 支持问题的类型：输入、单选、复选框、下拉列表、矩阵、评分、图像选取器、注释、自定义函数等。

• 在问题之间共享数据

• 打印到PDF

• 分析调查结果

• 支持条件逻辑

• 标记和文本处理

• 多种语言

• 表单验证

• 8个内置主题

基本用法（jQuery）：

1在页面上包括jQuery库和SurveyJS库的文件。

<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.JSON定义问题。

var json = {
    "completedHtml": "<h3>感谢您的反馈</h3> <h5>您有什么好的建议好想法对应我们的产品！</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": "分享给你你朋友或同事给我们的产品打分？0到10分*",
                    "isRequired": true,
                    "rateMin": 0,
                    "rateMax": 10,
                    "minRateDescription": "(不太喜欢)",
                    "maxRateDescription": "(非常喜欢)"
                }, {
                    "type": "checkbox",
                    "name": "promoter_features",
                    "visibleIf": "{nps_score} >= 9",
                    "title": "你最看重什么？",
                    "isRequired": true,
                    "validators": [
                        {
                            "type": "answercount",
                            "text": "Please select two features maximum.",
                            "maxCount": 2
                        }
                    ],
                    "hasOther": true,
                    "choices": [
                        "性能", "稳定性", "用户体验", "功能齐全"
                    ],
                    "otherText": "其他理由:",
                    "colCount": 2
                }, {
                    "type": "comment",
                    "name": "passive_experience",
                    "visibleIf": "{nps_score} > 6  and {nps_score} < 9",
                    "title": "你打分的主要原因是什么？"
                }, {
                    "type": "comment",
                    "name": "disappointed_experience",
                    "visibleIf": "{nps_score} notempty",
                    "title": "失望的原因"
                }
            ]
        }
    ],
    "showQuestionNumbers": "off"
};

3. 创建一个容器

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

4. 从提供的JSON生成surver表单。

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

5. 如何将结果发送到服务器示例。

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

6. 可设置的主题风格:

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

会员登陆后即可下载资源文件。更多好用网站特效插件，请关注帝国模板之家。