Forem: _SurveyJS

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

SurveyJS — Wed, 25 Sep 2024 12:55:13 +0000

When it comes to managing surveys, having full control over your data is crucial. Relying on third-party platforms often means facing limitations in customization, data storage, or integration. DIY survey software allows you to create, manage, and analyze your surveys without compromise. These tools give you the flexibility to design forms that suit your exact needs while ensuring your data remains secure. Here’s a rundown of six web-based customizable survey tools, each with its own strengths in form creation, survey filling, data analysis, pricing, and accessibility.

1. SurveyJS

Overview

SurveyJS is an open-source, highly customizable survey software with a focus on flexibility and ease of integration into modern web applications. SurveyJS client JavaScript libraries support every common front-end framework that you could imagine, and even the ones you couldn't. It's even more flexible when it comes to the backend - you can integrate with any backend system of your choice.

Form Creation

The form management platform offers a visual form builder, allowing non-tech users to build forms quickly. Its drag-and-drop interface simplifies form setup, and it supports custom themes and layouts.

Form Filling

With responsive designs and mobile optimization, forms are easy to fill out on any device. SurveyJS also supports complex conditions, allowing for dynamic changes based on user input.

Survey Data Analysis

SurveyJS offers a Dashboard library that enables users to analyze survey results using various customizable charts and tables. It provides real-time feedback, so responses can be analyzed instantly. You have complete control over your data, allowing you to sync it with platforms like Google Sheets or your company’s business insights tools.

Pricing

SurveyJS offers a flexible pricing model by publishing its libraries on GitHub for free trial use. The survey rendering library is MIT licensed, allowing free use even for commercial purposes. However, for products like Survey Creator, a 'Basic' license costs around $499. For the Survey Creator, Dashboard and PDF Generator, you'll need a 'Pro' license at $899. Commercial licenses are perpetual, but access to updates requires an annual renewal. It’s ideal for both small businesses and large enterprises as it imposes no usage limitations.

Accessibility

This survey tool prioritizes accessibility, adhering to WCAG guidelines to ensure that forms are usable by everyone, including those with disabilities.

2. LimeSurvey

Overview

LimeSurvey offers an all-in-one solution for the entire form lifecycle, from building and publishing to collecting and analyzing results. It’s a great option for those who want to get started quickly without managing backend infrastructure. However, it does involve sending user data to a third-party platform, meaning less control over backend technology and potential difficulties integrating with existing authentication systems.

Form Creation

Though slightly less intuitive than some of the others, LimeSurvey offers a rich set of question types. However, its user interface can feel outdated and more suited to advanced users.

Form Filling

LimeSurvey offers a simple form-filling UI with responsive validation after publishing, but customization options are limited unless you self-host. Self-hosting allows you to apply custom CSS, but it requires significant development work and affects all forms. It's a great choice for users seeking a ready-made solution but less ideal for those who need extensive design flexibility.

Survey Data Analysis

LimeSurvey excels in data analysis, with strong export options and built-in reporting features. The reporting is detailed, making it a solid choice for data-heavy projects.

Pricing

LimeSurvey offers a free, open-source 'community' edition for self-hosting, which can be complex to set up. For easier use, their cloud hosting service starts at 23€ per month (billed annually) for 10,000 responses annually, with higher plans reaching 58€ per month (billed annually) for 100,000 responses.

Accessibility

It is compliant with major accessibility standards, but some users find that its default templates may require additional customization to be fully accessible.

3. Formium (by Formik)

Overview

Formium originated from the React library Formik, designed to simplify form creation in React by providing components that streamline initial values and validation processes. Building on Formik's success, Formium introduced an online form builder platform comprising an online form interface, SDKs for integrating forms into React applications, and a robust submission and storage system that connects with Zapier for automation. However, Formium appears largely unmaintained, with no updates to its SDK in three years and unanswered issues on GitHub, raising concerns about its future viability.

Form Creation

Formium features a user-friendly logic editor that allows users to set rules for form interactions, similar to SurveyJS, by specifying criteria for fields and defining actions, primarily limited to showing or hiding questions. However, its functionality is quite basic, lacking advanced features such as copying answers between questions or making fields conditionally required, and it does not offer tools for multilingual support, necessitating additional manual effort for translations; while the form editor is intuitive, users may feel frustrated by the absence of more comprehensive features that are yet to be implemented.

Form Filling

Formium offers two options for form display: a built-in form viewer on their online platform that is clean and user-friendly, and a React SDK that allows for simple rendering of forms with customizable components, providing significant flexibility for developers.

Survey Data Analysis

Formium allows users to send form submission results for storage and processing, but its dashboard lacks data visualization tools, requiring users to manually download CSV files to create graphs. While it offers 'workflows' for connecting to third-party services like Slack, email, or webhooks upon submission, any complex workflows must be managed through Zapier, which is a separate paid service not included natively in SurveyJS.

Pricing

Formium has a pricing model based on form submissions, which can be a drawback for larger surveys or those with high respondent counts. The lowest tier starting at $20 per month for 25 forms and 1,000 monthly submissions.

Accessibility

