surveyjs / survey-creator

Scalable open-source survey software to generate dynamic JSON-driven forms within your JavaScript application. The form builder features a drag-and-drop UI, CSS Theme Editor, and GUI for conditional logic and form branching.

SurveyJS Form Library

SurveyJS Form Library is a free to use MIT-licensed client-side component that allows you to render dynamic JSON-based forms in any JavaScript application, collect responses, and send all form submission data to a database of your choice. You can use it for multi-page forms of any length and complexity, pop-up surveys, quizzes, scored surveys, calculator forms, and more. SurveyJS Form Library has native support for React, Angular, Vue, and Knockout; jQuery is supported via a wrapper over the Knockout version. The library interacts with the server using JSON objects—for both form metadata, also known as form JSON schemas, and results. The SurveyJS product family also includes a robust form builder library that automatically generates form configuration files in JSON format. The form builder features a drag-and-drop UI, CSS Theme Editor, and GUI for conditional logic and form branching.

Documentation · Roadmap · View Demos · Generate JSON form · Report Bug · Twitter

form-library.mp4

Features

• It's suitable for multi-page forms, quizzes, scored surveys, calculator forms, and survey pop-ups
• Integration with React, Angular, Vue, jQuery, and Knockout
• Compatible with any server & database
• Integration examples for PHP, ASP.NET Core, and NodeJS
• All data is stored on your own servers; therefore, there are no limits on the number of forms, submissions, and file uploads
• 20+ accessible input types, panels for question grouping, dynamic questions with a duplicate group option
• Input validation, partial submits & auto-save, lazy loading, load choices from web services
• Custom input fields
• Carry forward responses, text piping, autocomplete
• Integration with 3rd-party libraries and payment systems
• Support for webhooks
• Expression language (Built-in & Custom Functions), data aggregation within a form
• TypeScript support
• Auto-localization and multi-locale surveys, support for RTL languages
• Weekly updates
• 120+ starter demos & tutorials
• Community-supported UI localization to 50+ languages
• Built-in themes and CSS customization
• e-Signature field
• Image capture
• All popular types of form navigation

Get Started

• Angular
• React
• Vue
• jQuery
• Knockout

Resources

• Website
• Documentation
• Starter Demos
• What's New

SurveyJS Product Family

• Form Library - A free and open-source MIT-licensed JavaScript library that renders dynamic JSON-based forms in your web application, and collects responses.
• Survey Creator - A self-hosted drag-and-drop form builder that automatically generates JSON definition (schemas) of your forms in real time. Try out a free full-featured demo to evaluate its capabilities.
• Dashboard - Simplifies survey data visualization and analysis with interactive and customizable charts and tables.
• PDF Generator - An open-source JavaScript library that renders SurveyJS surveys and forms as PDF files in a browser. With PDF Generator you can save an unlimited number of custom-built forms to PDF (both editable and read-only).

Build the SurveyJS Form Library from Sources

The instructions below apply to SurveyJS Form Library for React, Knockout, jQuery, and Vue 2. If you are looking for instructions on how to build the library for Angular or Vue 3, refer to README files within the survey-angular-ui or survey-vue3-ui packages.

1. Clone the repo

   git clone https://github.com/surveyjs/survey-library.git
   cd survey-library

2. Install dependencies
   Make sure that you have Node.js v14 or later and a compatible npm version installed.

   npm install -g karma-cli
   npm install

3. Build the platform-independent part and plugins

   npm run build_core
   npm run build-plugins
   

4. Build the library

   npm run build
   

   You can find the built scripts and style sheets in folders under the build directory.

5. Run test examples

   npm run serve
   

   This command runs a local HTTP server at http://localhost:7777/.

6. Run unit tests

   npm run test
   

   The unit tests use Karma.

Licensing

SurveyJS Form Library is distributed under the MIT license.

survey-creator's Issues

Need help making the "name" field readonly and instead adding a unique ID to the "name" field.

Hey guys - really like Survey.js. However: I'm having a problem. What I need to do is:

a.) Make the "name" text field in the form "readonly" so our users can't edit that field and...
b.) Set that name field to a custom, unique ID so I can match that up with the json generated when a user answers a questions. Thanks!

Save button is disabled if changed were made in json/text editor

