Skip to main content
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 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 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.”
Last modified on March 5, 2026