The platform allows developers to create accessible forms, though out-of-the-box accessibility depends on the developer's implementation.

4. Form.io

Overview

Form.io offers a comprehensive suite of tools for building, publishing, and managing forms, providing both front-end and back-end solutions to meet various user needs. Their products are delivered as Docker containers for easy deployment in your own environment, while also offering a hosted SaaS solution that, although lacking some features of the self-hosted option, allows users to quickly get started with form management.

Form Creation

Its form builder is feature-rich and allows for the creation of highly complex forms. The drag-and-drop interface is intuitive, but the learning curve can be steep due to the variety of options.

Form Filling

Forms built with Form.io are responsive and efficient, though customization often requires a developer’s input for fine-tuning.

Survey Data Analysis

Form.io's basic product lacks comprehensive reporting functionality, allowing only data exports as spreadsheets without native graphing capabilities; users can purchase a separate reporting module for $600 per month, which still offers limited reporting options. However, Form.io provides a robust developer interface for integrating form results with third-party services, including pre-built integrations like a SQL connector to sync data with custom SQL databases.

Pricing

Form.io's pricing model is primarily based on deployment rather than usage, starting at $600 per month for one enterprise-level project and API server management, with an additional $300 per month for enhanced security compliance features. Their hosted SaaS version costs $300 per month, offering unlimited forms but capping submissions at 1 million per month and 1,000 monthly PDF downloads, after which they encourage users to consider self-hosted options; both self-hosted and cloud versions can be trialed for 30 days, though accessing the self-hosted trial requires scheduling a sales call.

Accessibility

Form.io offers an accessibility compliance module aimed at helping users create accessible forms, but charging extra for this feature is considered unfair since accessible design should be standard.

5. FormEngine

Overview

FormEngine, developed by Optimajet as the successor to their original FormBuilder, provides a set of tools for building and deploying forms within React applications, featuring a Form Builder and a Form Viewer component. This front-end-only solution allows developers to integrate forms seamlessly into their existing applications while giving them the flexibility to manage data storage according to their preferences.

Form Creation

FormEngine requires integration into a React application, limiting its use to that framework. While it offers a customizable drag-and-drop interface for building forms, the complexity of implementing rules and actions - such as showing or hiding fields based on responses - makes it less accessible for non-technical users; these features rely on programming references rather than a user-friendly interface, which could be a barrier for those unfamiliar with coding.

Form Filling

The forms are fast-loading and optimized for mobile, ensuring a positive user experience across all devices.

Survey Data Analysis

FormEngine lacks built-in solutions for accessing and visualizing form submission results, leaving users to manage and process their data independently; although Optimajet offers a separate product called WorkflowEngine for data processing, it does not integrate natively with FormEngine and incurs additional costs.

Pricing

FormEngine offers two payment options: a perpetual license starting at approximately $899, which includes six months of updates and two months of support, allowing users to maintain the same version indefinitely; or a subscription model at around $1,499 per year, providing access across all subdomains and continuous updates as long as the subscription is active, with additional pricing options available for further inquiries.

Accessibility

FormEngine prioritises accessibility by ensuring their entire UI is keyboard accessible and incorporating aria labels throughout the application. This ensures that screen reader users can navigate and interact with the platform fully.

6. Tripetto

Overview

Tripetto is a visual survey tool that stands out for its unique flowchart-based form builder. It’s designed for building conversational-style forms and surveys.

Form Creation

Tripetto’s flowchart interface allows users to create forms that feel more dynamic and interactive. It is especially useful for creating surveys with a conversational feel.

Form Filling

Tripetto allows users to customize form colors, fonts, and choose from various ‘form faces’ that dramatically alter the form's appearance and functionality. While the ‘autoscroll’ face resembles Typeform and can feel gimmicky, the ‘chat’ face offers an engaging design but lacks practicality. The ‘classic’ face is the most user-friendly, providing a responsive experience with quick error feedback. Overall, Tripetto's form designs showcase a strong attention to detail and aesthetic appeal.

Survey Data Analysis

Tripetto does not offer any built-in solutions for accessing or visualizing form results after submission. Users must independently manage and analyze the submitted data without support from the platform.

Pricing

Tripetto offers several pricing options for its SDK. The cost for accessing the form runner is €900 per year, but this only covers one ‘form face’; additional licenses are required for each extra form face. If you also want to use the builder on your own webpages, the cheapest builder license is €699 per year, which includes standard question types and allows for five users. To enable custom question types, a more expensive builder license costing €3.900 per year is necessary. The most economical combination of the builder and runner licenses totals €1,599 per year.

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!

How to Create an Online Quiz or Assessment test using SurveyJS and add Scoring and Timing to It (Part 1)

SurveyJS — Thu, 02 Mar 2023 10:05:47 +0000

Introduction to the SurveyJS libraries and their benefits in education.

Online quizzes are a great way to engage your students and test their knowledge on a particular topic. With SurveyJS you can create multiple online assessment forms, add timing and scoring to them, customize their look, and provide immediate and personalized feedback to each student once they completed a test.

