BOOTSTRAP AND DESIGN

Use predefined css classes (standard or bootstrap) and modify them as required your site design.

VISUAL SURVEY EDITOR

Use the Visual Survey Editor to create, test and then insert a survey into your web page. The editor generates JSON that can be edited in it later, if needed.

FULL CONTROL

It's just a Javascript library. That means you have the full control. You may get/set data or send them to the server at any moment. Modify survey on the fly and add new functionality.

SAVE AND ANALYZE DATA

If you don't want to deal with saving and then analyzing JSON data, you may use the dxSurvey Service. It will do it for you.
Add Survey into your page

Or use npm

npm install survey-knockout
npm install survey-react

Step 2

Add a link to a KnockoutJS or React

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
import React from 'react';
import ReactDOM from 'react-dom';

Step 3

Add link(s) to survey.js

If you are NOT going to use the Bootstrap, add the link to survey css.
<link href="css/survey.css" type="text/css" rel="stylesheet" />
Link to the knockout version of the library.
<script src="js/survey.ko.min.js"></script>
Link to the react version of the library.
import * as Survey from "survey-react";

Step 4

Build JSON using

Visual Survey Editor

JSON example (Load it in Visual Survey Editor now)

var surveyJSON = { title: "Tell us, what technologies do you use?", pages: [
  { name:"page1", questions: [ 
      { type: "radiogroup", choices: [ "Yes", "No" ], isRequired: true, name: "frameworkUsing",title: "Do you use any front-end framework like Bootstrap?" },
      { type: "checkbox", choices: ["Bootstrap","Foundation"], hasOther: true, isRequired: true, name: "framework", title: "What front-end framework do you use?", visible: false }
   ]},
  { name: "page2", questions: [
    { type: "radiogroup", choices: ["Yes","No"],isRequired: true, name: "mvvmUsing", title: "Do you use any MVVM framework?" },
    { type: "checkbox", choices: [ "AngularJS", "KnockoutJS", "React" ], hasOther: true, isRequired: true, name: "mvvm", title: "What MVVM framework do you use?", visible: false } ] },
  { name: "page3",questions: [
    { type: "comment", name: "about", title: "Please tell us about your main requirements for Survey library" } ] }
 ],
 triggers: [
  { type: "visible", operator: "equal", value: "Yes", name: "frameworkUsing", questions: ["framework"]},
  { type: "visible", operator: "equal", value: "Yes", name: "mvvmUsing", questions: ["mvvm"]}
 ]
}

Step 5

Show Survey on the page

If you are using Bootstrap, tell the library to use the bootstrap css classes.
Survey.Survey.cssType = "bootstrap";

As Survey Window

var surveyWindow = new Survey.SurveyWindow(surveyJSON);
surveyWindow.show();
//Use onComplete event to save the data
surveyWindow.survey.onComplete.add(sendDataToServer);

Inside your web page

<div id="surveyContainer"></div>
var survey = new Survey.Survey(surveyJSON, "surveyContainer");
//Use onComplete event to save the data
survey.onComplete.add(sendDataToServer);

As Survey Window

ReactDOM.render(
  <Survey.SurveyWindow json={surveyJSON} onComplete={sendDataToServer}/>,
  document.getElementById("surveyContainer"));

Inside your web page

<div id="surveyContainer"></div>
ReactDOM.render(
  <Survey.Survey json={surveyJSON} onComplete={sendDataToServer}/>,
  document.getElementById("surveyContainer"));

Step 6

Save survey data on the web server.

Your web server

function sendDataToServer(survey) {
  var resultAsString = JSON.stringify(survey.data);
  alert(resultAsString); //send Ajax request to your web server.
});

dxSurvey.com service

function sendDataToServer(survey) {
  //You should get the Guid for storing survey data in dxSurvey.com
  survey.sendResult('e544a02f-7fff-4ffb-b62d-6a9aa16efd7c');
});

The survey example

Step 7 (optional)

Get the results of your survey using the dxSurvey Service.

Share the survey results via direct link. Current Survey Results

Show me example