The advanced editor panels

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

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
Snippet	ready-made blocks, to insert and adapt

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

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

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

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