Forem: Gavin Henderson

Tripetto Alternative: A Comprehensive Comparison with SurveyJS

Gavin Henderson — Thu, 29 Aug 2024 19:15:28 +0000

This article is going to walk you through two form libraries for the web, SurveyJS and Tripetto.

Forms are a crucial part of the user journey on every website in 2024. We use it for everything like collecting basic information about users when they sign up to our site or allowing users to book an appointment, or fill out an application.

As a developer it can be hard to keep up with the ever changing demands that your business has on their forms. If you are manually coding all your forms it’s going to be time consuming to build new features but if you go for a fully managed form system, like Typeform, you lack the control you might need.

This is where form management platforms like SurveyJS and Tripetto come into their own, as they take all the hard work out of building forms but still leave you with the option to create advanced features and integrate with the rest of your system.

Intro to Tripetto

Tripetto is a suite of products that allows you to create and show forms to your users. They offer a fully hosted version of their form tools, a wordpress plugin and an SDK to integrate into your own application.

This article will focus on the SDK as it compares best to SurveyJS in terms of how you use it. All of the different Tripetto products are built using their SDK so most of this article is applicable to all of their product suite.

Tripetto takes a front-end only approach to their form SDK which means that they give you all the front-end libraries to create and show forms but they don’t give you anything to store your forms or your form submissions. The benefit of this is you can integrate directly into your backend, but downside is that it can be extra work to store your forms and results.

Tripetto works by using JSON based definitions, for your forms. Once you have created the form in the studio you will get access to a JSON version of the form which you can then pass into the form runner to display to your users.

Intro to SurveyJS

SurveyJS is a similar suite of products that also allows you to create and show forms to your users.

It takes a similar front-end only approach. This approach makes sense given that forms only exist on the front end, everything after that is just standard data handling that every web application will already do.

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.

Creation

Let's 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 serves as a full-featured form builder demo. It allows you to try out the form builder UI and build form JSON files without having to integrate the form builder into your application.

SurveyJS provides support for every common front-end framework that you could imagine, and even the ones you couldn't. They support:

Angular
Vue
React
Vanilla JS

It's really straightforward to integrate the form creator into your existing application. For example to add it your Vue application all you need to do is:



<script setup lang="ts">
import type { ICreatorOptions } from "survey-creator-core";
import { SurveyCreatorModel } from "survey-creator-core";

const creatorOptions: ICreatorOptions = {
  showLogicTab: true,
  isAutoSave: true
};

const creator = new SurveyCreatorModel(creatorOptions);
</script>
<template>
  <SurveyCreatorComponent :model="creator" />
</template>

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 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 are 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 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 user to get around all the options, but once they figure out where everything is 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. They even provide an API that lets you use machine translation, for example Microsoft Translator, to quickly translate lots of strings and allows you to then manually correct any mistakes.

Next let's take a look at the form builder available from Tripetto. Just like SurveyJS you can integrate it into your application using the SDK they give you. Tripetto also supports a list of popular frameworks such as:

React
Angular
Vanilla JS / HTML

It is very straightforward to add the creator to your existing application, here is an example in React:



import { TripettoBuilder } from "@tripetto/builder/react";
import "@tripetto/block-calculator";
import "@tripetto/block-checkbox";
import "@tripetto/block-checkboxes";
import "@tripetto/block-date";
// Import the rest of the blocks you want to enable

function ExampleApp() {
  return (
    <div>
      <h1>Example app</h1>
      <TripettoBuilder
        onSave={(definition) => {
          console.log("Form saved!");
        }}
      />
    </div>
  );
}

Rendering the TripettoBuilder component will then display the entire builder in a full page mode. You can pass through your CSS classes to style the form container however you want.

Overall the Tripetto form builder has a nice and pleasing user-interface. It is a bit quirky in a few places, for example it scrolls to the left and right with different settings panels, but you get over those very quickly. It's also quite robust, no matter how complex your form logic gets it is always snappy and easy to use.

They have all of the question types that you would expect to see inside a modern form builder. They have multiple text types and also have a matrix option which is really great for getting customer feedback.

