JavaScript Survey and Form Library

Overview

SurveyJS is a JavaScript Survey and Form Library.

SurveyJS is a modern way to add surveys and forms to your website. It has versions for Angular, jQuery, knockout, react and vue.

Build Status Software License Tested with TestCafe Issues Closed issues

Documentation

SurveyJS Library Documentation

Live Examples

SurveyJS Library Live Examples

Survey Creator / Form Builder

Create your Survey or Form now

Survey Creator sources are here

Export Survey to PDF

Export to PDF overview

Export to PDF sources are here

More info about SurveyJS

SurveyJS is the most feature-rich Survey / Form Library available at the current moment. It can be easily customized and extended to suit your needs.

alt tag

Main Features

A lot of question types with a lot of built-in functionalities.

Multiple Pages Support

You may create a very complex forms with a lot of pages, like this one.

Dynamically change survey logic and questions content

Localization and Multiple language support

Appearance and custom Rendering

Frequently used functionalities

To find out more about the library

You can use our quickstart repos:

Getting started

Install the library using npm.

Angular version:

npm install survey-angular

jQuery version:

npm install survey-jquery

Knockout version:

npm install survey-knockout

React version:

npm install survey-react

Vue version:

npm install survey-vue

Or use unpkg CDN:

You find all versions/builds in the surveyjs/build repo.

Or dowload a version as zip file from Releases

If you want to import it in another script:

import * as Survey from "survey-jquery";

Building survey.js from sources

To build library yourself:

  1. Clone the repo from GitHub

    git clone https://github.com/surveyjs/survey-library.git
    cd survey-library
    
  2. Acquire build dependencies. Make sure you have Node.js installed on your workstation. You need a version of Node.js greater than 6.0.0 and npm greater than 2.7.0. This is only needed to build surveyjs from sources.

    npm install -g karma-cli
    npm install
    
  3. Build the library

    npm run build_prod
    

    After that you should have the libraries (angular, jquery, knockout, react and vue) at 'packages' directory.

  4. Run samples

    npm start
    

    This command will run local http server at the http://localhost:7777 You can open http://localhost:7777/examples/knockout to view KnockoutJS samples, http://localhost:7777/examples/react to view ReactJS samples and so on

  5. Run unit tests

    karma start
    

    This command will run unit tests using Karma

WordPress integration

SurveyJS WordPress plugin

License

MIT license

