> For the complete documentation index, see [llms.txt](https://docs.acpt.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acpt.io/forms/the-form-builder.md).

# The form builder

How to use the form builder

Once you create your first form, open the form builder:

<figure><img src="https://3235524095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fiyf0tSKPgXiyoQ3zV3I6%2Fuploads%2Fgit-blob-243e017010122f3f4bef93f9347b49649165faf2%2Fcanvas-ui-forms.png?alt=media" alt="The form builder running the Canvas UI"><figcaption><p>The form builder: available fields on the left, form canvas on the right.</p></figcaption></figure>

The form builder uses the shared [Canvas UI](/canvas-ui/canvas-ui.md). See [Using the Canvas](/canvas-ui/using-the-canvas.md) for behavior common to every ACPT builder — adding and reordering items, resizing the panels, choosing the sidebar position, no-distraction mode, and keyboard shortcuts.

### Available fields

The sidebar contains the available fields, divided into groups.

* **Layout elements** - structural containers (`container`, `tabs`, `steps`) for organizing the form
* **Typography elements** - static content (`heading`, `paragraph`, `link`, `image`)
* **Standard fields** - if you select Post Management action, only button and CAPTCHA-style fields (Recaptcha, Turnstile, acceptance) plus the submit button will be available
* **WordPress post fields** - available only if you select to populate a post type
* **WordPress taxonomy fields** - available only if you select to populate a taxonomy term
* **WordPress user fields** - available only if you select to populate users
* **ACPT fields** - the mapped ACPT fields

Click a field type to append it to the end of the canvas, or drag it to a specific position — see [Adding an item](/canvas-ui/using-the-canvas.md#adding-an-item).

### Editing a field

Once a field has been added to the form builder canvas, click on it.

The left sidebar shows the field's settings, divided into three tabs:

<figure><img src="https://3235524095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fiyf0tSKPgXiyoQ3zV3I6%2Fuploads%2Fgit-blob-3ee90fd20f0aaa227286a6c85dbe92ff8a4b3ea7%2Fform-field-settings.png?alt=media" alt=""><figcaption></figcaption></figure>

#### Settings

The field's general settings:

* **Layout** - the field's layout. Can be `horizontal` or `vertical` (*required*)
* **Alignment** - the field's text alignment (*required*)
* **Name** - the field's name (*required*)
* **Columns** - number of columns, in a classic 12 columns grid (*required*)
* **ID** - the field's ID (*auto-generated*)
* **CSS classes** - Additional CSS class to be applied to the field (*optional*)
* **Label** - the field's label. Blank it if you want to display no label (*optional*)
* **Description** - a field description (*optional*)

#### Extra

Depending on the field type, several extra options will be available.

For example, if you are using an email field type, two fields will be shown:

* **Default value**
* **Placeholder**

#### Validation

First, you can mark your field as required.

Then, you can apply custom validation rules. Click on "**Add rule**" to create the first one.

Please refer to the [Validation Rules](/meta-fields/the-meta-fields-manager/validation-rules-fields-settings.md) section for more info.

#### Editing the Label inline

You can edit a field's **Label** directly on its canvas card by clicking into it — the Settings panel isn't required for this one change. Inline Label edits and an open Settings panel stay in sync live.

The field's **Name** is not inline-editable in the form builder — you must use the Settings panel, and even there it may not be editable at all for certain fields.

{% hint style="warning" %}
Fields bound to an existing meta field, CCT column, or WordPress core field (e.g. Post Title) have their Name locked, so the binding to that data source can't be broken by a rename. A locked field also can't be added to the canvas a second time while it's already present.
{% endhint %}

### Form builder canvas

Once a field is on the canvas, click on it to apply several actions:

* **Reorder** - drag it by its handle to sort and move it along the canvas.
* **Delete** - delete the field
* **Duplicate** - duplicate the field
* **Deselect** - deselect the field. You can deselect an element as well if you click outside the canvas

For behavior shared across every ACPT builder (sidebar position, resizing, no-distraction mode, keyboard shortcuts) see [Using the Canvas](/canvas-ui/using-the-canvas.md).
