Form Builder UI

Learn about the different Form Builder UI elements

Before we get into Form Building, it's important to understand the different UI elements of the builder. You will be directed to the Form Builder when creating a Form or Resource, or when clicking the Edit button for an existing Form or Resource.

Before creating your first form, take some time to review the settings and operations found in the Form Builder.

Builder Settings

The following settings can be found in the UI of the Form Builder when editing a Form.

Edit

Click the Edit button for a specific Form or Resource to enter builder mode.

Display As

Change the way the form is displayed by selecting an option from the Display As dropdown. Forms can be displayed as a Wizard, PDF, or traditional Web Form. The form display type can be changed dynamically, even when the form is live!

Search Field

Find the field you're looking for by quickly using the component search bar

Component Grouping

Components are grouped into different tabs based on the component type. The component groupings are Basic, Advanced, Layout, Data, Premium, and Existing Resource Fields

Drop Zone

Drag and drop your components onto the drop zone indicated by the blue box.

Copy Form

Click the Copy Form button to copy the form JSON and components to a new form.

Cancel

Cancel all changes made from the last time the form was saved. Canceling a form with unsaved changes will prompt a confirmation window before confirming the Cancel.

Save Form

Save the Form in its current state.

Visual Tour

Visual guide to the Form Builder.

Inline Component Settings

When a Component is added and saved to the builder, there will be inline settings for the component when hovering over the field found at the top right, above the field. These settings are not component specific and will be available for every component added to the builder

Edit

Opens the settings window for the component.

Move

Reposition the component on the form by clicking and holding the Move icon

Edit JSON

Directly edit the component settings by configuring the JSON directly. The JSON Schema will grow as settings are configured within the component setting UI window. Check the Full Schema setting to view the full schema configurations to display the setting schema that is not currently configured for the component.

Copy and paste the JSON schema of one component to easily implement those settings for other components within another stage or project.

Click here for a full list of Component JSON Schema

Copy

Copies the component JSON. When the Copy button is selected the Paste button will appear within the Inline Component Settings.

Paste

Pastes the component that was previously copied. The new component will be added directly below the component where the Paste button was clicked.

Delete

Deletes the component from the form. If a component is removed unintentionally, refresh the form to its previous state by navigating away from the form and selecting No for the Save prompt, or reloading the browser directly.