All good businesses rely on data flowing between customers and the company. To let data flow into your company you can use forms to collect responses from customers. In the past these forms would have all been sent out and collected on paper and filed away, but as times move on this process is becoming increasingly digitised.
Forms are hard to get right, especially as you want to include more complex forms. For example you might have a large multi-step application process. As businesses go more online forms are going to get more and more ambitious. This is why using a form management library can be helpful because it lets you manage the whole form lifecycle in a convenient UI.
It’s important to be careful where you stored your customers data. Most countries will have data protection laws you have to make sure you meet, even extra if you work with sensitive data. On top of that you need to make sure your data is stored securely against bad actors. Every time you introduce a third party provider into your technology stack you are increasing the risk that you won’t meet these requirements, which is why lots of companies are opting to store their own data.
This article article looks at two popular form management systems, Form.io and SurveyJS, which both allow you to maintain control of your data, but taking different approaches to do that.
Form.io is a company that provides a set of tools that you can use to build up your form system. It lets you build, publish and manage all your forms easily.
They provide a full front-end and back-end solution to build and manage your forms. Their suite of tools is very extensive, letting you get the most of their products whilst letting you chose which parts best suit you.
They ship their products as Docker containers, which you host in your own environment but you don’t have to work to hard to get it deployed. Most cloud systems have native Docker support making it even easier. Their base system lets you build your forms and host them and collect responses. They then have additional parts if you want to build graphs from your results or if you want to generate PDFs of the submissions.
Form.io also provides a hosted SAAS solution if you don’t want to host it yourself. Their SAAS solution doesn’t have all the features they offer in their self-hosted solution but its a really good option if you want to get started quickly.
SurveyJS is a suite of products that all compliment each other to make building, publishing and managing forms easy.
SurveyJS takes a ‘front-end only’ approach to forms, which makes sense given that forms only exist on the front end, everything after that is just standard data handling.
Once the data reaches the backend you are free to save the data any way you like. This means that you can save it into your custom backend with ease and take advantage of all that great authentication you have already built. It also means that you don’t have to worry about another third party handling your data.
The diagram above shows the design ethos of SurveyJS excellently. Everything in the ‘client’ section is within the domain of SurveyJS and they build those for you. Everything on the ‘server’ section is totally up to you, so it will seamlessly integrate with your existing backend.
The downside is, if you want to build and publish a single form you are going to have to build up your own backend for that.
As a content creator or admin, the place that you are likely to live in the most is the form creation panel, so it’s important that it’s easy to use and flexible.
Lets start with SurveyJS. To get access to the form creator you are going to have to integrate it into your existing UI. Alternatively you can use their hosted MySurvey tool which will allow you to build forms.
SurveyJS supports every common front-end framework that you could imagine, and even the ones you couldn’t. They support:
Angular
Vue
React
Knockout
jQuery
Its really straight forward to integrate the form creator into your existing application. For example to add it your React application all you need is:
function FormCreator() { const options = { showLogicTab: true }; const creator = new SurveyCreator.SurveyCreator(options); return ( <SurveyCreator.SurveyCreatorComponent creator={creator} />
)
}
The output of the form builder in SurveyJS is a JSON object which we will use later with the form rendering library.
The form creator itself is a very nice modern UI that is extremely interactive and feels very snappy. You can drag and drop questions about without thinking about it and everything is intuitively where you would expect it to be, which is a tough job when there are so many settings. It even works pretty well on a mobile device which is pretty incredible.
It has all the field types that you would expect from a form builder. It has standard text inputs, checkboxes, radio groups (including matrixes)and drop-downs. There is a few drop-downs that you might not expect but could be very handy. There is a ranking field allowing users to rank a set options top to bottom. They also have a grouping feature, that allows a respondent to answer a set of questions multiple times if they need to. For example, they can add multiple contact people and fill in each of their details separately. An image picker, allowing a user to select from a group of images. Lastly it even has the ability to accept signatures which is a nice addition.
If you find you that you are missing a field type you can add your own type. They have a nice example in the documentation about how to go about doing that.
When it comes to logic it allows you to do everything you could possibly imagine using a dedicated GUI. You can hide questions, answer questions and reset answers. You can do this by defining as many ‘rules’ as you want, by setting a condition and an action depending on the condition. To developers this will feel familiar as it presents as a giant if statement.
It might take a while for a novice users to get around all the options, but once they figure out where everything in they will quickly find themselves setting up form logic with the intuitive logic options.
Once you have the form built with all the fields and logic you want you can add translations to each question. You can add all the languages you want to support and input all your translations for the strings in each page. This makes it a breeze to translate large forms with complicated logic.
Next up lets take a look at the form creation process inside of Form.io. The Form.io creator works exactly how you would expect with a nice drag and drop interface for all their fields. They provide a large range of fields, split up into different sections. It allows you to use all the standard text fields as well as complex grid entries so you can create any form that you can imagine. They also give you access to various layout elements so can put sections into tabs and columns to meet your needs.
Form.io has very extensive form logic, validation and conditional display of different fields. The logic section on each field lets you set a list of ‘triggers’ and then you define an ‘action’ to do after the trigger. You can use these to update the values of different fields depending on answers, it even allows you to run your own javascript as an action. The conditional options to show and hide fields are just as extensive.
Whilst the basics of Form.io is intuitive to use and easy to use as you venture more into the complex setups you might find yourself getting lost or tied in knots around the logic sections as its easy to lose your place. They give you the power to do anything you want but the downside is that it could be overwhelming for novice users.
First up is SurveyJS and its form filling experience. To render the form you simply pass JSON object the form creator gives you into the survey component the like so:
function Survey() { const survey = new Survey.Model(json); survey.applyTheme(themeJson); survey.onComplete.add((sender, options) => { console.log("Form filled!"); }); return ( <SurveyReact.Survey model={survey} />
);
}
Similar to Form.io, the default form filling UI is simple and clean. Again its responsive and feels like a top tier form.
However, SurveyJS lets you do an exceptional amount customisation. You can change every single colour that is shown on the form using a fully integrated CSS Theme Editors with a panel of UI controls.
Next lets take a look at how Form.io lets you display forms to your users. You have two choices, you can choose to host it directly via their platform without deploying any of your own code. This way is the easiest but will force you to send users to an external page from the rest of your website.
Your other option is to embed it into your site using one of their web libraries, they support:
Angular
React
Vue
Vanilla Javascript
Both options result in forms that look pretty similar and are easy to use. Their UI libraries are pretty lightweight and just wrap the core library in framework specific details.
If you are willing to dig into the CSS you can customise your forms as much as you want as they don’t provide tools to change how your forms are displayed from their form builder UI.
The last step in the form lifecycle is viewing and comparing the results of the form.
SurveyJS provides a ‘Dashboard’ library to allow you to analyse your results in a meaningful way.
You get access to just about any visualisation graph that you could think of. As with the rest of SurveyJS the customisation is pretty much unlimited. Its a really great way to get a high level overview of the results of your forms.
The great thing with SurveyJS is that you can actually view the data however you want because you fully own it and control it. You can be syncing it to a Google Sheet if you wanted and view it there. You can view it in your companies existing business insights platform if you want.
With Form.io by default you don’t get much reporting functionality in the basic product. It lets you export your data as a spreadsheet via their UI but there is no way to create a graph natively. You can chose to buy their reporting module separately for £600 per month. It lets you setup a reports however they are still quite limited.
Form.io gives you a nice developer interface to your data so you can build any integration to work with your form results, so you can send them to any third party or any other service in your application. They give you some pre built integrations like a SQL connector so you can sync the database to your custom SQL database if that is what the rest of the system uses.
Both SurveyJS and Form.io take different approaches to data storage, each with its own set of trade-offs so you have to decide what is right for your use cases.
First up is SurveyJS, which doesn’t include any storage capabilities. However, instead what they expect you to do is to integrate it into your existing backend and store the data there, next to the rest of your application.
The benefit of this approach is that you have the ability to store your data anywhere you want. You could store it in an encrypted spreadsheet or you can store it on Redis, absolutely anything is possible. This means that you can match your data storage solution perfectly to your requirements without having to make any sacrifices.
The downside to that is that you have to build it all yourself, if you want to store it in a database you have to write all the SQL statements yourself. If you have a database for you application already this is likely no problem as you will have done all the hard work but if you are starting from scratch it could be a large investment of time up front. So you are gaining full flexibility but potentially at the cost of upfront engineering time.
Next up lets look at how Form.io stores data. Form.io is setup and designed to be self hosted, they do this by giving Docker containers to host. However, they don’t include database hosting in their container, which is by design. This means you can choose to host your database anywhere that you want. Form.io is built to use a MongoDB database to store its data, so you have to host a MongoDB database somewhere.
Ultimately when it comes to data storage you have to choose between full flexibility and investing time or less flexibility but less time investment.
When it comes down to comparing pricing between these platforms it can be difficult as they both charge for different parts of their system.
First we will look at how Form.io prices its products. Their pricing model is based around how you deploy their services rather than how much you use the services. The entry level is $600(USD) per month, which includes one ‘enterprise level project’ and one ‘API server management’. For an extra $300 per month you can get an API server plus which includes extra security compliance features.
Their hosted SAAS version of their product has a single price point of $300 per month, which gets you access to almost all of their product suite hosted for you. You have unlimited forms on their system but you are limited to 1M submissions per month and 1000 monthly PDF downloads. If you exceed those limits then they push you towards their self hosted option, which overall seems to be where they are pushing their customers, based on their website.
You can trial their self-hosted product free for 30 days, but you have to schedule a sales call with them to get access to it. Alternatively you can test it with their cloud hosted version free for 30 days.
SurveyJS on the other hand takes a totally different approach to pricing. They publish all of their libraries on Github for you to install and try out entirely for free. However, if you want to use their products for any commercial uses then you have to look into buying a commercial license. Their core survey rendering library is MIT licensed which means its free to use even for commercial uses. If you want to use the Survey Creator then you have to buy a ‘Basic’ license for ~£422. If you want the Dashboard and PDF Generator then you need a ‘Pro’ license for ~£760. The commercial licenses are perpetual meaning that you can use the software for the entirety of your lifetime, but to access updates you will have to renew your license every 12 months.
When publishing forms you need to make sure they are accessible for everyone, including users who rely on assistive technology. To measure this we can rely on the WCAG guidelines which describe how a website can be accessible.
SurveyJS published an Accessibility Statement outlining the commitment to accessibility and talks about all the standards they meet.
Form.io sells an accessibility compliance module which helps you build accessible forms. Whilst it is great that they have built those features, I think it is unfair to charge extra to create forms that are accessible for everyone. Their accessibility module works by disabling some form fields that are inaccessible and also changes the style of their forms so that they match the US Web Design System.
Without their accessibility module the forms themselves are accessible for the most part. The actual form fields are all labelled correctly but the footer and navbar they use has some link tags used incorrectly and text without sufficient contrast.
SurveyJS also falls short in a few ways, although they are in less critical places than Form.io. SurveyJS also has contrast issues in a few places as well as missing or incorrect labeling on elements.
I think both platforms could do with improvement in this area but if I had to pick a winner I think that SurveyJS does a better job overall.
Overall, both SurveyJS and Form.io will get the job done and allow you to build the forms that you want. I think overall, the user experience is nicer and easier for novice users in SurveyJS than it is in Form.io which can be a little clumsy in places.
The main pro to Form.io over is that they give you a back-end solution you can host yourself, so you can control where your data is stored without building a custom backend. However, SurveyJS gives you more flexibility over your data storage.
You also have to choose between a perpetual license for SurveyJS or a monthly payment forever for Form.io.
I would encourage you to give them both a try and pick what works best for your needs!
Thanks for reading!