---
title: "The advanced editor panels"
url: "https://docs.4hse.com/forms/editor"
description: "The panels of the advanced editor: components, tree, preview, properties and drag and drop."
---

# The advanced editor panels

The advanced editor is one of the two editors used to build [forms](/forms/). How to use it step by step is in [Build a form with the advanced editor](/forms/advanced-editor).

## Components, left panel

[Section titled “Components, left panel”](#components-left-panel)

The components that can be added to a form, in groups:

Group

Contains

**Input labeled**

a label plus a field, suited to forms with fields stacked one below the other

**Input base**

a field with no label, suited to forms with fields side by side

**Static**

items that are not filled in: titles, labels, text

**Layout**

containers that arrange the other components; see [Layouts](/forms/layouts)

**Snippet**

ready-made blocks, to insert and adapt

## Tree, left panel

[Section titled “Tree, left panel”](#tree-left-panel)

The **Tree** tab shows the structure of the form: each component is a node, and the components inside a layout are child nodes. The first node, **Form**, holds the form’s general information.

Selecting a node highlights the item in the preview and opens its properties. When components are packed close together, the tree is the reliable way to select the right one.

## Preview, centre

[Section titled “Preview, centre”](#preview-centre)

The preview shows the form while it is being built. Hovering over an item highlights it and shows its type; clicking it selects it. Two icons appear on the selected item: one duplicates it, the other deletes it.

In the centre the form is shown together with the tools to edit it, such as highlights and the icons on the items, so it may look different from the final result. The **Preview** icon in the toolbar shows the form as the person filling it in will see it, at the screen width chosen in the **Device size** menu on the same toolbar.

## Properties, right panel

[Section titled “Properties, right panel”](#properties-right-panel)

The properties of the selected item: text, size, margins, default value and others, depending on the component.

Each property has a checkbox. When it is cleared, the component uses the default value; when it is ticked, it uses the value entered. Changes appear in the preview straight away; some take effect only after clicking outside the field.

## Drag and drop

[Section titled “Drag and drop”](#drag-and-drop)

Action

Effect

dragging a component from the **Components** panel onto the preview

adds it where it is dropped

dragging an item within the preview

moves it

dragging an item while holding **CTRL**

duplicates it where it is dropped

This site is protected by reCAPTCHA and the Google [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms) apply.