Form Builder UI
Learn about the different Form Builder UI elements
Last updated
Learn about the different Form Builder UI elements
Last updated
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.
The following settings can be found in the UI of the Form Builder when editing a Form.
Click the Edit button for a specific Form or Resource to enter builder mode.
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!
Find the field you're looking for by quickly using the component search bar
Components are grouped into different tabs based on the component type. The component groupings are Basic, Advanced, Layout, Data, Premium, and Existing Resource Fields
Drag and drop your components onto the drop zone indicated by the blue box.
Click the Copy Form button to copy the form JSON and components to a new form.
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 the Form in its current state.
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
Opens the settings window for the component.
Reposition the component on the form by clicking and holding the Move icon
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.
Copies the component JSON. When the Copy button is selected the Paste button will appear within the Inline Component Settings.
Pastes the component that was previously copied. The new component will be added directly below the component where the Paste button was clicked.
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.