There is no way to save the survey if changes are made in json editor.

Question title is not updated in the editor on changing survey.requreText property

knockout doesn't recalculate it's property on applyBinding or clearNode for the root element.
We need to tell knockout to update calculated values manually.

Add fast entry mode for itemvalue property editor.

Add the fast entry mode for properties: choices, columns, rates and others.
One line is one item. Separate value from text by '|' char.
For example: "1|Item 1".

Create a question editor

Create a dialog to edit the most frequent used question properties in one place and in a more convenient way.

Add export results to json format.

Make sure to make it available via API.

Question: Regarding platform support

Your homepage lists for the editor:

Currently only knockout version is ready.
Versions for other platforms (react, Angular, jQuery) are coming.

Any idea of a timeline when any other (any of those listed above) are expected to be released?

Make ace editor an optional feature

At the current moment, survey editor requires ace editor to run. In some cases you may not to want to show an editor at all, so ace editor should be an optional feature.
Use textarea if ace editor is not included into the project.

Matrix (dynamic rows) & Matrix (multiple choice) not working

@andrewtelnov if i try to add these type of question, i get following error and question doesn't come up unless another type of question is created.

knockout.js:72 Uncaught ReferenceError: Unable to process binding "template: function (){return { name:'propertyeditor-itemvalues',data:choicesEditor} }"
Message: Unable to process binding "template: function (){return { name:'propertyeditor-modal',data:$data} }"
Message: Unable to process binding "text: function (){return koText }"
Message: koText is not defined

Add ability to save/load custom questions on the Toolbox

1. editor.customToolboxQuestionsText: string { get;set;} property. Use it save/load the custom toolbox questions.
2. editor.addCustomToolboxQuestion(question: Survey.QuestionBase); function. Use it to add a new customToolboxQuestion.
3. editor.customToolboxQuestionMaxCount: number (default 3) - maximum number count of the customToolboxQuestions. Used it to increase/decrease the number of toolbox item.

Support adaptive layout

On small screen size hide the toolbox question text, show only icons
On extra small screen size hide the property grid.

Create API to make properties read-only

At the current moment there is no way to disable property editing in the property and question editors.

Manual choises rrder

A nice feature would be to be able to choose the order of "choices".
Now I can set it with choicesOrder, but just "ASC, DESC, RANDOM"

What do you think about it?
thanks

DnD only working on Chrome

The visual editor has a nice DnD for ordering questions.
This works on Chrome, but Firefox is not working
Tested on Developer edition 45 and normal FF 45
MS Edge is also working.

Add new question type

@andrewtelnov Add few more question type? for instance The company name, logo and introductory text for the Survey.

Add custom properties to Matrix Rows.

It would be nice to have the ability to add custom properties to Matrix rows.

It would open up the way to proper answer categorization =)

best,
Joe

Add additional elements on the Editor toolbox.

Create an API for commands.

Survey editor build process fails

When running a gulp makedist, errors appear on namespaces.

$ gulp makedist
[08:39:57] Warning: gulp version mismatch:
[08:39:57] Global gulp is 3.9.1
[08:39:57] Local gulp is 3.9.0
[08:39:59] Using gulpfile C:\www\git\survey.js.editor\gulpfile.js
[08:39:59] Starting 'makedist'...
[08:39:59] Starting 'templates'...
[08:39:59] Finished 'templates' after 13 ms
[08:39:59] Starting 'typescript:sources'...
[08:39:59] Starting 'typescript:tests'...
[08:39:59] Starting 'test:copy-index-html'...
[08:39:59] Finished 'test:copy-index-html' after 451 μs
[08:39:59] Starting 'sass'...
[08:39:59] Finished 'sass' after 2.55 ms
C:/www/git/survey.js.editor/src/dragdrophelper.ts(7,34): error TS2503: Cannot find namespace 'Survey'.
C:/www/git/survey.js.editor/src/dragdrophelper.ts(9,30): error TS2503: Cannot find namespace 'Survey'.
C:/www/git/survey.js.editor/src/dragdrophelper.ts(9,54): error TS2503: Cannot find namespace 'Survey'.
C:/www/git/survey.js.editor/src/dragdrophelper.ts(24,59): error TS2503: Cannot find namespace 'Survey'.
C:/www/git/survey.js.editor/src/dragdrophelper.ts(30,51): error TS2503: Cannot find namespace 'Survey'.
C:/www/git/survey.js.editor/src/dragdrophelper.ts(43,34): error TS2304: Cannot find name 'Survey'.
C:/www/git/survey.js.editor/src/dragdrophelper.ts(44,21): error TS2304: Cannot find name 'Survey'.
C:/www/git/survey.js.editor/src/dragdrophelper.ts(48,35): error TS2503: Cannot find namespace 'Survey'.
C:/www/git/survey.js.editor/src/dragdrophelper.ts(51,34): error TS2304: Cannot find name 'Survey'.
C:/www/git/survey.js.editor/src/dragdrophelper.ts(56,62): error TS2503: Cannot find namespace 'Survey'.
C:/www/git/survey.js.editor/src/dragdrophelper.ts(69,57): error TS2503: Cannot find namespace 'Survey'.
C:/www/git/survey.js.editor/src/dragdrophelper.ts(82,48): error TS2503: Cannot find namespace 'Survey'.

