Create surveys, polls, and quizzes for your JavaScript application free.
Open-source MIT-licensed JavaScript UI libraryfor surveys and web forms.
Web Forms
SurveyJS transforms the way of dealing with web forms. Discover its key features and the benefits of introducing Form Library to your form workflow.
Over 100 free demos for React, Angular, Vue, jQuery, and Knockout to get you started.
No-code WYSIWYG form builder to auto generate a form data model—a schema written in JSON.
20+ built-in question types and support for custom question types.
All sensitive respondent data is securely stored on your own servers.
See the SurveyJS Form Library in Action
Form Library is extensible and allows you to change its behavior as your needs require. Take advantage of more than a hundred free demos showing functionality that includes all popular scenarios.
import { Component, OnInit } from '@angular/core';
import { Model } from "survey-core";
const surveyJson = {
// ...
};
@Component({
// ...
})
export class AppComponent implements OnInit {
surveyModel: Model;
ngOnInit() {
const survey = new Model(surveyJson);
survey.onComplete.add((sender, options) => {
//Store data in your data storage
console.log(
JSON.stringify(sender.data, null, 3));
});
this.surveyModel = survey;
}
}
//-----------------------------------------------
// <survey [model] = "surveyModel" ></survey>
//-----------------------------------------------import "survey-core/defaultV2.css";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
const surveyJson = {
// ...
};
export function SurveyComponent() {
const survey = new Model(surveyJson);
survey.onComplete.add((sender, options) => {
// Store data in your data storage
console.log(
JSON.stringify(sender.data, null, 3));
});
return <Survey model={survey} />;
}<template>
<Survey :survey="survey" />
</template>
<script>
import "survey-core/defaultV2.css";
import { Model } from "survey-core";
import { Survey } from 'survey-vue-ui;
const surveyJson = { ... };
export default {
components: {
Survey
},
data() {
const survey = new Model(surveyJson);
survey.onComplete.add((sender, options) => {
// Store data in your data storage
console.log(
JSON.stringify(sender.data, null, 3));
});
return {
survey
}
},
}
</script>const surveyJson = {
// ...
};
const survey = new Survey.Model(surveyJson);
survey.onComplete.add((sender, options) => {
//Store data in your data storage
console.log(
JSON.stringify(sender.data, null, 3));
});
$(function () {
$("#surveyContainer").Survey({ model: survey });
});const surveyJson = {
// ...
};
const survey = new Survey.Model(surveyJson);
survey.onComplete.add((sender, options) => {
// Store data in your data storage
console.log(
JSON.stringify(sender.data, null, 3));
});
survey.render(
document.getElementById("surveyContainer"));Get Started in a Few Simple Steps
Form Library lets you load dynamic, multi-language, on-page forms and have them run on any of your favourite front-end platforms.
Choose your front-end. Build forms in
Install the survey-angular-ui npm Package.
npm install survey-angular-ui --save
Import a CSS file of a built-in theme to configure a style of your form.
Instantiate a survey Model by passing the data schema to the Model constructor. A model describes the layout and contents of your survey.
Import a framework-specific rendering component and pass the Model instance to the component's model attribute.
Add a free example of survey data 'schema' in JSON and run the npm start command. Your entire form is defined as a data model (a ‘schema’) written in JSON.
Still got questions?
Check our FAQ or Contact Us