帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

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

帝国模板之家 2020-11-07 网页特效 评论

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

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

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言