FormIO Beta

fork me on github

A powerful and extensible form building & validation library

When it was originally written in 2010, FormIO's pretty basic requirement was to abstract and simplify the process of creating simple webforms for use on public websites. Since then considerable additions and advancements have been made and happily the library's architecture has allowed all this to happen without any breaking changes to the backend or frontend APIs.

Including builtin client and serverside validation for just about any kind of normal data, as well as mechanisms for linking fields, repeating inputs and grouping sets of related data into complex objects; in the several production deployments it has had since its first development there has never been a requirement it could not meet easily.

In terms of extensibility, the OO form field API allows creation of entirely custom form fields with their own layout, frontend behaviours and frontend/backend validation. You can find a class hierarchy of the builtin implementations on the project github page, as well as source code to the embedded example which serves as a guide on using the framework and implementing these features.

An example FormIO form

This field uses a custom validation function to verify your password. It simply matches "ohai".

(verify)

We have incremented the table striper to make this row the same colour as the password input

Other textual inputs...

This performs a quick check for validity using MOD10, not a full verification

Numeric fields allow any number of digits, with a single period.

$

This is an input for dollars and cents. Allows for pretty relaxed input (whole dollar, cents only, rounded decimal fractions, optional dollar signs)

This has the effect of normalising internet addresses with http:// as well as validating the URI

This is a raw snippet of html inside the form.
Consequently, we can use it to tell you there are more fields overleaf...

Here are a bunch of other time-related inputs in a fieldset

Input here can be pretty relaxed. Hours is all that is required, minutes and seconds can be added optionally.

This falls back to the jQueryUI date widget

at

We can also do both inputs combined for an exact time

-
at to at

You can use the repeater field type to repeat an input type as many times as you wish...

Repeaters work for any field type.
We have also started the repeater with three inputs.

You can of course have other data sent through. Below here is a readonly and a hidden field, which you will see in the output when you submit the form.

Cannot be changed
Complex field types

Dropdowns cannot be put into 'multiple' mode - this would give identical (but less usable) functionality to a checkbox list. You can use an empty value option along with a required constraint to force a selection, as above.

A list of choices
A list of options

This field has a dependency set to trigger a survey field to show when checked

:TODO:

And now for some other stuff...

An example image

When this field's value is 'cap', two CAPTCHA inputs will appear below.
If you have cookies enabled, once you have successfully submitted a CAPTCHA it will disappear from the form, and you should see nothing.

CAPTCHA Image Reload image
CAPTCHA Image Reload image
More dependencies

Obviously a more useful solution is something akin to a radiogroup which switches between options. Options can be programmed with a whitelist of field names to show when selected.