jQuery Plugins › jQuery Form Plugins › SurveyJS

SurveyJS Form Library: JavaScript Surveys, Forms & Quizzes

File Size:	5.01 MB
Views Total:	15584
Last Update:	08/21/2026 07:11:00 UTC
Publish Date:	09/19/2019 02:52:40 UTC
Official Website:	Go to website
License:	MIT

Demo Download

Features:

JSON-based surveys, forms, feedback flows, polls, and scored quizzes.
Multi-page forms with conditional visibility, branching, validation, progress UI, timers, and preview mode.
Text, choice, matrix, dynamic panel, file, signature, expression, rating, and other built-in question models.
Browser renderer for plain JavaScript and jQuery projects, plus React, Angular, and Vue 3 packages.
jQuery integration through the browser renderer and its Survey() wrapper.
Response data APIs, calculated values, custom variables, triggers, quiz scoring, partial results, and server validation hooks.
File upload hooks, lazy-loaded choices, dynamic matrices, dynamic panels, and custom navigation actions.

Packages And jQuery Integration

Browser projects use survey-core for the survey model, validation, logic, localization, and response APIs. The survey-js-ui package renders that model in a plain HTML, CSS, and JavaScript page.

Project Type	Package / Setup
HTML, CSS, JavaScript	`survey-core` + `survey-js-ui`
jQuery application	jQuery + `survey-core` + `survey-js-ui`; render with `$("#surveyContainer").Survey({ model: survey })`
React	`survey-react-ui`
Angular	`survey-angular-ui`
Vue 3	`survey-vue3-ui`

Browser projects use survey-core with survey-js-ui. The legacy survey-jquery package requires jQuery 1.12.4 or newer. Existing jQuery applications can keep jQuery and use the Survey() wrapper exposed by the browser renderer.

How To Use SurveyJS

1. Install SurveyJS

For a browser page, load the SurveyJS stylesheet, core model, and browser renderer in this order:

<link
  href="https://unpkg.com/[email protected]/survey-core.min.css"
  type="text/css"
  rel="stylesheet">

<script src="https://unpkg.com/[email protected]/survey.core.min.js"></script>
<script src="https://unpkg.com/[email protected]/survey-js-ui.min.js"></script>

For npm projects, install the model and browser renderer:

npm install survey-core survey-js-ui

React, Angular, and Vue projects use the matching renderer package: survey-react-ui, survey-angular-ui, or survey-vue3-ui.

2. Add A Survey Container

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

3. Define The Survey In JSON

Question names become keys in the response data object. The following schema creates a short multi-page feedback survey with required choice and rating questions.

var surveyJson = {
  title: "Product Feedback",
  showProgressBar: true,
  progressBarType: "pages",
  pages: [
    {
      name: "experience",
      title: "Your Experience",
      elements: [
        {
          type: "radiogroup",
          name: "usage_frequency",
          title: "How often do you use the product?",
          isRequired: true,
          choices: ["Daily", "Weekly", "Monthly", "Rarely"]
        },
        {
          type: "rating",
          name: "satisfaction",
          title: "How satisfied are you?",
          isRequired: true,
          rateMin: 1,
          rateMax: 5
        }
      ]
    },
    {
      name: "follow_up",
      title: "Follow-up",
      elements: [
        {
          type: "comment",
          name: "improvement",
          title: "What should we improve?",
          visibleIf: "{satisfaction} <= 3"
        },
        {
          type: "text",
          name: "email",
          title: "Email for follow-up",
          inputType: "email"
        }
      ]
    }
  ]
};

4. Create And Render The Model

The global browser build exposes the model constructor as Survey.Model.

var survey = new Survey.Model(surveyJson);

document.addEventListener("DOMContentLoaded", function () {
  survey.render(document.getElementById("surveyContainer"));
});

5. Render SurveyJS In A jQuery Project

jQuery projects can render the same survey model through the Survey() wrapper. Load jQuery before survey-js-ui.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://unpkg.com/[email protected]/survey.core.min.js"></script>
<script src="https://unpkg.com/[email protected]/survey-js-ui.min.js"></script>

var survey = new Survey.Model(surveyJson);

$(function () {
  $("#surveyContainer").Survey({
    model: survey
  });
});

6. Read The Completed Response

The data property contains the current response object. onComplete runs after successful completion.

survey.onComplete.add(function (sender) {
  var result = sender.data;

  console.log(JSON.stringify(result, null, 2));

  // Send `result` to your own API or storage layer here.
});

7. Apply A Theme

The Default Light theme comes from the main SurveyJS stylesheet. Load a theme script and call applyTheme() when the page needs another predefined theme.

