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.

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.

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.

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.

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

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.

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

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