This content originally appeared on DEV Community and was authored by Gavin Henderson
Every good web application has user interaction at the heart of it. To allow users to input data into your application the best way to do that is using a form. That might be a large form for a long multi-step application process, or it might be a short login form with two fields. As online businesses grow companies are relying more on forms and getting more ambitious with what they expect from a form.
Forms can be difficult to get right, especially if you want to allow many different field types, have complicated validation and allow form logic. Manually programming all these options is difficult and time consuming and you will likely leave some bugs as there is so many pieces of state to keep track of.
If you have more than one form you would benefit from some kind of form creator. They allow non developers to create forms, publish them and analyse the results, allowing your developers to focus on building new features and content creators to keep making new forms.
There are many options in form creation space but this article will compare two popular form creation systems, Formium and SurveyJS.
Intro to Formium / Formik
The Formium story starts with a React library called Formik. It was created to make building forms in React a better experience for developers. React is notoriously difficult to build forms with because you have to use 'controlled' inputs for each field if you want to have reactive form validation. Controlled inputs can become unwieldy as you have to track all the changes to the HTML elements and then manually trigger all your event handlers.
Formik works by giving you access to <Form> and <Field> components and allows you to easily define initial values and build all of your form validation in one place. When it was first released it was huge and the React ecosystem jumped on it because it tackled one of the biggest pain points. If you are looking for a library to help you at the lowest level to manage the state of your forms then Formik is a good choice.
However, Formik didn't help tackle the form creation pain point development teams have. So, after the success of Formik the team extended their offering to include Formium, an online form builder platform. Formium is split into three distinct parts.
The first part of the platform is their 'online form building interface'. You don't have the ability to host this yourself, so your forms are built using their infrastructure. They also gives you the option to share forms and collect responses using their platform, so you don't have to write any code if you don't want to.
The second part of their offering is the SDKs they offer to render the forms you have built. Their SDKs allow you to fetch your forms and render them into your React application. They also let you send the result of the forms to their storage system if you choose. Their SDKs are only available in React and JavaScript.
The last part of their system is their submission and storage system. They have put a lot of work into their storage system to make it a really useful business automation tool. They connect directly to Zapier which in turns connects to thousands of other tools, so you can build these complex automations without any code.
🚧
Its important to note that Formium looks unmaintained and unsupported for the most part. They haven't pushed any new changes to their SDK in 3 years and the issues of Github go unanswered. The creator has since moved on and built new projects. Its not officially closed but I wouldn't be surprised if it was in the near future.
Intro to SurveyJS
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.
Form Creation
Both platforms come with a comprehensive form creation tool designed to allow you to create any form you want without writing any code. This is where you are likely to spend most of your time as an admin or content creator.
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 provides 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.
There is a dynamic panel that allows respondents to dynamically add a fresh copy of related question as they are answering a question that requires naming a list of something . For example, they can add an extra contact person and their details, or duplicate a group of fields to provide details for another employer they had, etc.
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. They also have a grouping feature, that allow 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. There is a ranking field allowing users to rank a set options top to bottom. 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 is the Formium form creation tool. The first thing you might notice about Formium is that it has a very small amount of field types to pick from. You get:
Radio
Checkbox
Short Text
Long Text
Email
URL
You can do a lot of basic forms with these fields and you can probably play around with those fields enough to make them fit your needs, but it will be tricky to do advanced things. You will be missing out on fields like dropdown, ranking and matrix based questions as these are not included. All of which can be found in SurveyJS.
To make things worse there is no way to build custom field types so you are stuck with what they give you. Its worth noting they do have a lot of cool fields listed but they are marked as 'coming soon' with no timeline.
Formium also has the ability to use logic to interact with each part of the form. Similarly to SurveyJS you setup rules to control the form. The logic editor is really easy to use, you just decide which field has to match which criteria and then what action to apply. Its easy for anyone to use and understand.
Again though the options are very limited. All it allows you to do is show and hide a question, there is no other 'actions'. That will probably be enough for basic forms but you will probably find it lacking in certain areas. You can't copy answers between questions or makes fields required depending on a previous answer. All of which you can do in SurveyJS.
Formium doesn't provide any tools to translate your form into other languages, so you have to do a lot of extra manual work if you want to share a form in multiple languages.
Overall the Formium form editor feels nice to use and find your way around but you will quickly find yourself wishing things were not 'coming soon' but already there.
Form Filling
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 Formium, 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 up is the form filling experience in Formium. There is two ways you can display forms to your users. The first is to use the built in form viewer they have in their online platform. The forms displayed in this are clean and simple, and for the end user are really easy to use.
The second way you can display your forms with Formium is using their React SDK. Their SDK gives you a form component that you can pass all your form data to and then it will render your component. The code to render a form is quite simple, you can do it like this if you are using NextJS:
export default function MyPage({ form }) {
return (
<FormiumForm
data={form}
components={myComponents}
onSubmit={async values => {
// Send form values to Formium
await formium.submitForm('your_form_slug', values);
alert('Success');
}}
/>
);
}
export async function getStaticProps(context) {
const form = await formium.getFormBySlug('your_form_slug');
return { props: { form } };
}
They provide you with default fields so you can render a basic form that looks just like the one hosted on their platform. The great thing about their SDK is it gives you a nice interface to provide your own components so you can customise them any way that you want without any limits. This level of customisation can be very powerful.
Working with form results
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.
The Formium platform lets you send the results to them for storage and processing. However, their dashboard has no way to visualise the data that has been submitted to you. You can view the results one submission at a time but if you want to see graphs you will have to download the results as CSV and build the graphs yourself in a spreadsheet tool yourself.
The thing that Formium boast about itself is that it has 'workflows' that allow you to connect to third parties. This is something that doesn't exist natively in SurveyJS because it doesn't come with a backend by default.
You can choose to send a slack message, email or a webhook event when a form submission happens. Other than that you can connect to Zapier to allow you to connect on to anything else. If you want do any kind of complex workflow then you have to do that all in Zapier which is a separate paid for service.
Pricing
When it comes to pricing its not straight forward to compare these two as they have multiple pieces to them.
Formik is a totally free and open source library so there is no pricing connected to it, even for commercial usage. However it has no cloud aspect attached to it.
Formium on the other hand does have a subscription based pricing model. Their pricing is based on the number of forms, submissions and data stored on your account. Their cheapest tier (other than the free one) is $20 per month which gives you access to build 25 forms and 1000 monthly submissions. All the tiers give you access to their automation platform.
SurveyJS on the other hand takes a totally different approach to pricing. The 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.
With all that in mind you need to weigh up the different needs you have and what kind of payment model you are happy to be locked into. With Formium you will have a lower cost up front but if you build up all of your application on Formium you will be locked into their monthly fee, including price increases. On the other hand SurveyJS for commercial usage can be used with a one time purchase, more for updates but those are not required. So you have to chose between SurveyJS' perpetual license or Formiums subscription.
Conclusion
Overall if you are looking to build basic forms then both platforms will let you build what you want. They both have nice user experiences and are really easy to navigate so you wont get lost in either.
However, if you want to build forms with slightly more complex fields you are going to have to use SurveyJS. With Formium you will find it quickly limits the types of forms you can build due to the lack of form fields they allow and logic they let you use. Whilst this not be an immediate deal breaker now you need to make sure you are investing time in a platform that you will be able to use for the foreseeable future and can grow with you.
If you really need the ability to have a no or low code solution with built in integration to other platforms then Formium is the platform for you. However, if you are willing to do the setup work required for SurveyJS you will have lots more flexibility with every aspect of the platform and you can build your own integration to any platform you want, including your custom backend.
I would encourage you to give them both a try and pick what works best for your needs!
Thanks for reading!
This content originally appeared on DEV Community and was authored by Gavin Henderson
Gavin Henderson | Sciencx (2024-08-01T19:25:35+00:00) SurveyJS vs Formik/Formium. Retrieved from https://www.scien.cx/2024/08/01/surveyjs-vs-formik-formium/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.