Forem: SurveyJS

How to Add a Form Wizard to Your Website (React, Angular, Vue, plain JS)

SurveyJS — Thu, 12 Mar 2026 21:13:31 +0000

The quickest way to add a form wizard to a web application is to use a JavaScript form library that already supports multi-step flows. Instead of building page navigation, validation, and conditional logic from scratch, you define the form as JSON and let the rendering library handle the runtime behavior.

SurveyJS is a good fit for this. It lets you model forms as JSON schemas, configure validation and logic declaratively, and render the same form in React, Angular, Vue, or plain JavaScript. Survey Creator allows you to generate that schema visually, and Form Library renders it in your application.

This article shows how to create a multi-step form wizard with SurveyJS and embed it in different JavaScript stacks.

What is a Form Wizard

A form wizard is a form navigation pattern that splits a long or complex form into a sequence of smaller steps. Instead of showing every input at once, the UI presents one section, question, or field at a time and guides the user through the flow with navigation controls and progress indicators. This approach improves usability for long forms such as the sample background check consent form shown below:

Why Use SurveyJS for Multi-Step Forms

SurveyJS separates form design from rendering.

You define the form structure, validation rules, navigation, and logic in JSON. Then the Form Library renders that schema in the framework of your choice. SurveyJS Form Library is framework-specific at the UI layer, while survey-core contains the shared model and runtime logic, so you can reuse the same form definition across React, Angular, Vue, and plain JavaScript.

To learn more about SurveyJS architecture, please refer to the SurveyJS Architecture guide.

Survey Creator is the visual form builder used to generate and edit form schemas. It supports drag-and-drop form design, a JSON editor, validation rules, and conditional logic configuration. The generated JSON can then be rendered by SurveyJS Form Library.

In practice, that gives you:

visual form authoring
JSON-based configuration
built-in validation
conditional logic
reusable rendering across frameworks

SurveyJS Rendering Packages

SurveyJS ships framework-specific rendering packages on top of survey-core. Using these packages, you can embed multi-step forms into any
website.

Framework	NPM Package	Get Started guide
React	`survey-react-ui`	React Get Started Guide
Angular	`survey-angular-ui`	Angular Get Started Guide
Vue.js	`survey-vue3-ui`	Vue Get Started Guide
Plain JavaScript	`survey-js-ui`	Plain JavaScript Get Started Guide

All of them render the same JSON schema, which means the form definition stays the same even if the frontend stack changes.

Define the Wizard as JSON

In SurveyJS, a form is described as a JSON schema. At the top level, you define survey metadata and runtime options. Inside pages, you define the questions shown in each step.

Here is a simplified example of a background check consent form:

const surveyJson = {
  "title": "Background check consent form",
  "pages": [
    {
      "name": "personal-details",
      "title": "Personal Details",
      "elements": [
        {
          "type": "text",
          "name": "surname",
          "title": "Surname",
          "maxLength": 35
        },
        {
          "type": "text",
          "name": "surname-at-birth",
          "startWithNewLine": false,
          "title": "Surname at birth",
          "maxLength": 35
        },
        {
          "type": "text",
          "name": "dob",
          "title": "Date of Birth",
          "validators": [
            {
              "type": "expression",
              "text": "You must be at least 18 y.o. to submit the form.",
              "expression": "age({dob}) >= 18"
            }
          ],
          "inputType": "date",
        },
                {
          "type": "radiogroup",
          "name": "gender",
          "maxWidth": "50%",
          "title": "Gender",
          "commentText": "Other (describe)",
          "choices": [
            {
              "value": "female",
              "text": "Female"
            },
            {
              "value": "male",
              "text": "Male"
            },
            {
              "value": "other",
              "text": "Other"
            }
          ],
          "otherText": "Other (please specify)",
          "otherErrorText": "Response required: please specify your               gender.",
          "colCount": 3
        },
      ]
    }
  ],
  "showProgressBar": true,
  "progressBarLocation": "belowheader",
  "progressBarType": "questions",
  "completeText": "Submit Form",
  "questionsOnPageMode": "questionPerPage"
}

The questionsOnPageMode is a survey-level setting that controls how the runtime treats steps. It works as the switch that determines whether navigation happens by page, by question, or by input.

The property accepts the following values:

singlePage – Combines all survey pages into a single page.
questionPerPage – Displays each question on a separate page.
inputPerPage – Displays each input field on a separate page. Complex questions—such as Single-Select Matrix, Multi-Select Matrix, Dynamic Matrix, Dynamic Panel, and Multiple Textboxes—are split so that each input field appears on its own page.
standard (default) – Retains the original single- or multi-page structure.

questionsOnPageMode: "questionPerPage" turns the form into a question-by-question wizard, regardless of how many elements are on a page. If you want each declared page to behave as a wizard step, use the default page structure instead of question-per-page mode.

Configure Wizard Behavior in Survey Creator

You can define the JSON manually, but it is faster to configure the form visually in Survey Creator.

Survey Creator produces a JSON configuration that Form Library can render later, and the survey-level settings include layout and navigation configuration. To configure a multi-step form in the builder UI:

At the top of the Property Grid, select Survey to switch to the survey-level settings.
Under Navigation, locate the Survey layout setting.
Select the option that suits your use case.

Render the Form Wizard

Once the JSON schema is ready, pass it to a Model from survey-core and render it with the package for your framework.

React

"use client";

import { useMemo } from "react";
import "survey-core/survey-core.css";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";

const surveyJson = {
  /* ... */
};