Tripetto has a similar grouping feature to SurveyJS, except they call it iteration. When you start to do these more complex form flows then the Tripetto flow editor really comes into its own as a form builder.

Rather than showing a preview of the form on the main panel you are shown a representation of the ‘flow’ of the form. This allows you to really easily see complicated conditional forms at a quick glance and understand how they all go together. However, I find that the flow view they give you is confusing when you are creating a simple flow with just a few questions.

Tripetto also offers you the ability to translate your forms easily through their builder UI. You simply select your new target language and then you are prompted to complete a translation for each section of the form.

Filling

Next up let's look at the experience users will have when they come to complete a form in the system.

First let's take a look at how Tripetto handles form viewing. In the editor you can set what colours and font you want the form to use so you can match it to your branding.

The other thing you can set is the ‘form face’ which really changes how the form looks and acts entirely. Let's start with the default form face which is ‘autoscroll’. This is clearly modelled closely on the interface typeform uses, which is not a bad thing but it's certainly unoriginal. I personally think it's a bit of a gimmick, it stops you exploring the whole form and forces you to complete the form in the right order.

Another ‘form face’ they have is called ‘chat’. It's a unique way of displaying forms as a chat conversation rather than a normal form. It is a clever idea and they have made it look great and it could easily convince people they are interacting with a person or a chat bot. However, I think it is totally impractical, it essentially acts as a chatbot that you can never reach a person through, which as a user is very frustrating, for this reason I wouldn’t recommend using it.

Lastly the best form face is ‘classic’ which acts exactly how you would expect a form to work. It is very responsive and works well on all size devices and it feels snappy with quick error messages when you incorrectly fill out a form.

To render the forms you use the Tripetto SDK which has a Runner component which renders the form with the ‘form face’ you chose.

In general all of the form faces Tripetto offer look and feel very nice and they clearly have a talented design team that focuses on the small details.

Next let's see how SurveyJS handles showing forms to users. 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} />
    );
}

The default form filling UI is simple and clean and responsive and feels like a top tier form.

SurveyJS lets you do an exceptional amount of 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.

Results

After users have submitted their form you probably want a way to access the results and view them. Tripetto provides no solution for this, after the user submits the data you are totally on your own to deal with the data and visualise it.

On the other hand 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. It's 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 sync it to a Google Sheet if you want and view it there. You can view it in your company's existing business insights platform if you want.

Accessibility

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. This is something that is missing from FormEngine.

SurveyJS is entirely keyboard accessible which means it can be accessed using alternative access methods.

However, SurveyJS falls short in a few minor ways. For example it has some contrast issues in a few places as well as missing or incorrect labelling on elements.

Tripetto doesn’t have anything on their website about their approach to accessibility within their platform. The Tripetto editor fails the most basic accessibility tests, for example you can’t access it in any meaningful way using the keyboard. A screen reader wouldn’t work well either because there are aria tags missing or wrong across the whole editor.

When I took a look at the form pages themselves it didn't get much better. The elements are also missing aria tags. The form is just about keyboard accessible, but it deviates from the standard keyboard controls in many ways.

If accessibility matters to you, which it should, then you can only go with SurveyJS as Tripetto is missing the basics to support users of assistive technology.

Pricing

When it comes to pricing it's not straightforward to compare these two as they have multiple pieces to them.

For the SDK Tripetto gives you a few ways you can choose to pay for the SDK. If you only want to access the form runner then you need to pay £758.66 per year, this cost only covers one ‘form face’, you have to pay for a full new runner licence per form face.

If you want to use the builder on your own webpages then you need to buy a builder licence too. The cheapest builder licence is £589.20 per year, that gives you access to all the standard questions types and allows you to have 5 users setup on the builder, if you want more users you have to pay extra. If you want to allow custom question types then you have to pay for the more expensive £3203.14 per year builder licence.

