Navigate the Drag-and-Drop Form Editor

Learn how to use the field picker, form canvas, field settings sidebar, editor header, and preview when editing a Smart Form Builder form.

The Smart Form Builder editor has a field picker, a central form canvas with a live preview, and a settings sidebar for the selected item. Use the canvas to select and arrange fields; use the sidebar to configure the selected field.

Understand the editor areas

  • Field picker: browse the available fields and add one to the form.
  • Form canvas: view the form layout and select, drag, duplicate, or remove fields and rows.
  • Field settings sidebar: edit settings for the selected field. The available controls depend on its type.
  • Editor header: access the form title and status, responsive preview controls, history, preset styles, templates, preview, and save actions.

Select and configure a field

  1. Open an existing form for editing, or create a form from Smart Forms → Add Form.
  2. Choose a field in the field picker and add it to the canvas. You can also drag a field to the intended position.
  3. Select the field on the canvas, or use its edit control, to open the field settings sidebar.
  4. Review the controls available for that field and change only the settings relevant to your form.
  5. Use the editor preview to check the layout, then select the save action in the editor header to store your changes.

Field-specific instructions are covered separately in Choose Form Field Types, Configure Form Field Labels, and Reorder Form Fields.

Screenshot to add: Editor workspace with a selected field and its settings sidebar open

Back to Fields and Editor Controls