Comments
  • Is it possible to add dynamic matrix column wise

    Is it possible to add dynamic matrix column wise

    Are you requesting a feature, reporting a bug or ask a question?

    Question/Feature

    What is the current behavior?

    Able to add dynamic matrix row wise. is there a possibility to add them column wise?

    What is the expected behavior?

    Add the dynamic matrix questions column wise

    How would you reproduce the current behavior (if this is a bug)?

    Provide the test code and the tested page URL (if applicable)

    Tested page URL:

    Test code

    your_code_here
    
    

    Specify your

    • browser: google chrome
    • browser version:
    • surveyjs platform (angular or react or jquery or knockout or vue): angular 5
    • surveyjs version: 1.0.22
    enhancement question 
    opened by ashygk 56
  • Custom widgets in matrixdynamic

    Custom widgets in matrixdynamic

    Hello, my intention is to embed select2tagbox in matrixdynamic. Is there any generic way to do so?

    Using JQuery I'm trying to override the 'cellType' property of matrixdropdownbase class

    JsonObject.metaData.addClass("matrixdropdownbase", [ ..... { name: "cellType", default: "dropdown", choices: ["dropdown", "checkbox", "radiogroup", "text", "comment"] } ..... ],

    with select2tagbox property (as mentioned in the select2tagbox example) but I'm not sure if it'll work.

    Is this feasible ?

    enhancement 
    opened by brydko 52
  • Request: More Customization

    Request: More Customization

    Are you requesting a feature, reporting a bug or ask a question?

    • Requesting a feature, allowing customization of the survey template itself, being able to add custom classes to question elements, etc.

    What is the expected behavior?

    • Being able to customize the template, or in this specific case, being able to tie another existing button to be used as the 'next/complete' button.

    How would you reproduce the current behavior (if this is a bug)?

    N/A

    question 
    opened by Braunson 33
  • React-Native support & using surveyjs without front end libraries.

    React-Native support & using surveyjs without front end libraries.

    Are there plans to support React Native? I have a need for mobile surveys; however, surveyjs service seems to have a dependency on the front end.

    Is there a way to request the survey json via https without the frontend library?

    enhancement 
    opened by safaiyeh 29
  • Support multiple entities form / questionnaire

    Support multiple entities form / questionnaire

    Are you requesting a feature, reporting a bug or ask a question?

    feature / question

    What is the current behavior?

    We would like to support multiple entities questionnaire forms.

    In our situation, it's a medical form that the questionnaire form should display for each of the entities.

    we discussing if the solution should be UI based only or be part of surveryjs solution API

    for example, if there was an API that we can ask the same question for 1..N entities and upon survey submission, we will get the data for each entity.

    also - it could be much more complex because each entity can get a different survey path as each entity answer can result in a different UI based on visibleIf condition.

    Any idea/comment will be more than helpful.

    best

    question 
    opened by IDIBuild 27
  • React is not defined

    React is not defined

    I have a fresh "create-react-app" install (https://github.com/facebookincubator/create-react-app).

    • I ran npm install survey-react --save (everything is alright, something new in node modules!)
    • Then I added import 'survey-react/dist/survey.react.min' right after import React, { Component } from 'react'; in App.js
    • Run the server with npm start

    Running it says:

    survey.react.min.js:10 Uncaught ReferenceError: React is not defined

    Is there any way to work around this problem? (feel free to close this issue if it's not relative to your lib!)

    bug 
    opened by rap2hpoutre 27
  • Unable to process binding

    Unable to process binding "template: function (){return { name:'survey-content',afterRender:koEventAfterRender} }"

    With the latest version, i got :

    Uncaught ReferenceError: Unable to process binding "template: function (){return { name:'survey-content',afterRender:koEventAfterRender} }"
    Message: Unable to process binding "if: function (){return koState() =="running" }"
    Message: Unable to process binding "template: function (){return { name:'survey-page',data:koCurrentPage,afterRender:koAfterRenderPage} }"
    Message: Unable to process binding "text: function (){return koNo() + processedTitle }"
    Message: koNo is not defined
        at text (eval at parseBindingsString (knockout-min.js:61), <anonymous>:3:129)
        at update (knockout-min.js:91)
        at function.a.j.q (knockout-min.js:66)
        at l (knockout-min.js:44)
        at Object.a.w.a.j (knockout-min.js:47)
        at knockout-min.js:66
        at Object.o (knockout-min.js:10)
        at g (knockout-min.js:65)
        at h (knockout-min.js:63)
        at k (knockout-min.js:63)
    
    question 
    opened by nelero 26
  • Surveyjs-vue not working with last vue cli

    Surveyjs-vue not working with last vue cli

    Are you requesting a feature, reporting a bug or asking a question?

    Bug

    What is the current behavior?

    universalModuleDefinition?2436:1 Uncaught TypeError: Cannot read property 'Vue' of undefined

    How would you reproduce the current behavior (if this is a bug)?

    Just simply use the surveyjs_vue_quickstart to use surveyjs

    Specify your

    • browser: chrome
    • browser version: lastest
    • surveyjs platform (angular or react or jquery or knockout or vue): vue cli v3.0.0-rc.3
    • surveyjs version: 1.0.30
    bug help wanted 
    opened by xibman 25
  • Feature Request for Error Validation onBlur

    Feature Request for Error Validation onBlur

    Are you requesting a feature, reporting a bug or asking a question?

    Feature request.

    What is the current behavior?

    checkErrorsMode has three options - onNextPage, onValueChanged and onComplete.

    What is the expected behavior?

    One of the most common options to validate is onBlur. onValueChaged works quite fine for most cases but triggers validation prematurely occasionally. E.g upon partial entry in a Date field.

    It would be nice to have one more option to trigger validation when the user focuses away after an input (onBlur event). Alternately, limit trigger to occur after the user enters a minimum number of characters.

    How would you reproduce the current behavior (if this is a bug)?

    Feature request.

    Provide the test code and the tested page URL (if applicable)

    Not applicable

    Tested page URL:

    Test code

    your_code_here
    
    

    Specify your

    • browser: Chrome
    • browser version:Version 81.0.4044.122 (Official Build) (64-bit)
    • surveyjs platform (angular or react or jquery or knockout or vue): react
    • surveyjs version: latest
    question 
    opened by shekharkc 22
  • Reset current choosed value when pressing

    Reset current choosed value when pressing "back" button

    Are you requesting a feature, reporting a bug or asking a question?

    question

    What is the current behavior?

    selecting: question1 - any value question2 - any value question3 - any value

    after going back to question1 and going forward: question2 - value selected question3 - value selected

    What is the expected behavior?

    selecting: question1 - any value question2 - any value question3 - any value

    after going back to question1 and going forward: question2 - value should be empty, user need to select again, because it will change visibility of further questions question3 - value should be empty, user need to select again, because it will change visibility of further questions

    How would you reproduce the current behavior (if this is a bug)?

    When scrolling and selecting in: question1 -> question2 -> question3....... , then going back to question1, selecting value and then after going to question2 or any other further - the value of question2 is already selected and not cleared. In this way, it shows questions that shouldn't be visible because there are visibleif statements.

    Provide the test code and the tested page URL (if applicable)

    I will provide my survey URL only for admin.

    Specify your

    • browser: Chrome
    • browser version: up to date
    • surveyjs platform (angular or react or jquery or knockout or vue): Jquery
    • surveyjs version: 1.0.71
    question 
    opened by tadas117 22
  • Survey Editor 1.0.58 does not render Select2 and Tagbox custom widgets

    Survey Editor 1.0.58 does not render Select2 and Tagbox custom widgets

    Are you requesting a feature, reporting a bug or asking a question?

    Reporting a bug

    What is the current behavior?

    Survey Js Editor does not render Select2 or Tagbox widgets:

    When I enter the JSON from the tagbox example into the Survey JS editor (v1.0.58),

    {
      "pages": [
        {
         "name": "page1",
          "elements": [
            {
              "type": "dropdown",
              "renderAs": "select2",
              "choicesByUrl": {
                "url": "https://restcountries.eu/rest/v2/all"
              },
              "name": "countries",
              "title": "Please select the country you have arrived from:"
            }
          ]
        }
      ]
    }
    
    

    I receive the error:

    Error: The property 'renderAs' in class 'dropdown' is unknown. The list of available properties are: name, visible, useDisplayValuesInTitle, visibleIf, width, startWithNewLine, indent, page, title, description, commentText, valueName, enableIf, defaultValue, correctAnswer, isRequired, requiredErrorText, readOnly, validators, titleLocation, hasComment, hasOther, choices, choicesOrder, choicesByUrl, hideIfChoicesEmpty, choicesVisibleIf, choicesEnableIf, otherText, otherErrorText, storeOthersAsComment, optionsCaption.
    

    What is the expected behavior?

    It should render the Select2 and Tagbox widgets.

    How would you reproduce the current behavior (if this is a bug)?

    Open the SurveyJS editor and enter the JSON

    Provide the test code and the tested page URL (if applicable)

    Hard to do unfortunately.

    Specify your

    • browser: Chrome
    • browser version: Version 70.0.3538.110
    • surveyjs platform (angular or react or jquery or knockout or vue): Vue
    • surveyjs version: 1.0.58
    bug can't reproduce 
    opened by willgdjones 22
  • Modern theme modify globall scroll of the outer site

    Modern theme modify globall scroll of the outer site

    1. Go to the https://surveyjstest.azurewebsites.net/form-library/examples/nps-question/reactjs
    2. Choose Modern Theme
    3. see midified scroll: image

    Because of unscoped styles: https://github.com/surveyjs/survey-library/blob/0d76d85462c4ff15c7972fbc35f14c330c903281/src/modern/blocks/sv-scroll.scss#L11

    bug fixed 
    opened by dmitrykurmanov 0
  • Panel Dynamic in Read Only Mode - Display a relevant No Entries text

    Panel Dynamic in Read Only Mode - Display a relevant No Entries text

    In read-only mode, a Panel Dynamic question shows the default message: There are no entries yet. Click the button below to add a new entry. However, this message is irrelevant in read-only mode, because it is impossible to add any entries.

    Suggestion: modify the text for read-only mode. For example: There are no entries.

    Original Issue: T11633 - Dynamic panel: Empty panel label in readonly mode

    enhancement 
    opened by JaneSjs 0
  • Display Current/Maximum Allowed Characters when a maximum length is defined for input fields

    Display Current/Maximum Allowed Characters when a maximum length is defined for input fields

    Usage scenario: Text input fields (e.g., Text, Comment questions) define the maxLength property:

    { 
       "elements": [
        {
         "type": "text",
         "name": "question1",
         "maxLength": 5
        }
       ] 
    }
    

    Display the Current/Max allowed characters for input fields. image

    enhancement 
    opened by JaneSjs 1
  • hasErrors() functions unaware of errors added manually by question.addError()

    hasErrors() functions unaware of errors added manually by question.addError()

    Are you requesting a feature, reporting a bug or asking a question?

    This is a bug report.

    What is the current behavior?

    Calling question.hasErrors() after adding one or more errors by calling question.addErrors() results in the custom errors being lost.

    All variants of hasErrors() are only aware of the SurveyJS errors produced by validators.

    What is the expected behavior?

    My expectation is that calling question.hasErrors(), survey.hasPageErrors(), survey.hasCurrentPageErrors(), or survey.hasErrors() should preserve custom errors manually added to a question by calling addError().

    How would you reproduce the current behavior (if this is a bug)?

    Obtain the instance of a SurveyJS question and call addError() before calling any of the hasErrors() methods available.

    Provide the test code and the tested page URL (if applicable)

    Tested page URL: https://codesandbox.io/s/frosty-grass-cipyl9?file=/src/App.vue

    Test code

    const page = this.survey.activePage;
    const question = this.survey.getQuestionByName("LastName");
    question.addError("This is an error.");
    
    console.log(`question has error sync result`, question.hasErrors());
    console.log(`question has error async handle`, question.hasErrors((hasErrors) => {
      console.log(`question has error async result`, hasErrors);
    }));
    
    console.log(`page error sync result`, this.survey.hasPageErrors(page));
    
    question.addError("This is another error.");
    console.log(`survey has error sync result`, this.survey.hasErrors());
    console.log(`survey has error async handle`, this.survey.hasErrors((hasErrors) => {
      console.log(`survey has error async result`, hasErrors);
    }));
    

    Specify your

    • browser: Firefox, this is not a browser issue.
    • browser version: 109.0b6
    • surveyjs platform (angular or react or jquery or knockout or vue): vue
    • surveyjs version: 1.9
    opened by metaturso 0
Releases(v1.9.66)
Building dynamic form in Angular with Fluent API

ngx-fluent-form Building dynamic form in Angular with Fluent API. Features Support using Fluent API and JSON. Type-safe form configuration.

HyperLifelll9 22 Dec 23, 2022
Extensive math expression evaluator library for JavaScript and Node.js

?? Homepage Fcaljs is an extensive math expression evaluator library for JavaScript and Node.js. Using fcal, you can perform basic arithmetic, percent

Santhosh Kumar 93 Dec 19, 2022
This library was designed to be used in SPA framework wrappers for the FingerprintJS Pro Javascript Agent

Framework-agnostic SPA service wrapper. Use it to build a FingerprintJS Pro wrapper for your favorite framework.

FingerprintJS 12 Sep 3, 2022
ChelseaJS - a Javascript library for creative, generative Coding

ChelseaJS is a Javascript library for creative, generative Coding. It's simple and intuitive syntax makes it easy for everyone (including non-coders)

Prakrisht Dahiya 26 Oct 6, 2022
Estrela - a JavaScript library for building reactive web components inspired by lit

Estrela ⭐ Full Reactive Web Components Estrela is a JavaScript library for building reactive web components inspired by lit. Just like Lit, Estrela is

null 50 Oct 31, 2022
The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML.

List.js Perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on

Jonny Strömberg 10.9k Jan 1, 2023
Drag and drop library for two-dimensional, resizable and responsive lists

GridList Drag and drop library for a two-dimensional resizable and responsive list of items Demo: http://hootsuite.github.io/grid/ The GridList librar

Hootsuite 3.6k Dec 14, 2022
A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more

MixItUp 3 MixItUp is a high-performance, dependency-free library for animated DOM manipulation, giving you the power to filter, sort, add and remove D

Patrick Kunka 4.5k Dec 24, 2022
Browser fingerprinting library with the highest accuracy and stability.

FingerprintJS is a browser fingerprinting library that queries browser attributes and computes a hashed visitor identifier from them. Unlike cookies a

FingerprintJS 18.1k Dec 31, 2022
autoNumeric is a standalone library that provides live as-you-type formatting for international numbers and currencies.

What is autoNumeric? autoNumeric is a standalone Javascript library that provides live as-you-type formatting for international numbers and currencies

AutoNumeric 1.7k Dec 16, 2022
A platform detection library.

Platform.js v1.3.6 A platform detection library that works on nearly all JavaScript platforms. Disclaimer Platform.js is for informational purposes on

BestieJS Modules 3.1k Dec 31, 2022
A benchmarking library. As used on jsPerf.com.

Benchmark.js v2.1.4 A robust benchmarking library that supports high-resolution timers & returns statistically significant results. As seen on jsPerf.

BestieJS Modules 5.3k Dec 28, 2022
A wrapper library for Jitsi Meet that adds audio spatialization, to be able to create virtual meeting rooms.

A wrapper library for Jitsi Meet that adds audio spatialization, to be able to create virtual meeting rooms.

Sean T. McBeth 1.1k Dec 27, 2022
Solid.js library adding signaling to built-in non-primitives

This package provides signaled versions of Javascript's built-in objects. Thanks to it, all theirs properties will be automatically tracked while using standard API.

Maciej Kwaśniak 40 Dec 29, 2022
📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

JavaScript Algorithms and Data Structures This repository contains JavaScript based examples of many popular algorithms and data structures. Each algo

Oleksii Trekhleb 158k Dec 31, 2022
An easy to use, yet advanced and fully customizable javascript/jQuery paginator plugin

anyPaginator An easy to use, yet advanced and fully customizable Javascript/jQuery paginator plugin. anyPaginator is a spinoff of the anyList project

Arne Morken 2 Feb 17, 2022
An arbitrary size Bit-Vector implementation in JavaScript

BitSet.js BitSet.js is an infinite Bit-Array (aka bit vector, bit string, bit set) implementation in JavaScript. That means that if you invert a bit v

Robert Eisele 207 Dec 9, 2022
SPOILER ALERT! A happy little bit of javascript to hide spoilers on your site.

SPOILER ALERT! Don't spoil it! Hide copy and images with a bit of SVG blur. Taste on mouseover. Eat on click. Do you publish spoilers? Do you wish you

Joshua Hull 473 Sep 27, 2022
⚡️ A resource to help figure out what JavaScript array method would be best to use at any given time

JavaScript Array Explorer When I was first learning array methods, I spent a lot of time digging through the docs to find the appropriate one, and I h

Sarah Drasner 2.6k Jan 2, 2023