If you want the cheapest builder and runner combination then you are looking at paying £1347.86 per year.

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 licence. Their core survey rendering library is MIT licensed which means it's free to use even for commercial uses. If you want to use the Survey Creator then you have to buy a 'Basic' licence for ~£422. If you want the Survey Creator, Dashboard and PDF Generator then you need a 'Pro' licence for ~£760.

The commercial licences from SurveyJS are perpetual meaning that you can use the software for the entirety of your lifetime, but to access updates and support you will have to renew your licence every 12 months. SurveyJS licence key can be used with a specific domain or group of domains and it will also work for subdomains within the specified domain or group without additional payment.

Conclusion

Overall both platforms are easy to use and have really nice user interfaces. They both let you build up your forms on their builder and then render them using their form runner library.

The biggest drawback for Tripetto is the lack of accessibility on their entire platform. They also have a steeper price which comes with more restrictions. However, their API design is really excellent, which makes it super simple to setup and integrate into your application.

SurveyJS on the other hand takes a serious approach to accessibility. If you want the ability to visualise your results out of the box then SurveyJS is your only option.

Overall, both SurveyJS and Tripetto are good options to help you build forms and display them to users. They are both really intuitive and easy to use.

I would encourage you to give them both a try and pick what works best for your needs!

Thanks for reading!

FormEngine Alternative: A Comprehensive Comparison with SurveyJS

Gavin Henderson — Thu, 01 Aug 2024 19:32:23 +0000

Forms sit at the heart of every good web application. As soon as you enter a web application you are filling out a form, from sign up all the way to completing a checkout flow.

The more businesses go online the first thing they do is set up online forms to help them reduce manual paperwork. Often times these forms can be complex and people expect complex validation and the form to adapt as its filled in.

It can be very hard to build good experiences with forms and they can go wrong in many many ways. At first forms seem like a simple thing to build but as you add more fields and forms the edge cases grow exponentially.

This article will compare two survey software tools, SurveyJS and FormEngine, and outline the pros and cons of each.

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.

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.

FormEngine

Next up lets take a look at FormEngine, which is a set of tools to help you build and deploy your forms within your React apps. FormEngine is built by Optimajet who have been in the form business for a while now, they originally developed FormBuilder, which was a React based form designer and viewer. FormEngine is the next generation of their form designer and form viewer, built from the modern web.

FormEngine is distributed as a React package that you can install in your existing application. The two main components they give you are a Form Builder component and a Form Viewer component.

FormEngine also takes a 'front-end' only approach to managing forms, leaving you to store and manage the data any way you want. In respect to data storage, SurveyJS and FormEngine have the same set of trade-offs.

Form Building

The place that you are likely to spend the most time is the form builder, so its important that you find it easy to use and that it lets you do everything you need.

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 serves as a full-featured form builder demo. It allows you to try out the form builder UI and build form JSON files without having to integrate the form builder into your application.

SurveyJS provides support for 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 Angular application all you need is:

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