<script src="https://unpkg.com/[email protected]/themes/contrast-light.min.js"></script>

survey.applyTheme(SurveyTheme.ContrastLight);

8. Intercept Completion

onCompleting supports asynchronous work and can stop completion when an external save or validation step fails.

survey.onCompleting.add(async function (sender, options) {
  try {
    var response = await fetch("/api/survey-results", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(sender.data)
    });

    if (!response.ok) {
      options.allow = false;
      options.message = "The response could not be saved. Please try again.";
    }
  } catch (error) {
    options.allow = false;
    options.message = "The response could not be saved. Please try again.";
  }
});

SurveyModel Options And Properties

This compact reference focuses on survey-level settings used most often in production forms, surveys, and quizzes. Question-specific settings stay on the corresponding question model classes.

Data, Pages, And State

Option / Property	Description
`data`	Gets or sets the response data object.
`pages`	Gets the survey page collection.
`currentPage`	Gets or sets the current page.
`currentPageNo`	Gets or sets the zero-based index of the current visible page.
`state`	Gets the current survey state, such as loading, starting, running, preview, or completed.

Navigation And Progress

Option / Property	Description
`firstPageIsStartPage`	Determines if the first page acts as a start page.
`navigationButtonsLocation`	Sets where the navigation buttons appear.
`showNavigationButtons`	Controls visibility of built-in navigation buttons.
`showPrevButton`	Controls visibility of the Previous button.
`showCompleteButton`	Controls visibility of the Complete button.
`showPreviewBeforeComplete`	Controls answer preview before final completion.
`showTOC`	Controls the survey table of contents.
`showProgressBar`	Controls progress bar visibility.
`progressBarLocation`	Sets where the progress bar appears.
`progressBarType`	Sets the progress calculation mode.
`progressBarShowPageNumbers`	Controls page numbers in the progress bar.
`progressBarShowNavigationText`	Controls page navigation text in the progress bar.

Questions And Layout

Option / Property	Description
`questionOrder`	Sets the question order policy.
`questionsOnPageMode`	Sets the page presentation mode: normal pages, one survey-wide page, one question per page, or one input per page.
`showQuestionNumbers`	Sets the question numbering mode.
`requiredMark`	Sets the marker shown for required questions.
`questionTitleLocation`	Sets the default question title position.
`questionDescriptionLocation`	Sets where question descriptions appear.
`questionErrorLocation`	Sets where validation errors appear for questions.
`widthMode`	Sets how SurveyJS calculates survey width.
`lazyRenderEnabled`	Controls lazy rendering of survey elements.

Validation And Input

Option / Property	Description
`checkErrorsMode`	Sets when SurveyJS checks validation errors during the survey flow.
`validationEnabled`	Controls survey validation.
`validationAllowComplete`	Controls completion when validation errors exist.
`validationAllowSwitchPages`	Controls page switching when validation errors exist.
`validateVisitedEmptyFields`	Controls validation of empty fields that a respondent has visited.
`clearInvisibleValues`	Sets when values from hidden questions, panels, or pages are cleared.
`textUpdateMode`	Sets when text inputs write their values to the model.
`readOnly`	Controls read-only mode for the survey.

Completion And Redirects

Option / Property	Description
`completedHtml`	Sets the HTML shown after survey completion.
`completedHtmlOnCondition`	Defines conditional completion HTML entries.
`showCompletePage`	Determines if SurveyJS displays a completion page.
`partialSendEnabled`	Controls partial result sending during survey progress.
`navigateToUrl`	Sets the URL opened after completion.
`navigateToUrlOnCondition`	Defines conditional completion URLs.

Logic, Locale, And Runtime

Option / Property	Description
`locale`	Gets or sets the survey locale.
`calculatedValues`	Stores calculated values evaluated from expressions.
`triggers`	Gets or sets conditional logic triggers.
`css`	Gets or sets CSS class mappings used by the renderer.
`elementIdPrefix`	Adds a prefix to generated HTML element IDs. Set a unique value when multiple surveys render on the same page.
`autoAdvanceEnabled`	Controls automatic page advance after respondents answer the required questions on a page.
`autoAdvanceAllowComplete`	Controls automatic completion on the last page when automatic advance is active.
`autoFocusFirstError`	Controls focus on the first question with a validation error.
`cookieName`	Sets the cookie name used to detect a previous completion.
`jsonErrors`	Contains errors found while loading a survey JSON definition.

Timer

Option / Property	Description
`showTimer`	Controls timer visibility.
`timerLocation`	Sets where timer information appears.
`timeLimit`	Sets the survey-wide time limit in seconds.
`timeLimitPerPage`	Sets the per-page time limit in seconds.
`timeSpent`	Gets or sets elapsed survey time in seconds.