In the first part of the article, we will explore the SurveyJS product family and guide you through the process of creating a timed online quiz using SurveyJS Form Library. The second part will be devoted to various scoring features that the Survey Creator library has to offer, including how to assign a score to a certain question or to each or some of its choice options, calculate the total score, and more.

Why choose SurveyJS for online assessment forms?

SurveyJS is a product family of four open-source JavaScript libraries that enable you to build a full-cycle form management system within your in-house infrastructure:

SurveyJS Form Library - Enables you to configure and run forms and surveys on your website. (Free, open-source, under the MIT license).
SurveyJS Creator - An embeddable no-code form/survey builder with WYSIWYG UI. (Free-to-use here, but requires a paid developer license for commercial use).
SurveyJS Dashboard - Visualizes survey results as charts/tables in a dashboard.
SurveyJS PDF Generator - Exports survey responses as PDF files.

Being a client-side component, SurveyJS Form Library supports native integration with React, Angular, Vue.js, Knockout, and for those, who prefer to use jQuery or any other JavaScript framework, it offers a special package that utilizes Knockout to render form widgets.
Once you've created a test app for your preferred frontend technology, you are ready to get started with SurveyJS.

Install and configure SurveyJS Form Library

As an example, we are going to add the library to a sample React app. But you can find a dedicated step-by-step guide on how to get started with SurveyJS for other JavaScript frameworks in the Documentation section.

1.1 Install the survey-react-ui npm package using the following command:

npm install survey-react-ui - save

1.2 Configure the style of your form by referencing either of the two built-in themes (CSS files):

// Default V2 theme
import 'survey-core/defaultV2.min.css';
// Modern theme
// import 'survey-core/modern.min.css';

Create a form model in JSON

1.3 Now, we are ready to create a model of our test, which will describe its layout and contents. The simplest way to create a form model is to use a JSON-based schema. This schema contains different sections and parts of our form. Here is what such a schema looks like for a sample 2-page geography test:

{
  title: "Geography test",
  description:
    "Test how well you know geography with this multiple-choice challenge and learn about the continents, countries, oceans and vast bodies of water that are part of planet Earth.",
  logo:
    "https://api.surveyjs.io/private/Surveys/files?name=7c80d870-2ce5-450a-8013-b40725991e89",
  logoPosition: "right",
  firstPageIsStarted: true,
  completedHtml:
    "<h4>You got <b>{correctAnswers}</b> out of <b>{questionCount}</b> correct answers.</h4>",
  completedHtmlOnCondition: [
    {
      expression: "{correctAnswers} == 0",
      html:
        "<h4>Unfortunately, none of your answers are correct. Please try again.</h4>"
    }
  ],
  pages: [
    {
      name: "startPage"
    },
    {
      name: "page1",
      elements: [
        {
          type: "radiogroup",
          name: "count_continents",
          title: "How many continents are there?",
          correctAnswer: "7",
          choices: ["4", "6", "5", "7"],
          colCount: 2
        },
        {
          type: "dropdown",
          name: "largest_continent",
          title: "What is the largest continent by land area?",
          correctAnswer: "Asia",
          choices: ["Antarctica", "Europe", "Asia", "Africa"]
        }
      ]
    },
    {
      name: "page2",
      elements: [
        {
          type: "radiogroup",
          name: "count_oceans",
          title: "How many oceans are there?",
          correctAnswer: "5",
          choices: ["3", "5", "4", "6"],
          colCount: 2
        }
      ]
    }
  ],
  maxTimeToFinish: 90,
  maxTimeToFinishPage: 30,
  showTimerPanel: "top"
}

Here’s a brief explanation of every property of the model:

title: Displays the form’s title.
description: Explanatory text displayed under the title.
logo: Gets or sets a survey logo.
logoPosition: Gets or sets a survey logo position.
pages: Describes all the pages of the form. Here we have two different pages.

As you can see, there are two question types: a radio button group and a single selection drop-down menu. However, all other available question types can also be used to create a test. Please refer to the Page model and Question model API references to learn more about methods, properties, and events used in those classes. To turn a form into a test, the correctAnswer property has been specified for each question of the form.

Add time limits for self-pacing

Our sample test is also timed: the maxTimeToFinish property limits the time a student is allowed to spend to finish the entire test, and the maxTimeToFinishPage property limits the time allowed to answer all questions of a page. SurveyJS Form Library ships with other timing features, including test pausing and resuming that you can learn about in the Specify Time Limits guide.

Create personalized feedback pages

To make sure each test taker receives personalized feedback upon test completion, we used the completedHtmlOnCondition property. Let’s take a closer look at how it works and what other options to configure the feedback page are. By default, a SurveyJS form displays a basic ‘Thank you’ message at the end. If you want to customize the contents of this message, simply populate the completedHtml property with custom HTML markup. And if you deal with a test and you want to make sure each of your respondents sees an exact number of correct or incorrect answers, the markup should include one or some of the following placeholders:

{correctAnswers} — The number of correct answers.
{incorrectAnswers} — The number of incorrect answers.
{questionCount} — The number of questions.

const surveyJson = {
    completedHtml: "<h4>You got <b>{correctAnswers}</b> out of <b>{questionCount}</b> correct answers.</h4>",
...
};

