# Form Builder UI

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.

{% embed url="<https://www.loom.com/share/6a4fcc10be364276be2a120841e963d2>" %}

## **Builder Settings**

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

### **Edit**

Click the Edit button for a specific Form or Resource to enter builder mode.&#x20;

### **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**](https://help.form.io/userguide/forms/form-building/form-components/basic-components), [**Advanced**](https://help.form.io/userguide/forms/form-building/form-components/advanced-components), [**Layout**](https://help.form.io/userguide/forms/form-building/form-components/layout-components), [**Data**](https://help.form.io/userguide/forms/form-building/form-components/data-components), [**Premium**](https://help.form.io/userguide/forms/form-building/form-components/premium-components)**,** and [**Existing Resource Fields**](https://help.form.io/userguide/forms/form-building/existing-resource-fields)&#x20;

### **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.&#x20;

### **Save Form**

Save the Form in its current state.

### Visual Tour

{% embed url="<https://view.genial.ly/632485c3b59ced00107a389e/interactive-image-interactive-image>" %}
Visual guide to the Form Builder.&#x20;
{% endembed %}

## &#x20;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

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FEqjV0uAvYxzqU2RuXEf3%2Finlinesettings.jpg?alt=media&#x26;token=beebbb3f-ab21-4f82-9bf9-296412fb39e5" alt=""><figcaption></figcaption></figure>

### **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.

{% hint style="info" %}
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** ](https://github.com/formio/formio.js/wiki/Components-JSON-Schema#common-parameters)
{% endhint %}

### 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.&#x20;