SurveyModel Methods

These methods cover the main tasks developers perform after a survey model is created.

Lifecycle And Navigation

Method	Description
`fromJSON`	Loads survey settings, pages, questions, and other model data from JSON.
`toJSON`	Serializes the survey model to JSON.
`dispose`	Releases model resources and event handlers.
`clear`	Clears survey response data.
`nextPage`	Validates the current page as required and moves to the next page when navigation is permitted.
`prevPage`	Moves to the previous visible page.
`start`	Starts the survey when a start page is configured.
`showPreview`	Switches the survey to answer preview mode.
`cancelPreview`	Leaves answer preview mode and returns to survey editing.
`doComplete`	Completes the survey and runs the completion flow.
`tryComplete`	Attempts to complete the survey after running completion and validation checks.
`focusQuestion`	Moves focus to a question identified by name or model reference.

Response Data

Method	Description
`getData`	Returns response data, with filtering options when supplied.
`getValue`	Returns the response value stored under a name.
`setValue`	Stores a response value under a name.
`clearValue`	Clears the value stored under a response key.
`mergeData`	Merges an object into the current response data.
`getPlainData`	Returns survey responses as a plain-data array suited to export or inspection.

Questions And Elements

Method	Description
`getAllQuestions`	Returns questions contained in the survey.
`getElementByName`	Finds a survey element by name.
`getPageByName`	Finds a page by name.
`getPanelByName`	Finds a panel by name.
`getQuestionByName`	Finds a question by its name.
`getQuestionByValueName`	Finds a question that stores data under a specified value name.

Variables, Logic, And Validation

Method	Description
`getVariable`	Returns a custom survey variable.
`setVariable`	Creates or updates a custom survey variable.
`runCondition`	Evaluates a SurveyJS condition expression.
`runExpression`	Evaluates a SurveyJS expression and returns its result.
`runTriggers`	Evaluates and executes survey triggers.
`validate`	Validates the survey.
`validateCurrentPage`	Validates the current page.
`validatePage`	Validates a specified page.

Quiz, Theme, Files, And Timer

Method	Description
`getCorrectAnswerCount`	Returns the number of correctly answered quiz questions.
`getIncorrectAnswerCount`	Returns the number of incorrectly answered quiz questions.
`getQuizQuestionCount`	Returns the number of questions included in quiz scoring.
`applyTheme`	Applies a theme object to the survey, with an optional base theme.
`addNavigationItem`	Adds a custom action to the survey navigation bar and returns the created action.
`notify`	Shows a SurveyJS notification message.
`uploadFiles`	Runs the SurveyJS file-upload flow for File questions.
`getProgressInfo`	Returns progress information for the requested progress mode.
`startTimer`	Starts the survey timer.
`stopTimer`	Stops the survey timer.

SurveyModel Events

These events cover the main integration points for navigation, validation, data changes, rendering, dynamic content, and file handling.

Lifecycle And Navigation

Event	Description
`onCurrentPageChanging`	Runs before the current page changes and can control navigation.
`onCurrentPageChanged`	Runs after the current page changes.
`onCompleting`	Runs before completion and can block or delay completion.
`onComplete`	Runs after the survey completes and exposes the final response data.
`onPartialSend`	Runs when partial survey data is ready to be sent.
`onTimerTick`	Runs on survey timer ticks.
`onTriggerExecuted`	Runs after a conditional trigger executes.

Values And Validation

Event	Description
`onValueChanging`	Runs before a survey response value changes.
`onValueChanged`	Runs after a survey response value changes.
`onVariableChanged`	Runs after a custom survey variable changes.
`onPropertyChanged`	Runs after a property on the survey model changes.
`onValidateQuestion`	Runs when a question is validated and can add custom errors.
`onValidatePage`	Runs when a page is validated and can add custom errors.
`onServerValidateQuestions`	Runs when survey values need server-side validation before navigation or completion.
`onCheckAnswerCorrect`	Runs during the quiz answer correctness check.

Rendering And Choices

Event	Description
`onAfterRenderSurvey`	Runs after the survey is rendered.
`onAfterRenderQuestion`	Runs after a question is rendered.
`onAfterRenderQuestionInput`	Runs after a question input element is rendered.
`onFocusInQuestion`	Runs when focus enters a question.
`onResize`	Runs when SurveyJS processes a resize operation for the rendered survey.
`onChoicesLazyLoad`	Runs when a choice-based question requests another batch of choices.
`onChoicesLoaded`	Runs after choices are loaded for a choice-based question.
`onChoicesSearch`	Runs when a respondent searches within a choice list.
`onCreateCustomChoiceItem`	Runs when SurveyJS creates a custom choice item entered by a respondent.

