Skip to main content

Form Builder

Before writing any code, you need a form designed in the Buildocs portal. This page walks you through creating an account, setting up a project, and designing your first form.

Demo project

When you register, Buildocs automatically adds a demo project to your account with sample forms already set up. You can use those forms to get started immediately without designing anything from scratch — skip to Step 5 and use the form code from the demo project in your SDK.

Step 1 — Register an account​

Go to buildocs.com and sign up for a free account. After confirming your email you will land on your dashboard.

Step 2 — Create a project​

A project is the top-level container for your forms and configuration.

  1. Click New Project on the dashboard.
  2. Enter a project name (e.g. My First App).
  3. Click Create.

The project overview page opens. Note the API Key shown here — you will need it when configuring BuildocsProvider in your React app.

Step 3 — Create a form​

  1. Inside your project, click New Form.
  2. Enter a Form Name (e.g. Employee Form) and a short Form Code (e.g. EMPLTBL). The form code is how your frontend and backend refer to this form — keep it short, uppercase, and without spaces.
  3. Click Create Form.

The Form Builder canvas opens.

Step 4 — Design the form​

You have two ways to build the form: use the AI assistant to generate a layout from a description, or place widgets manually with drag-and-drop.

Option A — Design with AI (fastest)​

Click the Generate with AI button. Describe the form you need in plain language — for example:

"Employee form with first name, last name, email, department dropdown, hire date, and a save button"

The AI generates a complete widget layout in seconds. Review the result, adjust any field names or labels if needed, then proceed to Step 5.

tip

Widget Name values (the field keys used in formData) are set automatically by the AI. Double-check them in the properties panel — they need to match whatever your backend code expects.

Option B — Design manually​

The canvas is built from Row widgets. Every field must live inside a Row, so always start there.

  1. Drag a Row widget onto the canvas. In the properties panel, set the number of segments (columns) — for example, 2 to place two fields side by side, or 1 for a full-width row.
  2. Drag an Input widget into the first segment of the Row. Set:
    • Name — firstName (the key used in formData)
    • Label — First Name
  3. Drag a second Input into the next segment for lastName.
  4. Add another Row (1 segment) and drop a Select widget into it:
    • Name — status
    • Label — Status
  5. Add one more Row and drop a Button into it:
    • Name — savebtn
    • Label — Save
    • Event — onClick

Add as many Rows as you need — each Row is an independent horizontal band with its own segment layout.

Step 5 — Save the form​

Click Save&Preview in the bottom toolbar. The form definition is stored in Buildocs and is immediately available to your SDK.

Next step​

With your form saved, implement the Backend to handle form events.