If you want to go further and provide custom feedback based on the number of correct/incorrect answers, populate the completedHtmlOnCondition array with a series of objects consisting of a Boolean expression (make sure to use the placeholders mentioned earlier) and HTML markup. Once an expression evaluates to true, a test taker sees the text from the related object in the ‘Thank you’ message.

const surveyJson = {
    completedHtmlOnCondition: [{
        expression: "{correctAnswers} == 0",
        html: "<h4>Unfortunately, none of your answers are correct. Please try again.</h4>"
    }, {
        expression: "{correctAnswers} == {questionCount}",
        html: "<h4>Congratulations! You answered all the questions correctly!</h4>"
    }]
};

Create a Survey Model and Render a Survey

1.4 Now, when the data schema is configured, you want to instantiate a model by passing the model schema to the Model constructor:

import 'survey-core/defaultV2.min.css';
import { Model } from 'survey-core';

const surveyJson = {
  //...
}

function App() {
   const survey = new Model(surveyJson);
   return …;
}
export default App;

1.5 To render a survey, import the Survey component, add it to the template, and pass the model instance you created in the previous step to the component’s model attribute:

import 'survey-core/defaultV2.min.css';
import { Model } from 'survey-core';
import { Survey } from 'survey-react-ui';


const surveyJson = {
   //...
};