export default function SurveyWizard() {
  const survey = useMemo(() => new Model(surveyJson), []);

  return <Survey model={survey} />;
}

Angular

import { Component } from "@angular/core";
import { Model } from "survey-core";

@Component({
  selector: "app-root",
  template: `<survey [model]="survey"></survey>`
})
export class AppComponent {
  survey = new Model(surveyJson);
}

And in your Angular module:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { SurveyModule } from "survey-angular-ui";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SurveyModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Vue

<script setup lang="ts">
import "survey-core/survey-core.css";
import { Model } from "survey-core";
import { SurveyComponent } from "survey-vue3-ui";

const survey = new Model(surveyJson);
</script>

<template>
  <SurveyComponent :model="survey" />
</template>

Plain JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>SurveyJS Form Wizard</title>

  <link
    rel="stylesheet"
    href="https://unpkg.com/survey-core/survey-core.min.css"
  />
  <script src="https://unpkg.com/survey-core/survey.core.min.js"></script>
  <script src="https://unpkg.com/survey-js-ui/survey-js-ui.min.js"></script>
</head>
<body>
  <div id="surveyContainer"></div>

  <script>
    const surveyJson = {
      /* ... */
    };

    const survey = new Survey.Model(surveyJson);

    document.addEventListener("DOMContentLoaded", function () {
      survey.render(document.getElementById("surveyContainer"));
    });
  </script>
</body>
</html>

Final thoughts

A form wizard is not just a UI convenience. It is a runtime model for managing long-form input: sequence, validation, conditional branching, and completion. SurveyJS is useful here because those concerns live in the schema instead of being hand-coded into each frontend implementation.

That design has two practical benefits. First, the form definition becomes portable across frameworks. Second, the logic is easier to review, version, and maintain because it is expressed declaratively in JSON rather than spread across multiple components and event handlers.

If your goal is to ship a multi-step form quickly without losing control over validation and logic, that is a solid architecture.

[Boost]

SurveyJS — Thu, 15 Jan 2026 23:01:42 +0000

React JSON Schema Forms in Practice — Why They Break Down and How SurveyJS Fixes the Architecture

SurveyJS ・ Jan 15

#frontend #javascript #react #json

React JSON Schema Forms in Practice — Why They Break Down and How SurveyJS Fixes the Architecture

SurveyJS — Thu, 15 Jan 2026 22:57:09 +0000

React JSON schema forms promise something very attractive to product teams: define your form once as JSON, render it anywhere, and let the schema handle validation, defaults, and conditional logic.

Libraries like @rjsf/core (react-jsonschema-form) and Uniforms deliver on that promise for small to medium forms. But once forms become dynamic, state-dependent, or large, teams start hitting the same architectural limits again and again.

This article explains why those problems occur and how SurveyJS Form Library approaches the problem differently and separates business logic from rendering by introducsing survey-core, a platform-independent survey model for SurveyJS Form Library and survey-react-ui, a React-specific UI rendering package.

The Core Architectural Difference

Before diving into specific issues, it's important to understand the root cause.

React JSON Schema Forms

React JSON Schema libraries treat the schema as both structure and behavior. They rely on schema mutation (dependencies, oneOf, dynamically regenerated schemas) and depend heavily on React re-renders to apply logic. Most of the problems below stem directly from that distinction.

SurveyJS

SurveyJS takes a different approach: JSON is treated as a declarative model, business logic is encapsulated in the form engine (survey-core), and React is used only for rendering, not orchestration.

Conditional Logic: When Schema Mutation Meets React State

The Problem in react-jsonschema-form

In RJSF, conditional fields are typically implemented using dependencies, oneOf, or dynamically regenerated schemas.


const schema = {
  type: "object",
  properties: {
    hasCar: { type: "boolean" }
  },
  dependencies: {
    hasCar: {
      oneOf: [
        {
          properties: {
            hasCar: { const: true },
            carModel: { type: "string" }
          }
        },
        {
          properties: {
            hasCar: { const: false }
          }
        }
      ]
    }
  }
};

This works, but only as long as the schema never changes shape unexpectedly. In React JSON Schema forms, the schema is not just a description of fields - it is the form itself. Using dependencies, oneOf, or anyOf dynamically switches schema branches at runtime. From React's perspective, fields are added or removed, the internal form tree changes shape, and previously mounted inputs may unmount and remount.

This is manageable when the schema is static, conditionals are simple, and no external data influences the schema. But real product forms often need feature flags, backend-driven configuration, role-based visibility, and progressive disclosure.

As soon as the schema is modified dynamically (for example, regenerated in a useEffect), React sees it as a new form definition, not a continuation of the previous one. That's when input state, defaults, and validation can reset in surprising ways.

React JSON Schema form libraries also rely on React's render cycle to coordinate behavior. A field change updates formData, triggering a re-render, which may cause a different schema branch to be selected and then validated. This chain only works when updates happen in perfect order. React may batch updates or re-render components opportunistically, which can lead to flickering fields, disappearing validation messages, or inputs losing focus. None of this is a React bug—it is a consequence of encoding business logic into the render cycle.

Real-world forms often rebuild schemas in useEffect to handle multiple fields, derived values, or async data. This leads to lost state, broken validation, and brittle logic.

How SurveyJS Handles Conditional Logic

SurveyJS does not mutate schemas to express behavior.

Instead, conditions are runtime expressions evaluated by survey-core.


{
  "name": "carModel",
  "type": "text",
  "visibleIf": "{hasCar} = true"
}

