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!