function App() {
  const survey = new Model(surveyJson);

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


export default App;

You will also need to configure the storage of your test result. Please follow the Handle Survey Completion guide to get the instructions.

A Basic Geography Test Demo

Run the demo below to take the test and challenge your knowledge!

That’s all for now.

In the second part of the article, we will show you how to add scoring to an assessment form.

How to Automate Customer Feedback Collection

SurveyJS — Mon, 20 Feb 2023 07:21:41 +0000

A comprehensive guide on how to configure a dynamic product feedback form for your JavaScript application using SurveyJS.

Why bother with customer feedback?

Collection of customer feedback on products or services you market is a critical and integral part of the product development cycle and is essential for business growth.

Understanding how customers feel about a product, a service, or a brand in general can help find opportunities for innovation, or simply detect customer service deficiency.

From Offline to Online

Widely spread customer feedback kiosks and devices do a great job in measuring overall feedback, but they have lots of limitations that we won’t be covering in this article. Due to the shift from brick-and-mortar to online shops and the rise of new technologies, a great deal of products and services are sold from a distance, where a seller and a buyer have never met in person. So, the only way to make sure a customer has a positive experience is to ask for some feedback online using the same website they used to place an order in the first place.

Ask for More Than an Emoji Can Tell

To get a comprehensive understanding of how customers evaluate their experience of interacting with your products or services, and receive actionable insights, an emoji feedback widget is simply not enough. So, it’s important to create a complex multi-step Product Feedback Survey that does not only provide you with answers, but enables you to analyze them afterwards.

To achieve this, you would need to use a variety of question types to collect both quantitative and qualitative data from your customers. You might also need to ask some of your respondents a follow-up question, hide one or more questions from others, or even implement several different survey flows that vary subsequent questions based on certain answers. Such a survey form needs to be tailored to match a specific design of your website or portal. Finally, you don’t want to spend hours designing it and weeks to have it updated.

Why is Convention Not the Option?

While online survey services can provide a simple and relatively low-cost (at least, in the short run) solution to form creation and embedding, they come with limitations in terms of customization and data ownership. Since the survey data is stored on third-party servers, concerns about data privacy and security are never off the table. Moreover, such online survey services might not be able to offer full adaptation due to internal constraints.

If you use the traditional approach to building surveys, which involves using HTML/JavaScript with custom validation logic, HTTP requests, and a database, even a minor change such as adding a new question would require you to make separate modifications to the server, database, and frontend code, and would take days unless you have a proper CI/CD pipeline in place.

Why Choose SurveyJS Form Library for Web Forms?

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. 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 offers a very straightforward approach to survey design and customization — 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 Slider or noUiSlider, and many others.

With SurveyJS you can improve implementation speed, make maintenance easier, and any changes made to a survey take mere seconds to reflect in the frontend. Since it’s self-hosted, it lets you retain full ownership of respondents’ data, without giving up privacy or being locked into an online survey service you can’t control.

Questions to Ask in a Product Feedback Survey

Before we jump into the ocean of possible questions you can use in your Product Feedback Survey, it’s important to plan an analysis strategy beforehand, so you don’t find yourself in another ocean — of disorganized and unmeasurable answers.

There are two major data types that can be gathered with a feedback survey — qualitative and quantitative.

Quantitative data refers to numerical data. It’s always collected using close-ended questions, and requires a specific answer (such as “yes” or “no”), a selection from a limited set of options, or a single value that could later be assigned to a predefined value range group.

Here are a few questions that you can use to collect quantitative data:

How did you first hear about us? (Search engine (Google, Bing, etc.), online newsletter, blog post, word of mouth, social media)

A radio button group is a perfect question type choice here, since it allows respondents to select only a single option. Received results can be grouped by answer and visualized using a classical pie or bar chart.

To what extent do you agree with the following statements? (Strongly disagree, Disagree, Undecided, Agree, Strongly agree)

This type of question is best implemented with a Single Selection Matrix Table. One of its main advantages is the ability to group several rows of questions that can be answered with the same set of options specified in columns. Then answers to each question from a group can be analyzed separately using charts with percentage values representing these options.

On a scale of 1–5, how would you rate your buying experience?

This is a Rating question type that asks respondents to rate or evaluate a particular aspect of a product, service, or in our case — buying experience, on a numerical or descriptive scale and choose a number or label that best reflects their opinion.

Have you used similar products before?

This is a simple “Yes/No” question, also known as a Boolean question. And we could use it as is, but it would leave us with no information on competitors that our dear customers also use. So, in order to get more details, we want to configure a conditional rule that triggers a follow-up question asking to specify competitors if a respondent replies with “Yes”.

Here is an extract from the JSON file that shows a visibleIf property with an expression: {have-used-similar-products} = true. The expression returns true if the answer to the “have-used-similar-products” question is “Yes”. This triggers a follow-up question named “similar-products”.

You can configure this rule by manually writing it in JSON, or use a free survey tool that auto-generates survey definitions in JSON format for you as you drag and drop questions and apply various configurations including skip logic rules in a no-code UI. Such a survey definition is called a Survey Model, or a schema.

Now let’s take a quick look at what question types are available to collect qualitative data.

Qualitative data, as opposed to numerical and more structured quantitative data, is descriptive data that provides a more in-depth understanding of the customer experience with the product and can give valuable insights into customer needs, expectations, and behavior. Since it requires open-ended questions, it gives a respondent enough space to speak out and share information that might be missed with pre-defined choice options.

Here are a few question types that you can use to collect this type of data:

What’s the main reason for your score?

This is a follow-up to the buying experience question we discussed earlier. Since there could be various reasons why a customer selected one of the low score values, instead of listing all possible reasons that led to a poor buying experience, it’s better to just let a customer describe it using their own words. A Text Area would be the best option: it allows users to fit enough information to give you an understanding of a particular situation, while limiting the number of characters that can be entered to prevent overwhelming you with pages of text.

What’s the ONE thing our product is missing?

This question requires a simple Text Entry field since you only need it to fit one phrase or a sentence.

Both quantitative and qualitative data are important in a Product Feedback Survey because they provide different types of information. As you can see from the examples we covered, they are most effective when used together. You can gather numerical information and use it to compare the product with others, track trends over time, and measure customer satisfaction. And when you need to get more details or simply want to learn how customers solve a certain issue and you don't have any data to transform it to quantitative questions - just let respondents speak for themselves!

SurveyJS in Action

To demonstrate how easy it is to configure a multi-step survey, here's a ready-to-use Product Feedback Survey made with SurveyJS.

Where to start?

Once you have decided on the type of data you want to obtain from customers, selected appropriate question types, and thought through your survey flow, you are ready to generate a survey JSON schema. 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 created 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

Customer feedback collection will always be an integral part of business growth as it lets you gain valuable and actionable insights. By introducing SurveyJS to your form workflow, you can make this process not only easy and enjoyable, but secure - as it lets you stay in control of all sensitive respondent data you receive.
Happy surveying!

How to Create an Effective Survey, Poll, or Quiz, and Increase its Completion Rate

SurveyJS — Thu, 09 Feb 2023 15:00:04 +0000

Creating effective, engaging, and impactful surveys, polls, and other web forms is a crucial step in the data collection and analysis process. A well-designed survey with simple and clear questions that flow will help businesses and organizations get more responses, thus allowing them to better understand the needs of their customers, employees, and stakeholders, and make informed decisions based on accurate and reliable data.

However, developing such forms requires consideration of several factors, such as choosing the right question type depending on the data you want to acquire from respondents, the format of the form, and its target audience. If you want to understand why the new Nike model of sneakers is not in demand, you need to use the language of your target audience, which is teens, to help you better understand the reasons behind the poor sales figures. Boring, unclear, and overly complex forms are often either not completed at all or left unfinished, forcing survey creators to look for new respondents to ensure the objectivity of the results obtained.

In this article, we will discuss popular question types, how they differ, and how to choose the right question type based on the data you want to obtain from your target audience. We will also cover common mistakes to avoid when creating a form to increase its completion rate.

Choose the Right Question Types

SurveyJS offers a vast variety of different types of input fields for its users.
You've got basic single and multi-line input fields, check boxes, drop-down lists, Booleans and radio groups, matrix questionnaires, Likert scales, file uploads, HTML embeds, and more. Every field supports input validation (both static and async), and expression evaluation (for example, assessing a respondent's age from their DOB input).

The right question type depends on the data you want to collect and the type of information you are looking to gain.

Let's focus on the most common question types.

Single- and Multiple-Choice Questions

This type of question allows respondents to select one or more answers from a list of options. They are useful for collecting data about preferences, opinions, or demographic information. A Radio button group, Dropdown boxes and Check boxes are the most popular questions in this category.

