# Customize form field

This guide shows how to easily rearrange, resize, duplicate, hide, or delete fields in your form using drag-and-drop.

1. In your app dashboard, go to **Forms**.
2. Either:
   * Click **Create New Form** (if you’re starting a new form)
   * Or select an existing form to edit.

Now you will see the form builder with a live preview of your form.

***

### ⭐ Step 1 — Enter “Edit” Mode (Drag-and-Drop)

* In the form builder preview, move your mouse over the form area.
* When you hover over the preview, click the **Edit icon** (usually a pencil or edit symbol) — this activates drag-and-drop mode.

<figure><img src="/files/7ow54ETVedcnTQRN9bph" alt=""><figcaption></figcaption></figure>

### ⭐ Step 2 — Use the Field Toolbar to Modify Fields

Hover over any field inside the preview - a small toolbar appears. The toolbar gives you 5 quick actions:

* **Move** — drag the field to a different row or column.&#x20;
* **Change Width** — adjust the field width (options: 1/3, 1/2, or full width).&#x20;
* **Duplicate** — create an exact copy of the field (with all its settings).
* **Hide** — make the field invisible on the form (but keep it saved).&#x20;
* **Delete** — permanently remove the field from the form.

### ⭐ Step 3 — Rearrange Fields (Drag-and-Drop)

Once you’re in edit mode, you can:

* Drag any field to a new position — reorder fields, group fields
* Place multiple fields in the same row (side-by-side) for a compact layout.
* Adjust each field’s width to control how much space it takes (narrow, half-width, full-width) using the toolbar.

### ⭐ Step 4 — Finalize and Save

Once you’re happy with your field layout and arrangement:

* Click **Save**
* Preview your form in both **Desktop** and **Mobile** views

### Tutorial video

{% embed url="<https://youtu.be/a3QWDH8xIUk>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.powerfulform.com/~/revisions/KRfi0fHdeAFeAhiPrH7G/form-setup/customize-form-field.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.