Add Survey into your Web Page

The easiest way to add the survey into your web page, is to go to our Survey Builder page, construct your survey and click on the Embed Survey tab.

There are three sections inside Embed Survey tab: head, html, javascript, from where you may copy the code into your web page.

Another easy way, is to go to one of our examples, click on plunker button and copy the code from plunker editors into your web application.

If you do not want to use our Azure CDN, you may download our script files from GitHub: Survey library, or go to our cdn repository. It contains all versions since 0.12.0 (early 2017).

Finally you may select one of our npm packages, based on your JavaScript platform, and install it.

Please note: If you do not use any of this framework and do not use jQuery, then the right choice is knockout. It is a small library that helps creating UI with Model-View-View-Model pattern. You can include knockout script (~25k min+gz) just for SurveyJS and forget about this library existing in your application.

Step 1. Add a link to your platform

Step 2. Add link to SurveyJS files.

Step 3. Build Survey JSON

Build JSON using Visual Survey Builder

Here is the JSON example

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 4. Show Survey on the page

If you are using Bootstrap, tell the library to use the bootstrap css classes

Survey.StylesManager.applyTheme("bootstrap");

Angular - 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});
  }
}

Angular - 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});
  }
}

jQuery - As Survey Window.

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

jQuery - Inside your web page.

<div id="surveyContainer"></div>

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

Knockout.js - As Survey Window.

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

Knockout.js - 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);

React - As Survey Window.

<div id="surveyContainer"></div>

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

React - Inside your web page.

<div id="surveyContainer"></div>

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

Vue.js - 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 } });

Vue.js - 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 5. 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.
}

SurveyJS service

//You should get the Guid for storing survey data in surveyjs.io service storage
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');
}

SurveyJS Examples

Please visit our examples to find out more about the library. Select any of supported platforms and review html and JavaScript code. Click on "Edit in Plunker" button to load the example in the Plunker, so you may be able to modify it and see the results.