Add Survey into your page

or install via npm

npm install survey-angular
npm install survey-jquery
npm install survey-knockout
npm install survey-react
npm install survey-vue

Step 2

Add a link to your platform Angular2 or JQuery or KnockoutJS or React or Vue

import { Component } from '@angular/core';
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<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';
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>

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="https://surveyjs.azureedge.net/0.12.19/survey.css" type="text/css" rel="stylesheet" />
Link to the angular2 version of the library.
<script src="https://surveyjs.azureedge.net/0.12.19/survey.angular.min.js"></script>
Link to the jquery version of the library.
<script src="https://surveyjs.azureedge.net/0.12.19/survey.jquery.min.js"></script>
Link to the knockout version of the library.
<script src="https://surveyjs.azureedge.net/0.12.19/survey.ko.min.js"></script>
Link to the react version of the library.
<script src="https://surveyjs.azureedge.net/0.12.19/survey.react.min.js"></script>
Link to the vue version of the library.
<script src="https://surveyjs.azureedge.net/0.12.19/survey.vue.min.js"></script>

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?", visibleIf: "{frameworkUsing} = 'Yes'" }
   ]},
  { 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?", visibleIf: "{mvvmUsing} = 'Yes'" } ] },
  { name: "page3",questions: [
    { type: "comment", name: "about", title: "Please tell us about your main requirements for Survey library" } ] }
 ]
}

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

<ng-app></ng-app>
@Component({
  selector: 'ng-app',
  template: `<div id='surveyElement'></div>`,
})
export class AppComponent  {
  ngOnInit() {
    var survey = new Survey.Model(surveyJSON);
    survey.onComplete.add(sendDataToServer);
    Survey.SurveyWindowNG.render("surveyElement", {model:survey});
  }
}

Inside your web page

<ng-app></ng-app>
@Component({
  selector: 'ng-app',
  template: `<div id='surveyElement'></div>`,
})
export class AppComponent  {
  ngOnInit() {
    var survey = new Survey.Model(surveyJSON);
    survey.onComplete.add(sendDataToServer);
    Survey.SurveyNG.render("surveyElement", {model:survey});
  }
}

As Survey Window

var survey = new Survey.Model(surveyJSON);
$("#surveyContainer").SurveyWindow({
    model:survey,
    onComplete:sendDataToServer
});

Inside your web page

<div id="surveyContainer"></div>
var survey = new Survey.Model(surveyJSON);
$("#surveyContainer").Survey({
    model:survey,
    onComplete:sendDataToServer
});

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.Model(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"));

As Survey Window

<div id="surveyContainer"><survey-window :survey="survey"></survey-window></div>
var survey = new Survey.Model(surveyJSON);
new Vue({ el: '#surveyContainer', data: { survey: survey } });

Inside your web page

<div id="surveyContainer"><survey :survey="survey"></survey></div>
var survey = new Survey.Model(surveyJSON);
new Vue({ el: '#surveyContainer', data: { survey: survey } });

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

//You should get the Guid for storing survey data in dxSurvey.com
survey.surveyPostId = 'e544a02f-7fff-4ffb-b62d-6a9aa16efd7c';
//You may call survey.sendResult function as another option.
function sendDataToServer(survey) {
  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