Simpler to use than your typical form designer

Blank form template designers are usually the most complicated part of a digital forms system to understand and master.  The learning curve can be steep, and often overwhelming for many.  If it’s too complex—meaning that if it requires watching multiple 15 minute tutorial videos many times over like you basically have to do with GoCanvas—you won’t use the designer as much as you could. Instead, you will either hire someone to build the forms for you (in many cases this might mean hiring the professional arm of the software company that built the form designer software), give up/move onto something else, or live with the shitty forms you built on your own, knowing that the forms you built could be better if you had the patience and time to learn more about all the features and nuances of the designer.

The XForms approach to building out a form template designer was to make it intuitive enough to learn quickly, and to give the user fewer options at a time so as not to overwhelm the user just starting out.  Sometimes less is more, and we think this is true with form template designers.  While no means perfect, we feel that the XForms designer is easier to learn because of this approach.

A good analogy are tv remotes.  Your typical tv remote has a slew of buttons and choices.  The Apple tv has a mere 5.  And this lack of buttons doesn’t mean that the Apple tv remote is less powerful than a typical tv remote.  Some would argue that it’s more powerful, that the simplicity makes it way better and way more powerful than all the others.  Fewer buttons also means it’s more intuitive, elegant, and user friendly. See for yourself below.

What the XForms designer does have

Even though less is more, the form template designer in XForms packs a lot of power.  A lot of that power is mostly hidden and out of the way, or presented to you in context and only when needed.  Here’s a quick list of what’s included:

  • Version/revision control.  This is a mostly automatic feature.  A writeup about this feature can be found here.
  • Clone an existing form as a starting point for a new form
  • Start a new form from scratch, add as many as you want
  • Save a form as draft, and publish when ready
  • Revert back to an older version of a form template 
  • Add form controls easily and move them up or down on a form
  • Edit all of a control’s elements visually (even table grids), with toggles and switches
  • Break out forms into collapsible sections
  • Preview a draft form on a device or web app before rolling it out to your users

What it looks like

So, what does the designer look like and behave?  To illustrate, I’ve pasted a few screenshots below, along with some short animated gifs.

The screenshot above highlights each main block of the designer, so you can get a good idea of each block’s main function, as explained below:

Form Template Listing Area

As the name implies, this area is where you will see all of your form templates, listed out in alphabetical order.  To access a particular form template, just click on one, the screen will refresh and load that form on the main design window.  From here you can also add a new form template from scratch.

Version Control and Action Buttons

The top right of the designer screen is where you would interact when you want to do the following:

  • create a new version of a form (click on the brown “edit” button when you have selected an active/published form)
  • clone an existing one as a starting point for a new form (click on the green “clone” button)
  • revert back to an older version of a form (select a version from the “version” listbox)
  • save a draft version so that you can test it live, on real devices (only a user with admin credentials can do this)
  • publish a draft version of a form, which will automatically replace older versions

Note that the action buttons are greyed out or activated in context, and depend on the status of the form template you are viewing on the screen. In the screenshot above, we have loaded version 3 of the Near Miss Report, which is still in draft mode. 

To show how version control works, take a look at the animated gif below, which shows the Near Miss Report.  In this example, version 3 is a new draft version that has not been published.  Version 2 is the active published version of the form that everyone sees on their phones/tablets, and version 1 is an older version that was superseded by version 2.  In the gif below, note how the action buttons toggle on and off as we move between versions.

If you want to learn more about the version control feature in XForms, there’s a bunch of information about it in a dedicated writeup here.  

Main Design Window 

This is where most of the work is done, as it is the part of the form where you can get creative and add fields to your form.  You will notice that in XForms, things are done in sections.  A section is basically just a yellow divider on the form screen that separates data fields into groups.  Take a look at the screenshot below illustrating two sections of a form loaded live on an iPhone.

Now take a look at the form designer, specifically at these two sections illustrated above on the iPhone.  Note that they are listed in the designer as Section 3 and Section 4.

To edit a section, just click on the down caret on the right side of a section to expand it.  It will display the controls that are loaded in that section.  Here’s an animation of what that looks like.

Section Header

You can also make the section collapsible and default it to collapsed when the user first loads the form on their device.  This is available from the edit button of a section, which is displayed when you expand the section to show its contents.  Take a look at the animation below to get an idea of how this works.

Adding, Moving, or Deleting Controls Within a Section

Moving or adding controls to a section is pretty easy.  Just click on the “Add” button and then select which type of control you want to add.  You can also move a control up or down by just dragging and dropping the control with your mouse.  Each control has different options available to it, and which will appear when you first add the control and when you edit the control.  Here’s what that looks like in practice.

Most of the control types are fairly explanatory.  But the table grid control is more complex, as it is basically like an Excel sheet.  A future article will be written specifically for table grid controls.

Want to learn more about XForms?

Click/tap on the button below.