@Component({
  selector: 'survey-creator-component',
  templateUrl: './survey-creator.component.html',
  styleUrls: ['./survey-creator.component.css']
})
export class SurveyCreatorComponent implements OnInit {
  surveyCreatorModel: SurveyCreatorModel;
  ngOnInit() {
    const creator = new SurveyCreatorModel({
        showLogicTab: true,
        isAutoSave: true
    });
    this.surveyCreatorModel = 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.

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.

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.

Next up lets take a look at FormEngine. Similar to SurveyJS you need to render the form builder into an application to use. Its worth noting that they only support React so if you want to integrate with any other framework you won't be able to use FormEngine.

Rendering the builder is slightly more involved inside FormEngine but they give you many options to customise how you integrate it into your React app. Here is an example piece of code to render a basic form designer in FormEngine:

export const Designer = () => {
  return (
    <FormBuilder
      view={builderView}
      getForm={getFormFn}
      formName={formName}
      initialData={({})}
      formStorage={formStorage}
      localize={localizeFn}
      onFormDataChange={({data, errors}) => {
        console.log('onFormDataChange', {data, errors})
      }}
      viewerRef={setRef}
      validators={customValidators}
      actions={{
        logEventArgs: e => console.log(e),
        assertArgs: ActionDefinition.functionalAction((e, args) => {
          console.log(e, args)
        }, {
          p1: 'string',
          p2: 'boolean',
          p3: 'number'
        })
      }}
    />
  )
}

Once you have rendered the form builder you can then start using it to build your forms. Like SurveyJS is uses a drag and drop interface, allow you to place the fields anywhere inside the form. They provide all the standard field types, including what they call 'pattern format' which allows you to create grids which are commonly used to rate an experience on a scale.

You can edit the style of each field individually. It gives you the basic options in a user interface but it also lets you enter CSS for the field directly inside of the designer. I would like to see a way to edit all the field styles at once, so that you can apply a theme.

The form designer lets you customise the behaviour of the form via rules, actions and the 'render when' property. The 'render when' property is what you would use to show or hide a question based on the answers given in other questions. Its not particularly easy to use as you have to programmatically reference other questions, there is no user interface to it. The rules section lets you set validation rules to for the form field, it has a lot of really nice default validation rules you can use on most fields and it also has a nice custom mode where you define the validation yourself.

Lastly, there is an 'Actions' section that shows you all the different triggers every field has, for example 'onChange', and lets you decide what action to do when the event happens. For example you can force a field to validate after a given action.

Overall the drag and drop editor in FormEngine is nice to use if you just want to put fields in your form and change what they look like. However, if you want to show and hide fields based on rules then its really difficult and poorly documented. This is a really basic feature that every form editor needs to have so its surprising that its as good as the rest of the editor.

Someone who is not technical would struggle to use anything more than the basic form fields inside of FormEngine. The fact that you need to understand basic code to show or hide fields locks many people out of using it. The 'actions' tab is also clearly built for developers as it references functions like 'onChange', which will be very familiar to a developer but won't be much help to a non technical person.

Form Viewing

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} />
    );
}

The default form filling UI is simple and clean and its responsive and feels like a top tier form.

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.

FormEngine also has a top tier FormView which is rendered in a similar way to SurveyJS via their React library. All of their components are based on the popular component library RSuite components which makes them great to use and they look great. The UI of the forms is responsive and gives users great feedback.

Overall, both display forms as you would expect them to and are very responsive.

Form Results

After users have submitted their form you probably want a way to access the results and view them. FormEngine provides no solution for this, after the user submits the data you are totally on your own to deal with the data and visualising it.

Its worth noting the Optimajet also sell a a product called 'WorkflowEngine', which you can use to process your data. That being said there is no native integration between WorkflowEngine and FormEngine and it is a separate product with an additional cost which is why I have not included it in this comparison.

On the other hand 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.

Custom Components

Both platforms have a great variety of form components to choose from, but there will always be cases where you want to create a custom component. When you do create a custom component you will want to access it within the form builder and the form viewer. Both platforms let you create custom components, so lets take a look at how you do it and which is easier and more flexible to use.

First lets take a look at SurveyJS and how to add a custom component using their React library, although you can do it in all the frameworks they support. To add a custom component to your form stack in SurveyJS you have to extend their existing Question class and define your own custom properties. The code below defines a color picker model and then sets two custom properties that you can use.

import { Question } from "survey-core";

const CUSTOM_TYPE = "color-picker";

export class QuestionColorPickerModel extends Question {
  getType() {
    return CUSTOM_TYPE;
  }
  get colorPickerType() {
    return this.getPropertyValue("colorPickerType");
  }
  set colorPickerType(val) {
    this.setPropertyValue("colorPickerType", val);
  }

  get disableAlpha() {
    return this.getPropertyValue("disableAlpha");
  }
  set disableAlpha(val) {
    this.setPropertyValue("disableAlpha", val);
  }
}

Once you have created the model you must register it as follows:

ElementFactory.Instance.registerElement(CUSTOM_TYPE, (name) => {
    return new QuestionColorPickerModel(name);
});

SurveyJS heavily relies on JSON to store the models of the surveys, because of this we have to setup how we want our new question to be serialised. The code below hooks into the existing serializer to define how to serialize the new question type to JSON.