SurveyJS ships its dropdown menu with server-side filtering, lazy loading and a search-as-your-type feature out-of-the-box. It also allows you to hide selection options that have already been selected by a respondent to make the search even more convenient. And if you have a long list of choices to choose from, such as a list of countries, populate your dropdown menus with data loaded from a REST API web service. A Tag Box version of a Dropdown list is also available. It displays selected items in the input field as removable tags.

Rating Scale Questions

A Rating Scale question asks respondents to rate their agreement or satisfaction with a particular statement using a common 5-point or 10-point scale.

They are useful for collecting data about opinions and perceptions.

Ranking Order Questions

A Ranking Order Question allows your respondents to prioritize a list of choices in the order of preference, priority, importance, or some other factor. They are useful for collecting data about priorities and preferences.

Unlike the abovementioned types of questions, Ranking Questions require users to evaluate their preference towards all options available, not only one or two.

Open-Ended Questions

This type of question allows respondents to provide written answers to a question.

They are useful for gaining qualitative data on a subject or simply for collecting personal information, such as name, phone number, address, etc.

SurveyJS offers several options for open-ended questions to choose from: for short answers, there is a Text Entry Field. If you want a respondent to share an opinion, you can add a Comment Field to your form. If you need a group of related open-ended questions such as legal full name with short answers that require multiple text input fields - Multiple Textboxes is the way to go.

Likert Scale Questions

This type of question asks respondents react to a particular statement on a 5 to 7-point scale, such as "strongly agree" to "strongly disagree".

They are useful for collecting data about attitudes and beliefs.

Matrix Questions

This type of question asks respondents to answer several closed-ended questions with the same choice options, or rate multiple items or statements on the same scale. They are useful for collecting data about multiple aspects of a particular issue or topic.

SurveyJS offers both Single Selection and Multi Selection Matrix Table types, allowing you to choose the one that suits you best. If you deal with complex forms, such as a medical history form, or job application form that might require adding a duplicate option as a row of your Matrix Table - we've got you covered! Select Dynamic Matrix Table and let users add or remove duplicate rows whenever they need. You can also change the cell types of your Matrix Table from a simple Text Entry Field to a Dropdown menu, Check boxes, Radio Button Group, Comment, Yes/No - you name it.

Design Engaging and Effective Surveys

Besides choosing the right question types, and the right words relevant to the target audience, you might want to consider other factors that can make your surveys more engaging and effective and increase their completion rate. Below are some of them.

Clear and Concise Questions

It is essential to ask clear and concise questions that are easy for respondents to understand. This will help to ensure that the data you collect is accurate and valuable.

Personalize the Survey

Auto-Populate form fields and address respondents by their names to add a personal touch to the survey.

Keep it Anonymous

Anonymous surveys encourage people to be more open and honest in their responses.

Keep it Short

Avoid asking too many questions in your survey, as this can lead to frustration, loss of interest in taking the survey, and low completion rates as a result. Try to keep your survey as short as possible while still collecting the data you need.

Make it Visual

Consider using images, videos, and HTML to entertain respondents and make your survey more appealing and engaging.

Provide Incentives

Consider offering some swag, discounts, or prizes to encourage respondents to complete your survey.

We hope this information is of value as you researching ways to collect customer feedback and boost your business. As always, you're welcome to share your thoughts in the comment section below.
Remember: Asking is a powerful tool, one just needs to learn how to use it right.

Create a Multi-Page Form and Run it in an Angular app in Minutes with SurveyJS

SurveyJS — Wed, 18 Jan 2023 09:33:36 +0000

Whether you come from the healthcare or education sector, human resources, or anything in between - collecting sensitive data can become a maintenance nightmare, since you, as a form creator, must guarantee anonymity and privacy to your respondents (very often - to thousands of them) in order to remain legally compliant and ensure honest answers.

The software you use to create and host forms needs to be more than just a third-party, black-box SaaS platform where you’re locked into too many dependencies, and locked out of engagement, monitoring, and improvement of the actual service because of intellectual property laws.

Regardless of the type of form workflow you deal with - internal or external, it’s often the case that form contents require systematic and sometimes rapid changes, which as a consequence forces your software developers to constantly be involved in the creation and further modification of those forms.

So to solve the form automation issue, you want a no-code instrument for content creators that performs well even with hundreds of questions. You also want it to be fully customizable, so you can use custom CSS to make your surveys and forms look great and stand out with your brand’s own design language, not the same old default styles provided by third-party vendors.

You probably also want such a tool to enable you to apply complex conditional logic and branching to your forms so you don’t ask questions that are not relevant to certain respondents, and stay in control of your form workflow.
And it’s also handy if this form builder supports auto-localization and switches form contents at runtime from, say, English to another language based on a respondent’s system locale.

And what would really be cool is if this tool also knew how to save a form to your organization’s database as soon as it’s submitted, or send you emails or Slack notifications whenever a unique respondent takes your survey.

Quite a lot to ask for, right? We’ve got great news for you all! Such a form builder does exist, and it’s called SurveyJS!

Self-hosting SurveyJS is the easiest way to do both - ensure individual privacy and legal compliance, and offload content work from software developers. You would create simple surveys or multi-page surveys, run them, and store responses completely within your own infrastructure, thus being in total control of the data flow between server and client without any third-party involved.