The key idea is that the schema stays static: the form's structure is defined once and treated as a durable contract rather than something that changes in response to user interaction. Fields are never removed or recreated; they always exist in the model, giving the engine a stable reference point. Visibility is evaluated at runtime by the engine, making field appearance deterministic and independent of React render timing.

React is never asked to rebuild the form. It simply renders what the engine reports as visible or active. State changes trigger rule evaluation, not structural mutation, eliminating the need for schema regeneration, deep equality checks, or defensive memoization. This separation allows SurveyJS to handle complex conditional logic, large schemas, and frequent state changes without becoming fragile.

Conditional logic in SurveyJS is therefore predictable, composable, and scalable across even very large forms.

Validation: Why Errors Disappear in Schema-Based React Forms

The Problem in RJSF (and Uniforms)

Validation in React JSON Schema forms is typically delegated to Ajv and mapped back into React state. Teams often encounter issues such as disappearing errors after schema updates, async validation racing with renders, and complex cross-field validation requiring custom plumbing.


<Form
  schema={schema}
  validator={validator}
  onError={(errors) => console.log(errors)}
/>

The underlying problem isn't Ajv—it's that validation is tied to React render cycles. Any schema or state change risks resetting the error tree.

How SurveyJS Handles Validation

SurveyJS treats validation as a first-class engine concern:


{
  "name": "email",
  "type": "text",
  "isRequired": true,
  "validators": [
    { "type": "email" }
  ]
}

Validation runs independently of React, errors are persisted in the survey model, and cross-field or async validation are built-in. Moving validation out of React removes the need to sequence setState calls, debounce validation manually, or reconcile async results with rendering. Complex rules stay readable because they are declared close to the fields they affect, rather than scattered across component logic.

Schema Updates on State Change: The Hidden Cost of "Dynamic Schemas"

In RJSF, changing the schema usually means replacing the schema object, often in a useEffect:


const [schema, setSchema] = useState(baseSchema);

useEffect(() => {
  if (formData.type === "advanced") {
    setSchema(advancedSchema);
  }
}, [formData]);

This pattern causes full form reinitialization, loss of user input, validation resets, and performance degradation. Teams often add memoization, deep merges, or schema diffing to compensate, which adds complexity.

SurveyJS avoids schema updates entirely. Instead, the schema is static and behavior changes—such as conditional visibility, required fields, or validation—are handled through runtime expressions. React simply renders what the engine reports as active. This separation ensures predictable behavior, maintains user input, preserves validation state, and improves performance for large forms.

Performance with Large Schemas: When React Becomes the Bottleneck

Large JSON schemas in React forms often hit serious performance limits: initial renders are slow, deep comparisons on re-renders are expensive, and single-field updates can trigger unnecessary renders elsewhere. Uniforms and RJSF perform well for small forms but struggle at scale.

SurveyJS was designed for large forms from the ground up. It uses incremental rendering, dependency-based updates, and lazy loading of pages and questions. React only renders currently visible questions, and only affected fields re-evaluate, which dramatically reduces unnecessary re-renders and improves performance.


import { Survey } from 'survey-react-ui';

const surveyJson = { /* ... */ }

export default function SurveyComponent() {
  const survey = new Model(surveyJson);

  return <Survey model={survey} />;
}

Behind the scenes, the engine handles visibility conditions, dynamic rules, and validation in real time, without diffing the entire schema. You can explore a real-world demo here: Content-Heavy JSON Forms.

SurveyJS Architecture: Why This Works

SurveyJS clearly separates business logic from rendering:

survey-core — a platform-independent survey model for SurveyJS Form Library
survey-react-ui — a React-specific form renderer
survey-creator-core — a platform-independent data model for SurveyJS Survey Creator, a drag-and-drop form builder
survey-creator-react — a React-specific Survey Creator UI renderer

React itself is never responsible for evaluating conditions, managing validation state, or coordinating schema changes. You can read more here: SurveyJS Architecture

When Product Teams Choose SurveyJS

SurveyJS is a better fit when forms are long-lived, conditional logic is central, performance matters at scale, non-trivial validation is required, or schema mutation becomes a maintenance burden. React JSON Schema forms are still valuable, but SurveyJS is designed for what they struggle with most.

Final Thought

Most issues attributed to "React JSON Schema form" aren't implementation bugs—they're architectural limits.

SurveyJS solves these problems by moving form intelligence out of React, letting product engineers focus on features instead of fighting render cycles.

An open-source library to create dynamic JSON schema forms in your React application

SurveyJS — Tue, 13 Jan 2026 21:53:00 +0000

Custom Form Builder for React Applications

SurveyJS for _SurveyJS ・ Jan 13

#frontend #javascript #react #tooling

Custom Form Builder for React Applications

SurveyJS — Tue, 13 Jan 2026 21:33:10 +0000

Building forms in React often starts simple but quickly becomes complex as requirements grow. Validation rules, conditional logic, dynamic fields, and enterprise constraints can turn handcrafted forms into hard-to-maintain code. SurveyJS provides a custom form builder for React applications that solves these challenges by enabling dynamic, schema-driven forms while keeping developers fully in control.

Built for Developers Who Need Dynamic Forms in React

SurveyJS is designed for developers building applications where forms are not static. Instead of hardcoding inputs and rules, forms are defined as JSON and rendered dynamically at runtime.

SurveyJS is a good fit for teams that:

Build dynamic forms that change frequently
Need a custom form builder embedded into their own React applications
Want a developer-first solution without SaaS lock-in or hosted data storage

