> ## Documentation Index
> Fetch the complete documentation index at: https://help.hoopai.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Building forms
> Step-by-step guide to creating a form in HoopAI using the drag-and-drop builder.
HoopAI's form builder uses a drag-and-drop interface that lets you assemble a form from a library of pre-built field types without writing any code. Every change is reflected in a live preview panel so you can see exactly how the form will look before publishing it.
## Accessing the builder
1. From the left navigation menu, go to **Sites**.
2. Click the **Forms** tab at the top.
3. Select the **Builder** sub-tab.
4. Click **Create New Form** in the top-right corner.
5. Give your form a name and click **Create**.
The builder opens with three panels:
* **Fields** (left) — a library of standard and custom field types you can drag onto the canvas
* **Canvas** (center) — the live form preview where you arrange and configure fields
* **Style / Options** (right) — tabs for visual customization and submission settings
## Adding fields
Drag any field from the left panel and drop it onto the canvas. Fields stack vertically by default. You can reorder them by dragging the handle icon on the left side of each field up or down.
When you click a field on the canvas, its settings appear in a side panel. Common settings include:
* **Label** — the text shown above the field
* **Placeholder** — the ghost text shown inside an empty input
* **Required** — toggle to make the field mandatory before submission
* **Custom field mapping** — connects the submission value to a contact field in your CRM
## Standard fields
The standard fields section contains the most frequently used contact information inputs. These fields map directly to built-in contact properties:
* **First Name**
* **Last Name**
* **Full Name** (a single combined input)
* **Email**
* **Phone**
* **Date of Birth**
* **Address** (includes street, city, state, zip, and country sub-fields)
Because these map to standard CRM fields, submitted values automatically update the contact record without any additional configuration.
## Custom fields
Below the standard fields is a custom fields library. These include every custom field you have created under your account settings, plus a set of ready-to-use field types you can drag in to create new custom fields on the fly:
* Text inputs (single line, multi-line, text list)
* Number and monetary value fields
* Dropdowns, radio buttons, and checkboxes
* Date picker
* File upload
* Signature
See [Form fields](/forms/form-fields) for a full description of each type.
## Organizing fields into pages
For longer forms, you can split fields across multiple pages. Click **Add Page** at the bottom of the canvas to insert a new page break. Each page becomes a separate step in the form, and a progress bar is shown at the top of the form by default. See [Multi-step forms](/forms/multi-step-forms) for full details.
## Saving and previewing
Click **Save** in the top-right corner at any time to preserve your work. To preview the form as a contact would see it, click the **Preview** icon (eye symbol) in the toolbar. The preview opens in a new browser tab at a shareable URL so you can test submission behavior before embedding the form.
## Editing an existing form
From the Forms builder list, hover over a form and click the pencil icon to reopen it in the builder. Any edits you save are immediately reflected in all places the form is already embedded—you do not need to regenerate the embed code unless you change embedding-level settings.
Name your forms clearly from the start. The form name appears in workflow trigger filters, in the submissions tab, and in notification email subject lines. A descriptive name like "Website Contact Form — Main" is much easier to find and automate than "Form 1."