It also gives your front-end developers the freedom to not have to be involved in form creation, thanks to an intuitive drag-and-drop interface that content managers can use directly.

In this article, you’ll learn the basic functionality of the Survey Creator interface. We will also create a job application form together and run it in a test Angular app.

A quick note for those who haven’t heard of SurveyJS yet: Survey Creator is one of the four open-source JS libraries of the SurveyJS project and once it is added to your application, it lets you build a secure and self-hosted form management system to generate multiple forms and run them using another SurveyJS library called Form Library.

We’ll talk about this library a bit later. Now, let’s get started!

So for this tutorial, I’ll be using a free and full-scale demo of Survey Creator that you can easily find at surveyjs.io by clicking the Create a Survey button in the top right corner of the page.

As you can see, the default UI of Survey Creator is organized in multiple tabs. We’ll mostly be focusing on the Designer tab as this is where forms are configured.

You can drag and drop questions and panels from the Toolbox on the left onto the design surface, and then use the Property Grid on the right to change the question, panel, and entire form settings. We’ll also be switching to the Preview during the design process to check how applied changes will look.

Now let’s see the final version of our job application form including the number of pages the form will have and the fields on each page. The form that we will create during this tutorial is composed of two different pages - Personal Information and Employment Details. The first page includes such fields as:

Full name
Date of birth
Current address
Contact email
And a field for resume file upload

The second page is dedicated to employment details and it covers current employment status, the position an applicant is applying for, expected monthly salary, and available start date.
As you might have noticed, some of the questions from the first page are grouped together inside a frame that is called a panel. A panel is a sort of container for other questions and panels. You can use it if you want to configure or modify several form elements at the same time.

A new page is created automatically, once you add an element to it. Let’s drop a panel onto the design surface. Alternatively, you can just click it to add it to your form.

Now let’s assign a name and a title to the form itself, the first page, and the panel we just added. A quick note here - the name is used for internal purposes like form configuration, while the title is what your respondents will see.

There are two places where you can assign a name to your form and its elements. The first option is to do it on the design surface, by simply clicking the title and typing its name. The other place is the property grid here on the right. First, make sure you are on the right settings level. Survey is always the highest level, and once it’s chosen the property grid displays the settings that are related to the entire form rather than its element. Page or panel-level settings, on the other hand, allow you to configure the behavior of a particular page, or of a set of elements, inside a panel.

I am also going to add a little description under the form title to thank an applicant for taking the time to fill out the form and a company logo to make the header of my form look unique and more complete.

Now let’s insert three simple text entry fields into our panel for First name, Surname, and Date of Birth.

Because it’s not a survey, I don’t want my questions to have numbers, so I will hide them by selecting survey level settings, and under Question, I select the “Hide question numbers” option from the Question numbering dropdown menu. As you can see, since I’ve made this change at the highest level, it’s applied to all questions inside the form.

Now I want to enhance my questions a bit. I’ll select an input type for each question and place the Surname field on the same line as the First name field. To do this, I need to select the second question, go to the property grid and under Layout, unselect the “Display question on a new line” option. I don’t really need to modify the input type for the first question, so I am going to leave the default text value here. But I want to make those two questions mandatory, to ensure that respondents don’t skip them while filling out the form. For this, I simply need to select the desired question and toggle the “Required” option. I’ll also set the autocomplete type for those questions to Name and Family-name, respectively, so that the user's browser can retrieve this data either from past values entered by the user or from pre-configured values if any have been saved by the user for autocomplete purposes.
For the third question, since the entry value is a date, I’ll specify the Date input type, which automatically applies the date format to the entry box.

Now let’s add one more panel for Current Address and insert three text entry fields into it for Street address, City or Town, and Zip code. I’ll display the second and third questions together on a new line. And, since the Zip code field requires digits as an input type, I will set the input type to Number. Now let’s quickly check the Preview tab to make sure that the form looks exactly the way I expect it to. As you can see in the Preview tab, when you try to type letters in the zip code field, letters are not displayed since only the Number input type is allowed.
The last question I want to add to this panel is Country. For this question with a long list of choices, the text entry question type is not the best option, so I’ll use a dropdown box here. There are several ways to populate a dropdown list with choices. The easiest way is to simply click each item either on the design surface or under the Choices category and assign a value to it. Another option is to type or copy and paste a list of choices in the Choices popup that appears as you click the Edit button here. But none of those options suit me because it's too time-consuming to enter a long list of countries. I also want my drop-down question to support a search-as-you-type option with server-side filtering, so a respondent can simply type in the input area to bring up a list of matches that have been filtered on the server side on the fly. To do this, I will populate my drop-down menu with data loaded from a REST API web service by adding a URL to the Service URL box under ‘Choices from a RESTful service’.

Although it’s a list of countries in this particular case, it can otherwise be used to populate a drop-down menu with any list of choices that you require. So what happens is that we store a list of countries in our database and the RESTful service sends a request to the server to get this list, filter the choices to match the respondent’s input values, and then send the list of matches to browsers. And the good news is that this drop-down functionality - whether single selection or multi selection - is included out-of-the-box, so you don’t need to integrate any third-party libraries.

