BOOTSTRAP SUPPORT

Design using bootstrap classes.

FULL CONTROL

It's just a Javascript library. You are able to hide/show any question, tabs, modify the behavior and so on.

SAVE/LOAD DATA IN YOUR DATABASE

Use Javascript functions and callback to load/save surveys from/into your database or service.
Add Survey Editor into your page
Go to surveyjs.org web site to learn about surveyjs library.

We are using knockout in Editor. It works perfectly with all other platforms and libraries.
For your convenience, we have created several GitHub repos to start with: angular, angular-cli, react and vue.

Or use npm

npm install surveyjs-editor

Step 2

Add links to external libraries:

Bootstrap

jQuery

KnockoutJS

<link href="http://getbootstrap.com/dist/css/bootstrap.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>

Step 3

Add links to surveyjs.editor and surveyjs libraries

Add link to editor classes.
<link href="https://surveyjs.azureedge.net/0.12.20/surveyeditor.css" type="text/css" rel="stylesheet" />
Link to the knockout version of the library.
<script src="https://surveyjs.azureedge.net/0.12.20/survey.ko.min.js"></script>
<script src="https://surveyjs.azureedge.net/0.12.20/surveyeditor.min.js"></script>

Step 4

Show Survey Editor on the page

Inside your web page

<div id="surveyEditorContainer"></div>
var editorOptions = {showEmbededSurveyTab: true}; //see examples below
var survey = new SurveyEditor.SurveyEditor("surveyEditorContainer", editorOptions);
//set function on save callback
editor.saveSurveyFunc = saveMySurvey;

Step 5

Save and load surveys

Save survey

function saveMySurvey(){
  var yourNewSurveyJSON = editor.text;
  //send updated json in your storage  
}

Set Survey JSON directly

editor.text = yourSurveyJSON;

Load Survey from dxsurvey.com

editor.loadSurvey(yourSurveyId);

Step 6

Customize Editor via options

var editorOptions = {
 // show the embeded survey tab. It is hidden by default
 showEmbededSurveyTab : true,
 // hide the test survey tab. It is shown by default
 showTestSurveyTab : false,
 // hide the JSON text editor tab. It is shown by default
 showJSONEditorTab : false,
 // show the "Options" button menu. It is hidden by default 
 showOptions: true                          
};
// pass the editorOptions into the constructor. It is an optional parameter.
var survey = new SurveyEditor.SurveyEditor("surveyEditorContainer", editorOptions);

Step 7

Optionally use Ace Code Editor, instead of textarea

Optionally use Select2, instead of standard select for element selector

Add link to ace editor library.
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/worker-json.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-json.js" type="text/javascript"></script>
Add link to select2 jQuery plugin.
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" type="text/css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js" type="text/javascript"></script>