Form Builder Part 1: How to build a form

In this video we’re going to build a form. To get started, go to the Forms Library and click the Add New button in the top right hand corner. In this example, we are going to create an incident report. We’ll enter the name and click Create.

In the form builder we’ll start by adding a workflow step.

Click on it to open the section properties. The panel on the right contains all of the properties that can be set for whichever form element is currently selected. We’re going to title this step Initial Incident Report.

We are then going to add the fields required by selecting from the builder on the left-hand side. You’ll notice that the list of elements is grouped by type including short and long text field elements, Elements that prompt the user to make a choice such as dropdown lists and checkboxes, Date and number fields, Contact information, Media that allow the user to attach files, photos and signatures, and Elements that help with formatting of the form such as divider lines, headings, text instructions, and subsections.

Let’s start by adding a user select field. This type of field will provide a dropdown list of all currently active employees. We’ll then select the field we just added to set its properties. We’ll name this field “Reported By” and click the toggle to make it a required field.

We’ll add additional fields for Date of Incident, Location of Incident, Time of Incident, Description of what happened, the option to attach photos, and a signature.

We want the first four fields to all be on one line. To format this, we are going to change their column width to 1 column wide each. We’re also going to change the Description of Incident and Signature fields to fill the full width of the form by setting their column width to the maximum of 4. You’ll notice that as the column width changes, all of the other fields resize automatically to fill the space as best they can. This is called Responsive Design. Which means that forms in Wombat will automatically respond to the size of the device they are being displayed on. If we click to see what the form will look like on a tablet, the form is now two columns wide. And when we’re on a mobile device, the form is only one column wide. The form elements stack as the device gets smaller.

It’s recommended to use the desktop view when building forms because this is also the layout that is used when you print to PDF.

We’d also like to change the time field to be right next to the date field. To swap the position of the these fields, simply drag and drop to where you want it to be. When dragging, the dotted lines shows where the drop targets are. Make sure that your mouse pointer is overtop of the drop target before you let go.

Next we are going to save changes and then publish the form so that it is available for users to start filling out. We can see here in the forms library that our new form is ready for use.

In Part 2 of this series, we’ll talk about adding in conditional logic to hide and show certain fields based on how users answer questions on the form. Thanks for watching!