Now let’s add the remaining two questions to this page and move on to the second one. The next question is Email address. To make sure respondents enter their email correctly, I’ll set the input type to Email and add a placeholder saying ‘Enter your valid email address in an 'example@example.com' format’. The placeholder is the area inside the entry field. As you can see, if a respondent enters a bunch of random symbols here, the input validation kicks in and doesn’t let them proceed to the next question in the form.

The last question on this page is Resume. To enable a user to upload their resume, I select a File upload element, name it, and restrict its type to PDF format by specifying .pdf in ‘Accepted file types’ under General. All files uploaded by users are stored in the SurveyResults binary JSON file (the default file), but you can certainly configure a separate storage of answers and uploaded files on your server. I’ll also select the ‘Confirm file deletion’ option to make it easy for respondents to replace unwanted files, and the ‘Wait for the upload to complete’ option to make sure no file goes missing.

OK. Great!

Now let’s quickly add a Radio button group to trigger creation of the next page. I opted for this question type instead of, say, checkboxes, because I need a respondent to select only one answer here. I’ll name the page Employment Details and assign a name and a title to its first question, which is ‘What is your current employment status?’ I’ll add a list of choices using the Choices popup this time.

The next question is a text entry field that says, ‘What is your expected graduation date?’ As you might have guessed, based on the list of choices for the previous question, this one is a follow-up question, and I only want it to be seen by those who answer ‘Student’ to the first question on the page. To do this, I’ll create a new conditional rule in the logic tab. To set a new rule, we need to select the main question, which in this case is ‘What is your current employment status?’ Then, we choose a condition for the dependent question to appear, which is that the reply ‘equals’ ‘Student’. If the condition is met, then the question ‘What year are you?’ is shown. Done.

Let’s go to the Preview tab, select ‘Student’, and there it is, the follow-up question appears.

You can also hide or show a form element or an entire page by setting up the visibleIf/enableIf property of a question, panel, or page under the Logic category of the Property grid.

The next question is: What position are you applying for? It requires a single choice from respondents, so I can either go with a Radio button group again or choose a drop-down box. Let’s select a drop-down menu and populate its items with the values I prepared. The last two questions are ‘Expected monthly salary in USD’ and ‘Available Start Date’, which as we already know requires the date input type.
Our form is almost ready. Let’s take a quick look at it in the Preview tab. Okay, it looks good but I don’t want it to take up the entire screen, so I’ll switch to the Survey settings level and under General, I need to change the width mode to Static and set the Width value to, say, 800px. By the way, you can also use any relative CSS units here - like vw and em. I’ll go with pixels this time. Responsive mode takes all available horizontal space. And Auto mode, as the name implies, automatically chooses between Static and Responsive modes depending on the type and width of questions in a form.

While we were configuring our survey, its JSON definition file that represents the survey model or schema is automatically generated for us.

Now all we need to do is add the Form Library component to run the form in our test Angular application. Let’s do it!
To add the Form Library component to your application, go to the Documentation and in the left menu under the Form Library, click ‘Get started’ and select Angular to see a step-by-step getting started guide. Alternatively, you can simply clone the library repository, install dependencies and open a ready-to-run sample Angular application in your IDE.

We’ll start by installing the survey-angular-ui npm package.

npm install survey-angular-ui --save

Then, we need to import the CSS file of the built-in theme to configure the style of our form.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  // ...
  "projects": {
    "project-name": {
      "projectType": "application",
      // ...
      "architect": {
        "build": {
          // ...
          "options": {
            // ...
            "styles": [
              "src/styles.css",
              // Default V2 theme
              "node_modules/survey-core/defaultV2.min.css",
              // Modern theme
              // "node_modules/survey-core/modern.min.css"
            ],
            // ...
          }
        }
      }
    }
  }
}

The next step is to instantiate a survey Model by passing the data schema to the Model constructor.

import { Component, OnInit } from '@angular/core';
import { Model, StylesManager } from "survey-core";

StylesManager.applyTheme("defaultV2");

const surveyJson = {
  elements: [{
    name: "FirstName",
    title: "Enter your first name:",
    type: "text"
  }, {
    name: "LastName",
    title: "Enter your last name:",
    type: "text"
  }]
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'My First Survey';
  surveyModel: Model;
  ngOnInit() {
    const survey = new Model(surveyJson);
    this.surveyModel = survey;
  }
}

Now we need to import the framework-specific rendering component and pass the Model instance to the component's model attribute.

// app.module.ts
// ...
import { SurveyModule } from "survey-angular-ui";

@NgModule({
  declarations: [ ... ],
  imports: [
    ...,
    SurveyModule
  ],
  providers: [ ... ],
  bootstrap: [ ... ]
})
export class AppModule { }
...
<survey [model]="surveyModel"></survey>

Finally, let’s copy and replace the sample JSON schema with the one we created.

Run the npm start command.

npm start

Here it is!

As you can see, it only took a few minutes to get started and run our form. The SurveyJS Library comes with over a hundred free demos, and it is completely free, so make sure to add it to your application today!