React support (builder)

Do we have something for attaching the builder in a React project?

Custom Properties should also appear in the Settings Modal

currently, custom properties only show up in the "Property window" to the right, but not yet in the settings modal.

I first expected them to be there too, but later found them by accident ;)

can be seen here: http://editor.surveyjs.io/examples/addproperties.html
"tag" is only in the property window but not in the question edit modal popup

best,
Joe

Changes not being saved

Randomly when changing the name/title of a question then clicking on to something else the updates aren't saved. Doing an Undo and Redo sometimes seems to bring the changes back. Also, when dealing with multiple pages sometimes the questions and/or complete pages will disappear when making updates. This is very random and following the same process may not result in the same issue each time.

How to lift the project in heroku

Hi Andrew,

Please im trying to lift the project in heroku with angular/typescript add on, but it does not work. Please tell me what i need to lift the service.

Best regards ,

Francisco.

Add ability to create/modify property editors on the fly (plug-in)

Properties Editors code should be refactored. At the current moment it is hard coded. It is hard to customize and add new features.
There should be an ability to add a new property editor for a property type or override the existing one.

Uncaught TypeError: k.SurveyTemplateText is not a constructor

@andrewtelnov
I'm getting this error simply by including the survey and survey editor code in my page.

Anyone else experiencing this?

startWithNewLine doesn't work in question Editor

question Editor assign the wrong value to startWithNewLine property.

visibility flag editor helper text not showing

Hi Andrewtelnov,
I was tried with surveyjs editor, it is really amazing. While I am integrated in my local machine visibility editor helper text not showing could you help me ? I just followed your example code. any special configuration I need to do ?

Explanation needed: how to work with localization

Hi Andrew,

The latest build is fine now. But it's unclear how you want to approach the localization.
I see a new attribute locale on survey level. But what does it do?
I expected a folder with a list of items for translation. Like
"Please drop a question here."
"Pagex"
"Questionx"
Or even the attributes:
"visible", "readonly", etc.
The latter is less important. The first is making the editor user friendly.

Add options to show/hide tabs: JSON Editor, Test Survey, Embeded Survey

Additionally make Embeded Survey turned off by default.

Can't get surveyJSON on page initialization

Hey,

I'm looking at this page: http://editor.surveyjs.io/examples/setsurvey.html#code

...and I can't get the editor.text from your instructions.

First, document.getElementById('surveyJSON') isn't in the DOM.

Second, it looks like the JSON isn't actually in the .svd_json_editor_area textarea. It seems like it's added magically through Knockout somehow.

How can I access the initial and updated JSON from this '.svd_json_editor_area' textarea?

Or, put another way, what is the easiest way to get the value of the .svd_json_editor_area textarea on page load as well as after it has been updated? I'm trying to copy the value of that JSON generated by the editor so it can be submitted in a form wrapped around the editor.

Thanks,
Chris

Feature request: disable question types

It would be nice if we can disable certain question types.
Some questions are confusing to an end user, like the HTML question.
We would like these disabled. Possible to make a setting for this?

Survey Text maybe incorrect in Embedded and Test Survey tabs

On changing tabs, the survey text/survey json may incorrectly be shown in Embedded and Test Survey tabs.