Serializer.addClass(
  CUSTOM_TYPE,
  [{
    name: "colorPickerType",
    default: "Slider",
    choices: ["Slider", "Sketch", "Compact"],
    category: "general",
    visibleIndex: 2 
  }, {
    name: "disableAlpha:boolean",
    dependsOn: "colorPickerType",
    visibleIf: function (obj) {
      return obj.colorPickerType === "Sketch";
    },
    category: "general",
    visibleIndex: 3 // Place after the Name, Title, and Color Picker Type
  }],
  function () {
    return new QuestionColorPickerModel("");
  },
  "question"
);

After we have fully setup the model we need to move onto setting up the component that is going to be rendered. Again we do this by extending a SurveyJS class and defining the parts that are specific to our custom component. The code below defines the ColorPicker question which tells SurveyJS how to render the colour picker component given the fields defined by the model we created earlier.

export class SurveyQuestionColorPicker extends SurveyQuestionElementBase {
  constructor(props) {
    super(props);
    this.state = { value: this.question.value };
  }
  get question() {
    return this.questionBase;
  }
  get value() {
    return this.question.value;
  }
  get disableAlpha() {
    return this.question.disableAlpha;
  }
  get type() {
    return this.question.colorPickerType;
  }
  handleColorChange = (data) => {
    this.question.value = data.hex;
  };

  // Support the read-only and design modes
  get style() {
    return this.question.getPropertyValue("readOnly")
      || this.question.isDesignMode ? { pointerEvents: "none" } : undefined;
  }

  renderColorPicker(type) {
    switch (type) {
      case "Slider": {
        return (
          <SliderPicker color={this.value} onChange={this.handleColorChange} />
        );
      }
      case "Sketch": {
        return (
          <SketchPicker color={this.value} onChange={this.handleColorChange} disableAlpha={this.disableAlpha} />
        );
      }
      case "Compact": {
        return (
          <CompactPicker color={this.value} onChange={this.handleColorChange} />
        );
      }
      default:
        return <div>Unknown type</div>;
    }
  }

  renderElement() {
    return (
      <div style={this.style}>
        {this.renderColorPicker(this.type)}
      </div>
    );
  }
}

Lastly, you have to register the component using ReactQuestionFactory.Instance.registerQuestion. There is lots of other things you can do with SurveyJS custom components that I haven't shown, like specify the icon to use or captions. If you want to know more you can read the documentation on how to change other parts of the custom component here.

Next lets take a look at how to add a custom component in FormEngine. The first step is to define a component using the constants they give to you. The below example creates a basic button custom component, this means you can have a totally custom designed button.

import {Button} from '@mui/material'
import {boolean, define, oneOf, string, event} from '@react-form-builder/core'

export const newButton = define(Button, 'NewButton')
  .name('Button')
  .props({
    children: string.named('Caption').default('Button'),
    color: oneOf('inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'),
    disabled: boolean,
    onClick: event,
  })

Once you have created the component and designed it you need to pass it into the builder when you render it as well as the form view renderer so it can also render the custom component whenever its used. The code below describes how to connect it to the builder and to the form viewer.

const builderView = new BuilderView([newButton.build()])
const view = createView([newButton.build().model])

After you have done all of those steps you will be able to access your custom component in both the editor and the viewer with all the options that you have specified.

Pricing

When it comes to pricing its not straight forward to compare these two as they have multiple pieces to them.

First up lets take a look at the pricing for FormEngine. They provide two ways of paying, you can either buy a perpetual license or you can pay for a subscription.

The cheapest perpetual license ~£702 for the 'Startup' license, which gets you access to pretty much the whole product. It comes with 6 months worth of updates and 2 months of support, because it is a perpetual license you can choose to use the same version forever at no extra cost. The other perpetual licenses cost more and they give you more support or updates as well as permission to use your license on more subdomains. They also offer additional support packages that you can pick from.

