If you are looking for a fast and easy way to automate form workflow in your organization or simply need to create a survey, poll, or quiz and add it to your web application, then SurveyJS is the way to go.
SurveyJS lets you configure and run multiple forms for any use case you need to handle, whether it’s a contact form to collect leads from your website, or a product feedback popup to gather useful insights from your customers; with SurveyJS, you can have it all. Or you can go further and build your own self-hosted and secure form management system that lets you decrease the workload of your software developers thanks to an easy-to-use drag-and-drop user interface that doesn’t require any coding knowledge.
In this article, you’ll learn how to get started with SurveyJS, and run a Product Feedback survey in your application.
To get started, let’s head over to surveyjs.io. When you look at the tabs of the top banner, you will see sections for Features, Product overviews, a collection of over a hundred free demos for each product, a dedicated section for developers that contains useful links for product guides, the Source code, the Change log, and much more.
If you click the Features tab and scroll down, you will see a visual representation of what SurveyJS libraries are about and how they interact with one another and the database.
You might be wondering how SurveyJS is different from popular SaaS survey platforms that are out there.
Well, first off, what makes SurveyJS stand out from the rest is that unlike the majority of online survey services, we do not lock you in. SurveyJS is 100% self-hosted and it allows you to ensure individual privacy and legal compliance, because all sensitive respondent data is securely stored in your own database, not within a third-party cloud. Let’s take a look at the diagram again!
The SurveyJS project consists of four open-source JavaScript libraries.
The Form Library is totally free, MIT-licensed, and it lets you configure dynamic data-driven forms and run them in your web applications using a variety of front-end technologies. Whether you use React, Angular, jQuery, Vue, or even Knockout, SurveyJS supports integration with any of them. And SurveyJS is server- and database-agnostic, so you have total freedom here - any combination is fully compatible.
With the PDF Generator library, you can generate fillable PDF forms and save your forms as PDF files for easier and greener form management.
The Dashboard library allows you to quickly visualize and analyze your survey data with interactive charts and tables.
The fourth library is called Survey Creator, and as the name implies, it lets you design an unlimited number of fully-customizable, complex, multilingual forms in an intuitive and easy-to-use interface. But not only that! With Survey Creator, you can build and self-host your own form management system that any non-technical user such as a content manager can work with.
This brings us to our next important feature: SurveyJS uses an industry-standard JSON format as a common ground. Your entire form is defined as a data model (a ‘schema’) written in JSON, and the form UI is built automatically from templates using the model. So anytime something needs to be changed, all you do is edit the form in the no-code interface of your own Survey Creator, and its JSON definition file updates automatically.
But no more talking, you can easily see it in action, because SurveyJS has a free full-scale demo for Survey Creator that you can play with to make sure it’s got all you need.
Click “Create a Survey” in the top right corner to start with a form from scratch, or use a ready-to-use template and modify it to add your company logo, add additional questions, rearrange existing ones, and change the template completely!
To save time, head over to Demos and under Form Library, select the Product Feedback Survey demo and click Edit in Survey Creator.
The Preview tab lets you see how the form will look. Switch to this tab during the design process to check any changes made to the form.
The Designer tab is where all the magic really happens! Here, you can choose from a variety of form elements that include a Radio button group, a Rating question, Checkboxes, File upload, and more. You can also add a panel to your form, insert several questions into it, and modify them all at once.
The Logic tab is where you define the flow of your survey to make sure your respondents always get the most relevant questions. Take a look at the Preview tab once again. The first question is ‘How did you first hear about us’. If you reply ‘Social media’, an additional question appears asking to specify the platform.
To set such a conditional rule, you first need to remove the existing one in the Logic tab and click the Add New Rule button:
Now select the main question, which in this case is ‘How did you first hear about us’. Then, choose a condition for the dependent question to appear, which is that the reply ‘equals’ ‘Social media’. If the condition is met, then the question ‘Which platform?’ is shown. Click Done.
Let’s go to the Preview tab, select ‘Social media’, and there it is, the follow-up question appears.
While we were configuring our survey, its JSON definition file that represents the survey model or schema is automatically generated for us.
While we were configuring our survey, its JSON definition file that represents the survey model or schema is automatically generated for us.
Now all you need to do is add the Form Library component to run the form in your application.
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 your front-end technology 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 application in your IDE.
SurveyJS offers over a hundred free demos that you can use. Form Library is completely free, so be sure to add it to your application today.
We hope you enjoyed this article. Should you have any questions, feel free to post a comment below. For technical assistance, reach out to us at support@surveyjs.io.
Top comments (0)