Because SurveyJS is delivered as JavaScript libraries, it integrates directly into your codebase and development workflow.

Build Dynamic Forms from JSON Schemas

SurveyJS uses a JSON schema to describe the structure and behavior of a form. This schema defines questions, layouts, validation rules, and logic in a clear, structured format.

With SurveyJS, you can:

Create reusable schemas shared across applications
Store schemas in your own database (Learn more about Backend integration)
Generate forms at runtime using SurveyJS form rendering component
Update forms without redeploying your React app

Because the schema is platform-agnostic, the same form definition can be reused with different front-end frameworks while preserving consistent behavior. SurveyJS offers dedicated npm packages for Angular, React, Vue, and VanillaJS.

Designed for Modern React Applications

SurveyJS provides dedicated React components that integrate cleanly into modern React applications. Forms are rendered as part of your component tree and work naturally with existing layouts and routing.

Key integration benefits include:

Compatibility with React hooks and modern state patterns
Smooth behaviour in single-page applications (SPAs)
A framework-agnostic core that separates form logic from the UI layer (Learn more about SurveyJS architecture)

This architecture allows SurveyJS forms to remain portable and maintainable over time.

Advanced Logic and Validation Without Hardcoding

One of SurveyJS’s strengths is its ability to handle complex form logic declaratively. Instead of writing conditional logic in React components, rules are defined directly in the schema like so:

json

[
  ...,
{
    "name": "textlengthvalidator",
    "type": "comment",
    "title": "Text Length Validator",
    "description": "Enter text no shorter than 10 and no longer than 280 symbols",
    "isRequired": true,
    "validators": [{
      "type": "text",
      "minLength": 10,
      "maxLength": 280
    }]
  },
...
]

SurveyJS offers a GUI for configuring form logic and supports:

Conditional logic for dynamic visibility
Built-in validation
Support for custom client-side validation rules
Calculated fields and expressions
Cross-field dependencies using expression syntax

By centralizing logic in the schema, SurveyJS reduces code complexity and improves consistency across forms.

Fully Customizable and White-Label

SurveyJS is designed to be fully integrated and customized. It offers white-label usage and does not impose SurveyJS branding or fixed UI constraints, making it suitable for white-label products.

Customization options allow developers to:

Create custom fields and question types
Extend functionality with custom widgets (This example shows how to integrate a 3rd-rarty rich content editor)
Localize the form builder UI to any language
Integrate forms into existing design systems and apply full UI theming using custom CSS

This flexibility makes SurveyJS suitable for both internal tools and customer-facing applications.

You Stay in Control of Your Data

SurveyJS is a self-hosted solution. It does not collect, store, or process user data on your behalf.

With SurveyJS:

All form data stays in your application
You control backend integration and data flow
There is no built-in or external data storage

This approach is especially important for organizations with strict security, privacy, or compliance needs.

The team offer several examples to help you integrate SurveyJS components with your backend system. Examples are available for PHP, ASP.NET, and Node.js.

How SurveyJS Compares to Other React Form Builders

Many React form solutions focus on managing form state and validation at the component level. While effective for simple use cases, these tools often require significant custom code for dynamic or schema-driven forms.

Compared to typical alternatives:

SurveyJS provides a schema-based form builder, not just a form library
Business logic lives in configuration rather than React code
It scales better for complex and evolving requirements

For teams looking for an open-source, dynamic, and scalable form solution SurveyJS offers a balance: a developer-friendly open-source architecture with enterprise-ready capabilities, making it a strong enterprise form builder for React applications.

Top Customizable Survey Software You Shouldn't Miss

Accessibility

Tripetto lacks information on its accessibility practices, and unfortunately, the platform fails to meet basic accessibility standards. The editor is not effectively navigable via keyboard, and screen readers struggle due to missing or incorrect ARIA tags. While the forms are somewhat keyboard accessible, they deviate significantly from standard keyboard controls.

Conclusion

Each of these tools brings something unique to the table. SurveyJS survey software excels in customization and seamless backend integration, while Form.io is ideal for users requiring comprehensive data management. LimeSurvey is perfect for research-heavy projects, thanks to its robust data analysis capabilities. Tripetto shines with its conversational style, but falls short in accessibility. Ultimately, assessing your priorities - be it customization, ease of use, data management, or cost - will guide you to the survey solution that best fits your needs.

How to Create a Poll and Visualize Collected Responses in Real Time

SurveyJS — Sat, 22 Apr 2023 16:19:51 +0000

Image by pch.vector on Freepik

In this blog post, we will guide you through all the steps to build a poll with SurveyJS Form Library and then visualize the results that are being submitted in real time with SurveyJS Dashboard. Plus — a sample React demo inside.

The Power of Conducting Polls

Running a poll is an effective way to measure public opinion on a particular issue or topic. By asking a representative sample of the population a set of questions on their views, pollsters can gather an accurate and actionable snapshot of what people think. Polls can also help identify trends in public opinion over time. By conducting regular polls on a particular issue or topic, pollsters can track how people's views are changing.

Read the full post on SurveyJS blog.

Client-Side vs Server-Side Form Input Validation

SurveyJS — Tue, 18 Apr 2023 16:11:58 +0000

Tired of dealing with invalid data submitted by users in your web forms? Then it's time for you to introduce input validation into your form creation workflow. In this article, we will explore pros and cons of client- and server-side validation features that SurveyJS has to offer, so that you can decide which one to use in your project.

Read the full article on SurveyJS blog.