As well as the perpetual licenses you can choose to pay for a subscription to FormEngine. Their cheapest subscription is ~£1171 per year, which give you access to FormEngine on all your subdomains as well as access to updates for as long as you pay the subscription. They have a lot of pricing options so if you want to learn more its worth reaching out to them to get access to their pricing options.

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 Survey Creator, 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 and support you will have to renew your license every 12 months. SurveyJS license key can be used with a specific domain or group of domains and it will also work for subdomains within the specified domain or group without additional payment.

Accessibility

SurveyJS published an Accessibility Statement outlining the commitment to accessibility and talks about all the standards they meet. This is something that is missing from FormEngine.

SurveyJS is entirely keyboard accessible which means it can be accessed using alternative access methods.

However, SurveyJS falls short in a few minor ways. For example it has some contrast issues in a few places as well as missing or incorrect labeling on elements.

If we take a look at accessibility within FormEngine we can see its something they have worked very hard on. Their entire UI is also keyboard accessible but they have also taken the time to carefully markup their entire application using aria labels. This means that anyone using a screen reader can access the document fully.

Both platforms will meet the needs of most users of assistive technology users but if its something that you have a specific need for its best to try out with your own assistive technology.

Conclusion

Overall, both SurveyJS and FormEngine are good options to help you build forms and display them to users. They are both really intuitive and easy to use.

The main draw back with FormEngine is that it is only available for React so if you have any other framework within your existing system you won't be able to integrate with FormEngine. Overall, their UI has a really nice 'feel' to it, especially when adding in fields or designing the look of the form. However, when it comes to using it for larger forms if you are not a developer you will struggle to use it because of the language and paradigms used throughout.

If you want to have the option to have visualisations then SurveyJS will be your only option as FormEngine doesn't give you any. You can build you own though based on the data, but that will be more work.

I would encourage you to give them both a try and pick what works best for your needs!

Thanks for reading!

Form.io Alternative: A Comprehensive Comparison with SurveyJS

Gavin Henderson — Thu, 01 Aug 2024 19:29:27 +0000

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.

Intro to Form.io

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.

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.

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

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.

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.

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.

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 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.

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.

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.

Storing the data

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.

Pricing

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.

Accessibility

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.

Conclusion

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!

Formik / Formium Alternative: A Comprehensive Comparison with SurveyJS

Gavin Henderson — Thu, 01 Aug 2024 19:25:35 +0000

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.

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.

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.

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.

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.

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!

LimeSurvey Alternative: A Comprehensive Comparison with SurveyJS

Gavin Henderson — Thu, 01 Aug 2024 19:18:53 +0000

Forms sit at the heart of every good web application. As soon as you enter a web application you are filling out a form to sign up all the way to completing a checkout flow where you fill out another form. The more businesses go online the first thing they do is set up online forms to help them reduce manual paperwork. Even though we heavily rely on these forms to build good experiences they are hard to get right and can go wrong in so many ways.

At first forms seem like a simple thing to build but as you add more fields and forms the edge cases grow exponentially.

If you want to learn more about making the choice between building your own custom survey software or investing in a SAAS solution then read SurveyJS' blog on that topic here.

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.

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.

Intro to LimeSurvey

LimeSurvey is a single tool which handles everything for you from start to finish of the form lifecycle. LimeSurvey will give you the tools to build the form, publish the form, share the form, collect results and analyse the results.

You get that entire form lifecycle form a single tool, which is great if you want to get started straight away without thinking about building a backend. The downside is that you will be sending user data to a third party and won't have any control over the backend technology. It will be tricky to set it up with your existing authentication systems.

Form creation

As a content creator or admin the place that you are likely to live in the most is the form creation panel so its important its easy to use and lets you do anything you want.

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.

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.

Next up is the LimeSurvey form creator. The editor is nice and interactive and snappy so you won't be waiting whilst building your large forms. They could do some work on the user journeys, you end up clicking a lot of buttons and going through a lot of pop-ups just to do simple tasks like add a new question.

Similar to SurveyJS it has all the fields you would expect from a modern form builder. Any text or option based question you will be able to ask.