Survey Structure

Event	Description
`onQuestionAdded`	Runs after a question is added.
`onQuestionRemoved`	Runs after a question is removed.
`onQuestionVisibleChanged`	Runs after question visibility changes.
`onPanelAdded`	Runs after a panel is added.
`onPanelRemoved`	Runs after a panel is removed.
`onPageAdded`	Runs after a page is added to the survey.
`onPageVisibleChanged`	Runs after page visibility changes.

Matrix And Dynamic Panel

Event	Description
`onMatrixRowAdded`	Runs after a dynamic matrix row is added.
`onMatrixRowRemoved`	Runs after a dynamic matrix row is removed.
`onMatrixCellValueChanged`	Runs after a matrix cell value changes.
`onDynamicPanelAdded`	Runs after a Dynamic Panel item is added.
`onDynamicPanelRemoved`	Runs after a Dynamic Panel item is removed.
`onDynamicPanelValueChanged`	Runs after a value inside a Dynamic Panel item changes.

Files And Content Customization

Event	Description
`onUploadFiles`	Runs when File question files need to be uploaded.
`onDownloadFile`	Runs when a stored File question item needs to be downloaded.
`onClearFiles`	Runs when File question files need to be cleared.
`onProcessHtml`	Runs while SurveyJS processes HTML content before display.
`onTextMarkdown`	Runs when SurveyJS converts Markdown text for display.
`onUpdateQuestionCssClasses`	Runs when SurveyJS builds CSS classes for a question.
`onUpdatePanelCssClasses`	Runs when SurveyJS builds CSS classes for a panel.
`onUpdatePageCssClasses`	Runs when SurveyJS builds CSS classes for a page.

Event Examples

React To A Response Change

onValueChanged runs after SurveyJS stores a new response value.

survey.onValueChanged.add(function (sender, options) {
  console.log("Updated field:", options.name);
  console.log("Current data:", sender.data);
});

Run Custom Validation

onValidateQuestion can add validation errors to a question during the normal validation cycle.

survey.onValidateQuestion.add(function (sender, options) {
  if (options.name === "employee_id" && !/^EMP-\d{4}$/.test(options.value || "")) {
    options.error = "Use the format EMP-1234.";
  }
});

Customize Question CSS Classes

onUpdateQuestionCssClasses can change classes before a question renders.

survey.onUpdateQuestionCssClasses.add(function (sender, options) {
  if (options.question.name === "satisfaction") {
    options.cssClasses.root += " satisfaction-question";
  }
});

Package And Compatibility Notes

survey-core contains the model and logic. A browser page also needs survey-js-ui to render the form.
jQuery is optional. Existing jQuery code can use $("#surveyContainer").Survey({ model: survey }) after the browser renderer loads.
The separate survey-jquery package is a legacy 1.x integration and declares jQuery 1.12.4 or newer as a dependency.
progressBarShowPageTitles remains as a deprecated property. Use progressBarShowNavigationText for new implementations.
Multiple survey instances should set distinct elementIdPrefix values before rendering to avoid duplicate generated element IDs.
Theme customization uses theme objects and --sjs2- design tokens.

Alternatives & Related Resources

Changelog

v3.0.1 (2026-08-21)

Major update

This awesome jQuery plugin is developed by surveyjs. For more Advanced Usages, please check the demo page or visit the official website.

SurveyJS Form Library: JavaScript Surveys, Forms & Quizzes

Features:

Packages And jQuery Integration

How To Use SurveyJS

1. Install SurveyJS

2. Add A Survey Container

3. Define The Survey In JSON

4. Create And Render The Model

5. Render SurveyJS In A jQuery Project

6. Read The Completed Response

7. Apply A Theme

8. Intercept Completion

SurveyModel Options And Properties

Data, Pages, And State

Navigation And Progress

Questions And Layout

Validation And Input

Completion And Redirects

Logic, Locale, And Runtime

Timer

SurveyModel Methods

Lifecycle And Navigation

Response Data

Questions And Elements

Variables, Logic, And Validation

Quiz, Theme, Files, And Timer

SurveyModel Events

Lifecycle And Navigation

Values And Validation

Rendering And Choices

Survey Structure

Matrix And Dynamic Panel

Files And Content Customization

Event Examples

React To A Response Change

Run Custom Validation

Customize Question CSS Classes

Package And Compatibility Notes

Alternatives & Related Resources

Changelog

Related jQuery Plugins

You Might Also Like

Add Your Review