Building with drag and drop

Everything on the canvas is placed by dragging. This page covers adding, moving, removing and undoing, and what each gesture removes.

Add a field at an exact position

1. Point at a field type in the Fields palette.
2. Press and drag it onto the canvas.
3. As you drag over the existing cards, a blue drop indicator shows exactly where the field will land.
4. Release to insert it there. The new field is selected automatically so you can configure it straight away.

Mid-drag: the blue indicator shows the Number field will be inserted just above Email.

After the drop: the field landed where the indicator promised, and is selected.

A plain click on a palette field also works and always appends to the end of the form. Drag when position matters, click when it does not.

Add a field at the end

The canvas has an end dropzone below the last card labelled Drop here to add at the end. Drag a palette field onto it to append. You can also drag an existing card onto it to move that card to the end. The dropzone stays inert if the block you are dragging is already last, because that move would do nothing.

On an empty form the end dropzone fills the whole canvas and shows the hint Add fields from the palette to start building this form.

Reorder a field

Point at the grip handle at the left edge of a card, drag the card up or down, and release where the blue indicator sits. The up and down arrow buttons on a card do the same thing one step at a time.

Dragging a structural marker (Section, Repeating Group, Columns row) moves the marker together with its whole block, not the marker on its own.

Page dividers are the exception: they are not draggable, and nothing can be dropped above the first one. Pages are managed from the tab bar instead. See Pages.

Remove a field

Three ways, and they differ in how much they remove:

Action	What it removes
The card’s delete icon (the trash icon revealed when you point at a card)	The whole block: a structural marker plus everything inside it, or a plain field on its own
Dragging the card back onto the palette	The same block-aware span. The palette highlights and shows a red Drop here to remove hint
The inspector’s Delete button	Only the single selected element, even when that element is a structural marker

Block-aware means:

• Section: through to the next Section or page divider.
• Repeating Group: through its matching End Repeat marker.
• Columns row: through its matching End Row marker.
• A plain field: just that field.

The delete icon is keyboard reachable: Tab to it and press Enter or Space. There is no confirmation dialog, because every deletion is undoable.

Page dividers have no delete icon. Pages are deleted from the tab bar, which confirms first because deleting a page deletes its fields.

Undo a deletion

When you delete a block containing more than one element, a snackbar appears at the bottom of the canvas naming what was removed, with an Undo button.

The count is the number of fields you saw inside the block. Structural end markers are not counted, so a repeating group wrapping two fields reads “and 2 fields”, not three. Click Undo to restore the whole block in its original position.

The snackbar dismisses itself after about six seconds and a newer deletion replaces it. Cmd/Ctrl+Z undoes at any time, whether or not the snackbar is still showing. Single-field deletions raise no snackbar: they are obvious on screen and just as easily undone.

Cancel a drag

Press Escape, or release the pointer anywhere that is not a valid drop target. The drop indicator, the palette highlight, and the remove hint all clear cleanly, and nothing changes on the form.

Undo, redo, and autosave

Every drag action (insert, reorder, and delete) is a normal edit:

• It participates in undo and redo. Cmd/Ctrl+Z undoes, Cmd/Ctrl+Shift+Z redoes.
• It autosaves to the form’s draft shortly after the change, so you never save manually while authoring.

Drag-and-drop authoring works in Chrome, Edge, and Firefox.