No-code Editor for Domain Models

SurveyJS — Mon, 03 Apr 2023 18:32:01 +0000

This article describes how SurveyJS can help streamline the form creation process in your team. The proposed solution allows you to generate client-side form code based on server-side domain models, and vice versa. Content creators who do not possess coding skills can edit the forms in a visual designer and deliver them to the end users without the need to involve the development team.

Form Input Validation: Ensure Valid, Meaningful, and Reliable Responses in Questionnaires and Online Forms

SurveyJS — Thu, 23 Mar 2023 08:44:16 +0000

Learn how to design an effective questionnaire and configure form field validation to improve the quality of your survey results.

A thoughtfully designed questionnaire can improve its completion rate and deliver a positive user experience. If your survey is clear and well structured, and questions are concise, survey takers will be willing to provide relevant and actionable data that you can use to derive valuable insights.

But how do you accomplish this? How do you organize an online questionnaire that doesn't overwhelm respondents and instead makes their experience enjoyable?

Proper Completion Time

Designing a questionnaire requires careful consideration of various factors. One of them is completion time, especially when it comes to online surveys. To maximize participation rates, limit the survey to no more than 10 minutes, or even shorter for mobile device users - around 7 minutes.

Suitable Question Types

Another critical aspect is selecting appropriate question types to ensure that the data collected will be suitable for further analysis and visual representation. Please refer to the How to Create an Effective Survey, Poll, or Quiz, and Increase its Completion Rate article to find out more on this topic.

Relevant Responses

Data validity is another key factor to consider when designing a questionnaire. To ensure reliable data, identify the types of data you want and do not want to receive. This approach can help avoid uncertainties by clarifying the data expected from respondents.

Different fields require different types of validation: validation for mandatory fields, numeric range validation for age or weight values, and file type validation for uploads in a specific file format, such as PDF, JPEG, or MP4.

Using SurveyJS, you can apply these and other data validation settings to your survey questions, ensuring that respondents provide accurate and reliable data. In the following sections, we will review some possible data validation options available with SurveyJS, which can help improve the quality of your survey data.

Form Input Validation with SurveyJS

SurveyJS is an open-source JavaScript library for building complex forms and surveys in React, Angular, Vue.js, Knockout, and jQuery. SurveyJS offers a variety of input validation options that can help ensure that respondents provide valid answers.

Mandatory Questions

Set the isRequired property value to true to ensure that a user doesn't leave a question unanswered before submitting a survey.

{
  "type": "text",
  "name": "last-name",
  "title": "Last name",
  "isRequired": true
}

Demo: COVID-19 Screening Form

If you use Single-Choice Matrix and you want to ensure that a user addresses all question in the rows, enable the isAllRowRequired option.

Demo: Single-Selection Matrix

Restrict the Number of Choices to Select

If you want to limit the number of choice options a respondent can select in Multiple-Selection Checkbox and TagBox questions, you can use the maxSelectedChoices property.

{
  "type": "checkbox",
  "name": "product-aspects",
  "title": "Key Features",
  "description": "These are some important aspects of the product. Select three features you find most important.",
  "choices": [
    "Technical support",
    "Price",
    "Delivery option",
    "Quality",
    "Ease of use",
    "Product warranties"
  ],
  "maxSelectedChoices": 3
}

Once a user selects the maximum number of items allowed, further selection is disabled for that question.

Numeric Ranges

You can use the min and max properties to set numeric ranges for questions that require a numerical input type.

{
  "name": "number",
  "type": "text",
  "title": "Enter a number from 0 to 100",
  "inputType": "number",
  "min": 0,
  "max": 100,
  "defaultValue": 0,
  "isRequired": true
}

Demo: Numeric Entry

Text Length

By setting the minimum or maximum length values for text entry fields, you can control the number of characters users can enter.

The minimum text length value can help ensure that users provide enough data and prevent them from submitting invalid and eventually useless responses.

{
  "type": "comment",
  "name": "service_improvements",
  "title": "How can we improve our service?",
  "validators": [
    {
      "type": "text",
      "text": "Please provide more information",
      "minLength": 10
    }
  ]
}

Setting the maximum text length value, on the other hand, can help prevent users from submitting redundant details in their answers. This will keep survey responses concise and focused on relevant information.

{
  "type": "comment",
  "name": "service_improvements",
  "title": "How can we improve our service?",
  "maxLength": 100
}

Maximum File Size

You can limit the size of files that can be uploaded as responses to questions.

{
  "type": "file",
  "title": "Please upload your files",
  "name": "files",
  "storeDataAsText": false,
  "allowMultiple": true,
  "maxSize": 102400
}

Demo: File question - Upload Files to a Server

Accepted File Types

When configuring a File question type, use the acceptedTypes property to restrict the file types that can be uploaded.

Regular Expressions

You can use regular expressions to implement more sophisticated logic and validate such input values as email addresses, phone numbers, or passwords.