For form logic LimeSurvey gives you access their 'Condition Designer'. The logic designer does take some time to wrap your head around. You set the condition of each field individually rather than the form as a whole. Its not the most intuitive way of doing it but it does make you break it down more.

If you want to add a custom field type to LimeSurvey its not quite as straight forward. You will have to build a custom PHP based plugin for the LimeSurvey. The documentation is not great, I found myself digging in user forums to figure out the code for plugins.

You can also provide translations in LimeSurvey, it even has the ability to auto-translate which can be helpful, although often inaccurate.

Its worth noting, there is a lot more settings in the LimeSurvey editor because it also has to consider the form hosting. Due to this you will see options around permissions and shareable links.

Once you've built the form you just hit publish and its ready to be filled in by anyone you want, which takes on nicely to the form filling side of the libraries.

Form filling

Once you have built the forms you will want your users to fill the form in and submit it.

Lets start with LimeSurvey this time. As soon as you have hit the publish button after building the form you will be given a link to share. The form filling UI is simple and clean which is how most users will want it. The design is clear, and the validation is quick and responsive, if you don't fill out a required field it will let you know.

You have very little control over the style of the forms, unless you are self hosting. If you are hosting it yourself you can insert your own custom CSS and change anything you want, however that will require serious development and it will change all your forms.

Next 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 LimeSurvey, 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.

Viewing 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.

LimeSurvey also lets you view all your responses in nice charts. Its not quite the same as SurveyJS and you don't get a choice over the charts, it chooses what it thinks is best for a question. If you don't want to think about it to much this can actually be really great as you can view the results without setting anything up. However, as with the rest of LimeSurvey you have pretty much no control over what the graphs look like.

LimeSurvey lets you manually export your data so you are free to import it wherever you want. You can also build a plugin to sync your data out of LimeSurvey but that is a lot more involved.

Pricing

When it comes to pricing its not straight forward to compare these two as they have multiple pieces to them.

LimeSurvey has a fully open source 'community' edition which is totally free to use, even for commercial reasons. However, to get it for free you have to host the entire PHP service yourself, which is quite the undertaking.

If you don't want to host it yourself, LimeSurvey has a cloud service that means they host it for you. By the looks of their website this is the one they really want you to go for. Their cheapest hosting option is £30 per month, this includes 10,000 survey responses per year. It then goes up to £100 per month if you want up to 100,000 responses per year, after that you will have to get a custom enterprise contract.

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 can see that it really depends what kind of payment model you are happy to be locked into. LimeSurvey will be cheaper upfront but then you will be stuck in a subscription for ever, including price increases. SurveyJS gives you ownership over your software that LimeSurvey doesn't but has a higher upfront cost.

Accessibility

SurveyJS published an Accessibility Statement outlining the commitment to accessibility and talks about all the standards they meet. This is something that is missing from LimeSurveys website entirely.

Both tools are keyboard accessible which means they can be accessed using alternative access methods.

LimeSurvey falls short in a few ways. It doesn't do a great job with screen reader technology, with missing label descriptions on a few buttons. Their default green on white buttons don't meet the colour contrast requirements which means that people with visual impairments could struggle to see them.

SurveyJS also falls short in a few ways, although they are in less critical places than LimeSurvey. 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.

Conclusion

Overall, both SurveyJS and LimeSurvey will get the job done to a standard most people would be happy with. I think overall the user experience is nicer with SurveyJS, every user interaction seems to have been thoughtfully considered which in parts doesn't seem to be the case with LimeSurvey.

The benefits of LimeSurvey is that you can get going on their cloud version in an instant without any technical knowledge. You can even host the community version yourself and then once you've set it up you don't need to dig into the backend at all or develop anything yourself. However, all your data is stored in one backend that you have minimal control over and is hard to integrate with.

SurveyJS on the other hand requires you integrate it with an existing frontend and backend which could be too hard for non technical users. However, the benefit is that you have total control over where things are stored and hosted. The form library feels like its part of your existing application. You can seamlessly integrate it with all your existing technology.

I would encourage you to give them both a try and pick what works best for your needs!

Thanks for reading!