Builder

Create and edit forms with a visual drag-and-drop interface.

What is the Form Builder?

The form builder is a visual editor inside Bosca Studio that lets you create and edit forms without writing any code. You design your form by dragging fields, layout elements, and display elements onto a canvas, then configure each element's settings using a point-and-click interface.

As you build your form, the builder automatically generates the underlying schema — the structured definition that powers validation, rendering, and submission handling. You focus on how the form looks and behaves; the builder handles the technical details.

Three Main Areas

The builder interface is divided into three areas that work together:

Field Palette

The left sidebar contains all the elements you can add to your form, organized into three categories:

Fields — Input elements that collect data: Text Input, Text Area, Number Input, Select, Checkbox, Switch, Date Picker, Tag Input, Radio Group, Color Picker, Image Upload, and File Upload
Layout — Structural elements for organizing your form: Sections (groups with headings) and Rows (side-by-side fields)
Display — Visual elements that provide guidance but do not collect data: Alerts, Dividers, Headings, and Help Text

To add an element, simply drag it from the palette and drop it onto the canvas where you want it to appear.

Layout Canvas

The central area is where your form takes shape. This is your working canvas where you:

Drop elements from the field palette to add them to the form
Drag elements up or down to reorder them
Nest fields inside rows to place them side by side
Group fields inside sections to organize them under headings
See a structural preview of your form as you build it

Node Editor

When you select any element on the canvas, the right-side panel shows its settings. Depending on the element type, you can configure:

Label — The text displayed above the field
Placeholder — Hint text shown inside the empty field
Field type — Change which input control the field uses
Validation rules — Set required, min/max values, character limits, patterns, and formats
Column width — When inside a row, set how much horizontal space the field takes (using a 12-column grid)
Control-specific options — Settings unique to certain controls, like the number of rows for a text area or the accepted file types for a file upload

Click any element on the canvas to select it and reveal its settings in the Node Editor. Click an empty area of the canvas to deselect and return to the form-level settings.

Layout Elements

Layout elements help you organize your form into a clear, readable structure:

Sections — Group related fields under a heading. For example, you might have a "Contact Information" section with name, email, and phone fields, followed by a "Preferences" section with notification and language fields.
Rows — Place fields side by side using a 12-column grid. For example, a row with two fields each set to 6 columns creates a half-and-half layout. A row with three fields each set to 4 columns creates a three-across layout.

Display Elements

Display elements add visual context to your form without collecting any data:

Alerts — Highlighted messages for important notices, warnings, or instructions
Dividers — Horizontal lines to visually separate sections of the form
Headings — Text headings for additional visual hierarchy within sections
Help Text — Explanatory text that guides users on how to fill out the form or a specific section

Builder Tabs

The builder provides three tabs at the top of the interface:

Tab	Purpose
Builder	The visual drag-and-drop editor — this is where you design your form
JSON	A read-only preview of the raw form schema — useful for debugging or verifying the underlying data structure
Submissions	View and manage all submissions collected by this form, including status tracking and response details

Form Settings

Beyond the layout, the builder gives you access to form-level settings that control how the form behaves and who can access it:

Type — Choose between Submission (public-facing), Internal (organization-only), or Work Ops (task creation)
Key — A unique, stable identifier for the form that works across environments
Name and description — Human-readable metadata that helps your team identify the form
Visibility — Whether the form is public (accessible to anonymous visitors) or private (requires authentication)
Published state — Toggle between draft mode (only visible to editors) and published (live and accepting submissions)
Permissions — Control which groups can view, edit, delete, manage, list, or submit to the form
Profile mapping — For Submission forms, configure which form fields map to profile attributes so anonymous submissions automatically create user profiles
Work Ops mapping — For Work Ops forms, configure which form fields map to task properties like project, priority, summary, description, assignee, and dates

The JSON tab updates in real time as you make changes in the builder. This can be useful for verifying that your form is configured correctly or for troubleshooting validation issues.

For details on the input controls available in the field palette, see Controls. For how form schemas and versioning work, see Schemas. For how submitted data is collected and processed, see Submissions.