Add Survey into your Web Page

Use Survey Creator

The easiest way to add a SurveyJS-powered survey into your web page is to go to our Survey Creator page, construct your survey in a WYSIWYG manner, and click on the Embed Survey tab within the Creator.

There are three sections inside the Embed Survey tab - Scripts and styles, HTML, JavaScript - from which you can copy the code and paste it into your web page.

Use Plunker from examples

Another easy way is to go to one of our online examples, select 'Plunker' in the 'Edit in...' combobox, and copy the code from Plunker file editors into your web application.

Get resource files

Download from GitHub

If you do not want to use our CDN, you can download our script and stylesheet files from GitHub: Survey Library Releases.

Install as npm

As an alternative to downloading resource files, you can select one of our npm packages (based on your JavaScript platform) and install it.

Please note: If you do not use any of these frameworks and do not use jQuery, then the right choice is to go with 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 the presence of this library in your application.

Step 1. Add a link to platform resources

Step 2. Add links to SurveyJS resources

JavaScript

CSS

Step 3. Build a survey JSON

Build a survey definition in JSON format. Use the visual Survey Creator or define a JSON in code.

Here is an example of a typical survey definition JSON.

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 a survey on the page

Bootstrap

If you are using Bootstrap, tell the SurveyJS Library to use the bootstrap CSS classes.

Survey.StylesManager.applyTheme("bootstrap");

Angular - As a 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 a survey window

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

jQuery - Inside your web page

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

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

Knockout.js - As a 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 a 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 a 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 a web server

Your web server

function sendDataToServer(sender) {
  var resultAsString = JSON.stringify(sender.data);
  alert(resultAsString); //Send an AJAX request to your web server here...
}

SurveyJS web 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(sender) {
  sender.sendResult('e544a02f-7fff-4ffb-b62d-6a9aa16efd7c');
}

SurveyJS Examples

Refer to online examples to find more information about SurveyJS Library use cases and to see them in action. Select any of the supported platforms and review its HTML and JavaScript code. Click on "Edit in Plunker" button to load the example in the Plunker to be able to modify it and see the results.