Last Updated: July 9, 2021

Form Builder Overview

On Steer, the first part in creating a Workflow App is to build and design your Form. The form builder has a drag and drop interface which makes it easier for you to design your form. Also, this Form will be shared among users on your Workflow, which means that in the Form Builder, you will build and design sections of forms that you can hide and show for appropriate users involved in this particular process. You can set who can read, edit, and see specific form sections by configuring your form's user settings once you finished designing your form.

Parts of the Form Builder

Anatomy of the Form Builder

1. Workflow App Title: This shows the unique name you gave your Workflow.
2. Form Builder Actions: You can choose to Delete, Save your current Workflow App configuration as Draft, or Cancel the changes you've made on your Form Builder.
3. Preview pane: Preview and simulate your current Form Builder configurations as it would appear in Web/Desktop and Mobile (Upcoming Feature).
4. Revision Tools and Proceed: Undo, redo, and show Form Builder action history (Upcoming Feature). Clicking on Proceed will save your Form and moves you to the Process Flow designer.
5. Form Settings Tab: Shows additional customization tools such as Header and Footer.
6. Workflow Creation Step Indicator: Shows your current position in the Workflow creation process.
7. Section Header: The name of your form section. You also have the options to Duplicate, Move, and Delete the current section on the right-hand side of the Section Header.
8. Default and System Elements: Contains all drag-and-drop form elements that you can place on the input fields in your Form.
9. Section Description: A description field designated to provide additional information or instructions on how users may fill in the fields of the form section.
10 Input Fields: Contains all form fields that you can modify by adding new or deleting existing fields and drag-and-dropping Default or System form elements.
11. Rows and Grids: Allows you to add rows and different types of grids such as table/data grid, reference table and process table when you expand the (˅) down arrowhead at the bottom of a section on your Form.
12. Add Section: Allows you to add a new form section below the existing one.

Tip: You can also enable the Render Form on Wizard View as shown below, which helps you jump over to the different sections in your form. Just click on the Form Settings tab beside Tools tab, and tick the checkbox to enable Render Form on Wizard View.

The Component Configuration

Component Configuration settings

When you configure a field with a Default or System element, you will see the Component Configuration popup menu. These are the common configuration fields that you will need to set up for each form elements:
1. Field Configuration Tabs: Aside from basic Component Configuration, you can also choose to set advanced configurations, such as Conditions, Validations, and Global Search.
2. Field ID: Serves as the unique identifier of the column.
3. Place Holder: This is what appears to be the display name of the columns.
4. Input Type: Determines the type of input that the field will accept as valid. You can choose among text, number, date, time, and e-mail.

Note: The available Component Configuration settings may vary across Default and System Elements.

PREVIOUS ARTICLE: 1: Overview: Workflow App

NEXT ARTICLE: 2.1: Create a Form from Scratch

Need more help? Send us an email at, or send us a message on the chat widget.****
Was this article helpful?
Thank you!