DocumentationStudioSmartFormsDesignDesigning Smartforms

Design workspace overview

The Design workspace is divided into three main areas:

  • Left panel (Action / Page / PDF)
    Manage Smartform settings and publishing

  • Top toolbar (Smartform navigation and modes)
    Switch between tabs like Design, Rules, Translations, and Configuration.
    This is where you control how you work with the Smartform.

  • Center area (Editor)
    Build your form layout and content.
    This is where you see your Smartform and all the changes you make in real time.
    You can also switch between HTML, PDF, and Data views.

  • Right panel (Items / Objects / Properties / Theme)
    Add elements and configure their behavior

Studio Elements Data Table

  • Top toolbar highlighted (navigation and view modes)
  • Left panel highlighted (Actions)
  • Right panel highlighted (Items/Properties)

Layout structure

Smartforms are built using a structured layout:

ElementDescription
PageThe main container of the Smartform
SectionGroups content into logical parts
RowDefines horizontal layout inside a section
ColumnSplits rows into vertical areas
ElementContent such as text, inputs, or images

This structure helps you create flexible and consistent layouts.

💡 Tip:
Think of the layout like building blocks. Start with sections, then add rows and columns, and finally place your elements.
To better understand the structure, you can enable Toggle Grid in the left toolbar. This will display the layout grid and help you see how sections, rows, and columns are organized. Studio Elements Data TableStudio Elements Data Table


How Smartforms are typically built

Most Smartforms follow this general process:

  1. Structure the layout using sections, rows, and columns
  2. Add elements such as inputs, text, or images
  3. Configure properties and behavior
  4. Preview and test the form
  5. Publish and activate

💡 Detailed steps are explained in the sections below.


Design tabs

Within the Design view, you can configure different parts of your Smartform:

  • Action – Publish, activate, and manage the Smartform
  • Page – Configure general Smartform settings
  • PDF – Control how the Smartform is exported as a PDF
  • Items – Add elements to your form
  • Objects – Manage reusable data objects
  • Properties – Configure behavior and styling
  • Theme – Apply styling and themes