---
title: "New Form Designer"
url: "https://help.tabidoo.cloud/en/article/new-form-designer"
language: "en"
last_updated: "2026-03-09T08:33:28.370Z"
---

# New Form Designer

The new Form Designer in Tabidoo allows you to create forms with full flexibility. With drag-and-drop, visual controls, and advanced settings for each component, you can build forms exactly the way you need them.

## How to Enable

The new Form Designer is not yet the default editor in Tabidoo. You can enable it as a beta feature in your application settings. Here’s how.

**Step-by-step guide**

1.  Open your Tabidoo application.
2.  Go to **Edit** **Application → Advanced Settings → Tabidoo Labs**.
3.  Find the card **New Form Designer**.
4.  Switch it **ON** (click).
5.  **Save** your changes.

**Notes**

-   The feature is currently in **beta**, so you may encounter minor changes or updates.
-   The setting is **application-specific** – once enabled, all users of the application will use the new Form Designer.

![](https://cdn-assets.productfruits.com/8a7084cd-3a0d-4c53-aec7-dc04422d4885)

## First Steps

Once enabled, you can access the new Form Designer directly from the table settings:

1.  Open the context menu for your table and select **Table Fields**.
2.  Click the **Form Designer** button.
3.  The new Form Designer will open.

![](https://cdn-assets.productfruits.com/54fad3e4-fa19-45e5-a19b-074c79bb06d9)

## Main Areas of the Form Designer

When you open the designer, you’ll see three main sections:

**Layout panel (left)**

-   Contains visual controls you can add (drag & drop) to the form (Tabs, Groupbox, Splitter).
-   Area for hidden fields – you can drag fields here if you don’t want them on the form.

**Form canvas (center)**

-   The main working area where you place and arrange fields and controls.
-   Drag fields or controls here to build your form.
-   Components in the same row automatically share the space proportionally.

**Properties panel (right)**

-   Settings for the entire form and for selected components.
-   Options like form width, save behavior, compactness, or specific properties of each field/control.

![](https://cdn-assets.productfruits.com/85e400ee-711d-4878-ac30-22d299304db7)

## Next Steps

From here, you can start designing:

-   Drag fields to the canvas and arrange them into rows and columns.
-   Use **Groupbox** to organize related fields, **Tabs** for separating larger content, and **Splitter** to visually divide form areas with a vertical line.
-   Adjust the look and behavior of each item using the properties panel.

### Drag & Drop Interface

-   Easily move fields and components around the form using drag-and-drop.
-   Remove or hide fields by simply dragging them out of the form (to the **Hidden fields** area).
-   Reorder elements at any time.

![](https://cdn-assets.productfruits.com/8c6ee82b-6d32-47db-9f81-f35db8b114a5)

### Layout Elements

The new designer includes special controls that make your forms clearer and more user-friendly:

-   **Groupbox** – visually group related fields together.
-   **Tabs** – organize content into multiple tabs.
-   **Splitter** – visually separate form areas with a vertical line.

You can also **nest components freely** – for example, place Groupboxes inside Tabs, or Tabs inside a Groupbox. This allows you to create very structured and complex form layouts.

![](https://cdn-assets.productfruits.com/bb913b2f-0fcc-4443-b81e-6e63f4bfd476)

### Form Settings

**Form width**

Choose the width of the form:

-   **Normal** – standard form width.
-   **Large** – wider form layout, useful when working with more fields side by side.

**Save options**

This setting changes the behavior of the **Save button(s)** on the form.     
⚠️ *Tip:* Avoid enabling too many options at once – it may confuse users.

Available options:

-   **Save & Close** *(default)* – Saves data and closes the form.
-   **Save & New** – Saves data and opens a new blank form for another input.
-   **Save & Duplicate** – Saves data and reopens the form with values prefilled from the saved record.
-   **Save & Stay** – Saves data and keeps the current form open.

**Hide sidebar**

If enabled, the **sidebar with additional information** (such as audit data, logs, etc.) will not be displayed in the form.

**Compactness**

-   Adjusts how dense the form layout is.
-   Move the slider to make the form more **compact** (less spacing between fields) or more **spacious**.

### Groupbox Settings

**Label**

-   The displayed title of the Groupbox.
-   Helps to clearly describe the grouped content.

**Hide label**

-   If enabled, the Groupbox will not display its label.
-   Useful when the grouping is only visual and a title would be redundant.

**Background**

-   Allows you to set a background color for the Groupbox.
-   Makes grouped fields visually distinct from the rest of the form.

**Auto height**

-   Special setting for vertical space management.
-   If there is free space in the form, the Groupbox expands to fill the remaining height.
-   If the form is already filled with other components, the Groupbox will only take up as much space as needed by its content.

**ID**

-   Internal identifier of the Groupbox.
-   Can be used in **scripting** for conditional logic (e.g., show/hide).
-   Example:    

```typescript
doo.form.forms.defaultForm.elements.groupbox1.isVisible = false;
```

### Tabs Settings

**Tabs**

-   Displays a list of all tabs contained in the component.
-   You can:
    -   **Reorder tabs** by dragging and dropping them.
    -   **Open a tab’s detail** to edit its label or settings.
    -   **Add a new tab** using the *Add new item* link.

**Auto height**

-   Works the same way as with Groupbox.
-   If free vertical space is available, the Tabs component expands to fill it.
-   Otherwise, it will only take as much height as needed for its content.

**ID**

-   Internal identifier of the Tabs component.
-   Can be used in **scripting** for conditional logic (e.g., show/hide).
-   Example:    

```typescript
doo.form.forms.defaultForm.elements.tabs1.isVisible = false;
```

### Splitter Settings

**Color**

-   Sets the color of the horizontal line (splitter) that visually separates vertical areas of the form.

**ID**

-   Internal identifier of the Splitter.
-   Can be used in **scripting** for conditional logic (e.g., show/hide).
-   Example:  

```typescript
doo.form.forms.defaultForm.elements.splitter1.isVisible = false;
```

### Scripting

Scripting allows you to dynamically control both **fields** and **layout elements** directly in the form.

**Working with fields**

Fields are accessible through the **model object**.

Examples:

```typescript
// Hide a field
doo.model.firstname.isVisible = false;
// Make a field read-only
doo.model.surname.isReadOnly = true;
// Set value
doo.model.age.value = 25;
```

**Working with layout elements**

Layout elements are accessible through the `doo.fom.forms.defaultForm object`.

```typescript
// Hide a layout element 
doo.form.forms.defaultForm.elements.[yourElementName].isVisible = false;
```