{
  "name": "user-password",
  "type": "text",
  "title": "Password",
  "inputType": "password",
  "description": "Enter a password that contains at least one upper-case, one lower-case letter, a digit, and a special character",
  "isRequired": true,
  "validators": [
    {
      "type": "regex",
      "regex": /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s)(?=.*[!-@#$*])/,
      "text": "Your password must contain at least one upper-case, one lower-case letter, a digit, and a special character"
    }
  ]
}

Demo: Form Validation

Custom Validation Functions

Validation functions can be useful in verifying more detailed responses. For instance, when it comes to email address, you may want to validate not only that the entered value conforms to the email format but also that it belongs to the domain of a specific company.

Demo: Custom Form Validation Using an Event

Server-Side Validation

Use server-side validation in addition to client-side validation to prevent malicious submissions or errors.

Demo: Server-Side Form Validation Using an Event

Summary

Consider the following recommendations to ensure that respondents provide accurate data while taking your survey.

Validate All Fields

Ensure that all fields have validation on, including optional fields. This helps prevent incomplete submissions and errors and ensures that most of the information provided is valid.

Provide Help Text

SurveyJS highlights a field with an error and displays an error message next to this field.

In addition, you can customize error messages and provide clear instructions on fixing the error. Use plain language and avoid technical jargon.

Use Real-Time Validation

Real-time validation helps users correct errors as they type rather than waiting until the form is submitted. Set the checkErrorsMode property to onValueChanged to validate user responses as soon as users provide answers.

Lastly, always test your survey with a small group of people (ideally - from the intended target group). This ensures that the survey is clear and easy to understand and can help detect and correct errors or ambiguities in questions and choice options before it reaches the main target audience.

Conclusion

Designing effective surveys requires both skill and creativity. SurveyJS offers a wide selection of tools to help you create more engaging and insightful surveys and online forms.

How to create a Web Development Client Questionnaire with a TOC and add it to your JS application using SurveyJS.

SurveyJS — Thu, 16 Mar 2023 13:50:59 +0000

A step-by-step guide on how to automate data collection from your clients with an on-page website intake form.

What’s a web development client questionnaire?

A web development, or a web design, client questionnaire is a website intake form that consists of a set of questions that a web developer asks their client to get a better understanding as to what their expectations are towards a website they are ordering, e.g. their goals, preferences, the timeline etc. A website intake form typically covers such topics as a client’s target audience, branding, design preferences, functionality requirements, content strategy, and budget. By gathering this information, a web developer can create a website mockup that addresses the client’s needs and ensures that the final product meets their expectations. A well-developed questionnaire can also help both sides save time, establish clear communication and prevent misunderstandings throughout the development process.

Initially, client intake forms were in paper format. Nowadays, when the world is moving to digitalization and automation of any paper routine, it’s hard to imagine a web developer going to a client with a pen and a printed out paper form.

In this article we are going to create a web design client questionnaire using a free full scale demo of the Survey Creator library. This demo tool will automatically generate a survey model for us that defines the contents and layout of a form in JSON format. You can then add this form to your website using SurveyJS Form Library and have it rendered by any JavaScript framework you use. Once a form is incorporated into a page, you will be able to invite your customers to fill it out online right on your website, and then use the received results as a starting point in further more detailed discussion during a meeting.

Why choose SurveyJS Form Library to make a web form and collect responses?

SurveyJS is a fast, versatile, free, and open-source (MIT license) JavaScript client-side library for React, Angular, Vue.js, Knockout, and jQuery that can be used to build forms and surveys of any complexity. It has a data-driven approach — fully dynamic surveys defined as JSON schemas, with templating for UI elements. SurveyJS renders a form on a page of your website, collects responses from users and sends the survey data to your database. Since all survey data is in industry-standard JSON format, the frontend and the backend are separated, so you can use any server + database combination with it.

SurveyJS allows for great customization and flexibility. You have total control over the look and feel of your forms — you can select from a variety of built-in themes and personalize them with custom CSS code. It also supports automatic survey localization and the integration of third-party JavaScript components, such as bootstrap-datepicker or Inputmask, and many others.

Why self-host survey data instead of using online survey platforms?

Self-hosting survey data — both survey contents and their results — has several benefits over using third-party survey platforms. One of the main benefits is increased control of the data flow between server and client without any third-party involved. Only you decide where and how the data is stored, who has access to it, and how it is transferred. This is especially important when it comes to handling sensitive or confidential commercial information, as it can help ensure the privacy and security of the data. With SurveyJS, you have full ownership of the survey data and can finally avoid using third-party black box SaaS platforms.

Another important advantage is cost savings. Online survey platforms often charge a monthly fee for their services, which can add up over time. By self-hosting your survey data, you can avoid these fees at all.

Questions to ask in a Website Intake Form and best question types to choose

Most of the questions in a website intake form are open-ended questions, meaning that they don’t have predefined choice options. Among the most popular open-ended question types that SurveyJS ships with is a Text Entry field. It’s suitable for short (hopefully concise) answers. You can use it to, for example ask a client the following questions:

What is the purpose of the website?
Who is the target audience for the website?
What is the budget for the website project?
Who will be responsible for maintaining and updating the website?

To query a client about the project due date, you can either integrate a third-party date picker library, like jQuery datepicker or Bootstrap datepicker, or simply change an input type to “date” to enable the built-in calendar as shown below:

Another popular question type is Text Area or a Comment filed. This type of question provides more space for the respondent to write a longer or more detailed answer and would be suitable for such questions such as the following:

What features and functionality do you want on the website?
Is there a content strategy for the website?

If you’d like your potential client to share their color preference for a certain element of a new website, for example the background color that would be shared among all pages, you can use yet another question type that SurveyJS offers out-of-the-boxt -a Color Picker question. It allows respondents to enter a color in RGB, HSL, and HEX formats or select it with a visual interface.

In case a client would like to have their logo unchanged and it includes several different colors, you can select a Multiple Text Entry question and change the input type for each entry to “color”.

To enable a client to upload a file with a company logo, or any other existing branding guidelines and materials, add a File Upload question type to your form and restrict the allowed format to the one you prefer, for example SVG.

Setting up a TOC (Table of Contents)

The purpose of a table of contents is to provide a client with a quick overview of the content and organization of the questionnaire and allow them to easily navigate to a specific question they want. Adding a TOC to a questionnaire (especially if it’s a long one) can also positively affect the completion rate as respondents can see in advance how many questions there are in a form, what those questions are, and how many remain unanswered.

SurveyJS Form Library has a built-in TOC feature that can be enabled and disabled and repositioned to the left or right at your preference using the showTOC property with ‘true’ or ‘false’ values respectively.

JSON ‘schema’

As we already mentioned earlier, SurveyJS uses JSON objects to define the survey data model. As we were adding the questions to a web design client questionnaire in a no-code UI of the Survey Creator demo, it automatically generated such a schema in JSON format for us. Let’s take a look at it.


{
  title: "Website Intake Form",
  description:
    "Please fill out the form so that we can have better understanding as to what your expectations are of a new website.",
  logo:
    "https://api.surveyjs.io/private/Surveys/files?name=01deec1e-60dc-4438-8b8e-9a3f8a1afbbe",
  logoWidth: "270px",
  logoHeight: "120px",
  logoPosition: "right",
  pages: [
    {
      name: "page1",
      elements: [
        {
          type: "text",
          name: "What is the purpose of the website?",
          title: "What is the purpose of the website?"
        },
        {
          type: "text",
          name: "Who is the target audience for the website?",
          title: "Who is the target audience for the website?"
        },
        {
          type: "text",
          name: "What is the budget for the website project?",
          title: "What is the budget for the website project?",
          placeholder: "Enter a value in USD"
        },
        {
          type: "text",
          name:
            "Who will be responsible for maintaining and updating the website?",
          title:
            "Who will be responsible for maintaining and updating the website?"
        },
        {
          type: "text",
          name: "What is the due date for the website project?",
          title: "What is the due date for the website project?",
          inputType: "date"
        },
        {
          type: "comment",
          name:
            "What features and functionality does the client want on the website?",
          title:
            "What features and functionality does the client want on the website?"
        },
        {
          type: "file",
          name: "Please upload your company logo in SVG format.",
          title: "Please upload your company logo in SVG format.",
          acceptedTypes: ".svg"
        },
        {
          type: "multipletext",
          name: "Please specify the colors used in the company logo?",
          title: "Please specify the colors used in the company logo?",
          items: [
            {
              name: "Background color",
              isRequired: true,
              inputType: "color",
              title: "Background color"
            },
            {
              name: "Text color",
              isRequired: true,
              inputType: "color",
              title: "Text color"
            }
          ]
        },
        {
          type: "text",
          name:
            "Please specify the prefered background color for a new website.",
          title:
            "Please specify the prefered background color for a new website.",
          inputType: "color"
        }
      ]
    }
  ],
  showTOC: true,
  tocLocation: "right",
  questionsOnPageMode: "questionPerPage",
  widthMode: "static",
  width: "800"
};

As you can see, each text entry field is simply an object defined with the type property set to “text” and added to the elements array. The inputType property is used to specify the input type. We only used a few values in our questionnaire. Please refer to the Form Library API reference to see all accepted values for the inputType property.

To demonstrate how it looks, here’s a ready-to-use multi-step Website Intake Form with a TOC that we made with SurveyJS Form Library.

Where to start?

Once you have decided on the type of data you want to obtain from your client and selected appropriate question types, you are ready to generate a survey JSON schema or modify the one we’ve just created. You then need to install and configure (using that JSON file) a framework-specific npm package by following one of the dedicated getting started guides available for each frontend technology, and implement the backend. To help you get a backend up and running quickly, SurveyJS has prepared demo examples for ASP.NET Core, NodeJS, PHP, and WordPress that you can use for free.

If you want to know more about the architecture of all SurveyJS libraries, please refer to the “SurveyJS Architecture” guide.

Conclusion

Web development client questionnaire serves as a tool for collecting important information about client’s expectations, preferences, existing guidelines, and so on. Interviewing your potential clients with such a tool before proceeding to website development can save time during a meeting for both sides — a web developer can get ready by preparing further questions, while enabling a client to have more time to think about the information they are asked and provide well-considered answers. By adding SurveyJS to your web application, you can make the client interviewing process not only faster, but more secure — as it lets you stay in control of all sensitive respondent data you receive.

How to create an online quiz or assessment test using SurveyJS and add scoring and timing to it (Part 2)

SurveyJS — Tue, 07 Mar 2023 14:49:27 +0000

Survey Creator to Save the Day

Writing a few dozen lines in JSON to configure a 3-question geography quiz isn't a big deal. But what if it is a multi-page assessment test or several of them? Then, manual coding is simply not an option, especially if there are other ways to create such complex tests (!) without a developer involved.

We are talking about Survey Creator, an embeddable GUI-based form builder that allows you to have a self-hosted tool for creating, storing, and analyzing any educational assessment materials. Whether it is a pop quiz at the end of a class or a midterm exam - your end users, e.g., teachers, can configure the contents and appearance of such forms easily.

Auto-generate the form model in JSON

To demonstrate the functionally of Survey Creator, let's head over to its free full scale demo. Drop a radio button group question from the toolbox on the left onto the design surface to create a form.

Then, add a title, description, and assign values to the first question (“How many continents are there?” with four choice options: 4, 6, 5, and 7) to turn this form into our sample Geography test. The folded tabs on the right make up the Property grid, where users can change the question, panel, and form settings.

We will not focus on the basic functionality of the Survey Creator interface this time. Please refer to the dedicated end-user guide for Survey Creator for details.

Set the Correct Answer for a Question

The default functionality of the Property Grid allows you to set a correct answer for a question. To do this, switch to the question settings level, click the Set Correct Answer button under Data, and select the right answer in the Correct Answer popup, then click Apply.

Let’s add a few more questions to our test and move on to setting up timing. As we can include any question type supported by the SurveyJS Form Library, let’s add a dropdown menu to the same page and another radio button group to the second one.

Setup time limits in Survey Creator UI

To specify time limit, select survey-level settings, and under the Timer/Quiz section of the Property Grid, enter the number of seconds you want to allow for each page and/or for the entire survey to complete. You can also configure the time visibility and position to make sure students can self-pace to answer all questions.

The Survey Complete section

Like most other form settings, customized feedback pages can also be configured in the graphical interface of Survey Creator. If you only want to calculate scores by comparing choices with the predefined correct answers, then at the survey level setting, select the Survey Complete section and enter the rule in the Survey Complete markup using markup tags.

In order to display a personalized feedback based on the number of correct answers a student provided, in the same section of the Property Grid add a Dynamic Survey Complete page markup and specify an expression that triggers it as shown in the example below:

What's scoring?

Scoring is the process of evaluating or assigning a numerical value or score to a particular question of a test, exam, quiz, or other assessment form or to a single-choice option of such a question. It involves applying rules or criteria to assess the quality, quantity, or level of performance of the question or item being scored.

Scoring has various fields of application, including academic or professional settings, sports, games, or contests. In education, for example, scoring is used to assess knowledge, skills, or abilities of students in a particular subject or course. Scores can be used to compare students’ performance, determine grades or rankings, or provide feedback for improvement. In the banking sector, scoring can help evaluate loan applicants based on their answers and sort out trustworthy ones.

How to Add a Scoring to a SurveyJS Form

1.1 By default, the Property Grid doesn’t include a score property.
To add a custom property to the Property Grid, we need to call the addProperty(questionType, propertySettings) method on the Survey.Serializer object. The only difference between adding a custom score property to a question and to a choice option is the class you add it to. Since only a single answer is correct in a scored quiz, a score property is added to a Question class. On the contrary, there are no correct answers in a scored survey, so a custom score property needs to be added to the ItemValue class. Compare the following code:

To add a custom score property to questions:

import { Serializer } from “survey-core”;

Serializer.addProperty("question", {
   name: "score:number"
});

To add a custom score property to choice options:

import { Serializer } from “survey-core”;

Serializer.addProperty("itemvalue", {
   name: "score:number"
});

1.2 Now when the score property is serialized and included in the survey JSON schema, you need to assign its values for each question, the same way we specified the correctAnswer property earlier. Here is how the first question of our sample test looks like with both properties configured:

{
  "type": "radiogroup",
  "name": "count_continents",
  "score": 5,
  "title": "How many continents are there?",
  "correctAnswer": "Item 7",
  "choices": [
    "4",
    "6",
    "5",
    "7"
  ],
  "colCount": 2
}

Calculate the Total Score

1.3 To sum up the total score, you need to handle the onComplete event and use the following calculateTotalScore helper function with a question’s isAnswerCorrect method, which checks if the question was answered correctly.

function calculateTotalScore (data) {
  var totalScore = 0;
  Object.keys(data).forEach((qName) => {
    const question = survey.getQuestionByValueName(qName);
    if (question.isAnswerCorrect()) {
      if (!!question.score) {
        totalScore += question.score;
      }
    }
  });
  return totalScore;
}

Refer to this free demo showing how to configure a scored quiz to learn how to calculate the maximum score with the calculateMaxScore helper function.

1.4 Finally, once the total score has been calculated, we need to modify the completedHtmlOnCondition array by using different placeholders in the expression property that triggers a custom markup. Since we don’t simply count correct or incorrect answers but points assigned to each correct answer, the arguments change to {totalScore} or {maxScore} etc. Here is an example:

const surveyJson = {
  ...
  completedHtmlOnCondition: [{
    expression: "{totalScore} > 10",
    html: "<h4>Congratulations! You got {totalScore} points and passed the test. Well done!</h4>"
  }]
};

A Basic Geography Test Demo

You can now see our basic Geography Test built with Survey Creator in action. Click “Open Sandbox” to run free demo:

Conclusion

SurveyJS offers a wide range of built-in features for online tests and quizzes, including timing, scoring, a custom feedback or start page, and more. You can manually write a form model in JSON (please consult with the Form Library API references), run it for free in your app, and store the results in your own database.

However, if the complexity and number of assessment forms you deal with are significant, you might want to leverage the drag-and-drop UI of Survey Creator - a self-hosted form builder tool, which ships with a free full scale demo. Once added to your application, Survey Creator auto-generates a form model for you while your end users configure the contents and layout of a form in a no-code UI. The generated form is then stored and loaded from your database in the same JSON format and is rendered in your app.

The Creator UI is fully customizable, you can tailor it to the needs of your end users to make it even more pleasant and easy to work with. Add, remove or hide properties of survey elements in the Property Grid, modify visibility of default tabs or add your custom tabs or buttons — you name it.

With SurveyJS it’s never been easier to create, modify and run scored tests and surveys. Select your preferred frontend technology and get started with your first Survey JS assessment form today!