Npm package surveyjs-editor package.json file contains a wrong main path

It should be ./dist/surveyeditor.min.js instead of ./js/surveyeditor.min.js

The folder has only dist when loaded from npm.

Separate model, platform independent code, from knockout.

Refactor code, to allow implement the react version of editor.

Add reset button to property editors

Add an option to show/hide "Options" menu.

Commonly, there is no need in the "options" menu. There is should be an option that allow to show it off/on. The button menu should be hidden by default.

editor.text = null; makes the editor unstable

editor.text = null; or editor.text = ""; should clear the survey and create a new empty page.

Support custom widgets in Editor

Style of trigger modal

Using bootstrap v3.3.7 the layout of the modal when pressing on the "trigger" button is really messed up.

• The dropdown is visible from start and is not toggled when pressing on the add button
• The add button and the remove buttons are not correctly aligned to the dropdown field
• The add button for adding a page or question (visible trigger) is invisible

Create an example of adding/removing a property for a question

Add ability to reorder items in the array property editors

Add onQuestionCreating event

This event should be called before a new question is added into the survey.
It will allow to change question properties, like name, tittle and so on.

Make the question toolbox more flexible

In v0.11.1 and lower there was an ability to limit the question types in the toolbox and change the possible number of copied questions.
There is a need to be able to add/remove/replace any toolbox item, be able to change the pre-setup properties for a standard question types.
Save/load all toolbox items and only copied questions.

Can we inline edit for question and options?

@andrewtelnov I loved your feature and using your library in one of my project, it would be great if you can provide inline edit to your upcoming feature along with jQuery only version, right now it has dependency on Knockout or React framework.

Build file gives TypeError

When processing the build for the editor, running the editor gives an error:

`TypeError: $root.getLocString is not a function

...{with($data||{}){return{'css':function(){return {active:koIsShowDesigner()} }}}

`

Running the editor via the download file is ok. So technically the latest version seems to work fine, but the build is not getting at the same result.
Did we miss a step, i.e. adding a localization file?
I see this in the surveyjs project, but not in the editor.

Unable to set the same value for "Value" and "Text" in Choices Property

If i want to set the same value for "Value" and "Text" in Choices property for a question, the text vanished when I leave the question. Is there any possibility to fix this?

Help request on setting the visual editor in a modal box

A common scenario (issue) in bootstrap is the usage of multiple modals.
When a modal is triggered from another modal, this will get a mixed backdrop. Very confusing for all bootstrap users. Solution can be found on several forums:

$(document) .on('show.bs.modal', '.modal', function(event) { $(this).appendTo($('body')); }) .on('shown.bs.modal', '.modal.in', function(event) { setModalsAndBackdropsOrder(); }) .on('hidden.bs.modal', '.modal', function(event) { setModalsAndBackdropsOrder(); }) .on('show.bs.tooltip', '', function(event) { $('.tooltip').not(this).hide(); }); function setModalsAndBackdropsOrder() { var modalZIndex = 1040; $('.modal.in').each(function(index) { var $modal = $(this); modalZIndex++; $modal.css('zIndex', modalZIndex); $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1); }); $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden'); }

However, this solution does not seem to work with the architecture of the visual editor.
Within the visual editor, there are several modules, like the one for editing options.
It seems this solution detects these modals as already opened. This is causing the modal to disappear. Maybe it is opened from the start and just made visible?
Would it be possible to change the visual editor so that it actually (re) opens the modals?

VisibleIf property editor - Expression Editor

Create the Expression Editor.

JS error on http://surveyjs.org/builder/ Cannot read property 'isJsonCorrect' of undefined

Using Chrome for Linux Version 52.0.2743.116 (64-bit)

1. goto http://surveyjs.org/builder/
2. Optionally add less than 3 tools from the toolbox. (Adding 3 or more prevents the error from occurring)
3. click on the "JSON Editor" tab.
4. click on "Designer" tab.

You should see this error:
editor.ts:279 Uncaught TypeError: Cannot read property 'isJsonCorrect' of undefined

Confirmed this also occurs with version 0.9.10 from npm.

ChoicesByUrl editor doesn't work correctly in question Editor

Undo/redo functionality

Add undo/redo functionality.