DocumentationStudioDesigning Smartforms

Design workspace overview

The Design tab has a bar at the top and three main areas under it: the left panel, the editor and the right panel.

The Design tab with the form bar, the left panel, the editor and the right panel numbered 1 to 5

  1. Form bar. The name of the Smartform and its tabs: Design, Rules, Translations and Configuration, and More options for the other tabs. This is where you control how you work with the Smartform. See Studio workspace. The menu on the left of Studio collapses to icons while you are in a Smartform, so the editor gets the full width.
  2. Left panel (Action / Page / PDF). Manage Smartform settings and publishing.
  3. Editor. Build your form layout and content. You see your Smartform and all the changes you make in real time. The tabs in the header of the editor are the views of the Smartform:
    • PDF, HTML, Rules and Data show the Smartform in different ways. You can show two of them side by side with Split Screen.
    • Warnings is shown only when Studio has found a problem in the design. See Warnings.
    • Log lists the changes made to the Smartform. See Log.
  4. Property search. The search field in the header of the HTML view takes you to a section, row or element by name. See Search and shortcuts.
  5. Right panel (Items / Objects / Properties / Theme). Add elements and configure their behavior.

Find an item in the Items tab

The Items tab has two ways to narrow down the list of elements:

  • Search finds an element by name.
  • Filter shows one kind of element: All Elements, Static Elements, Dynamic Elements, Media Elements or Action Button Elements.

The Design group at the top holds the parts of the layout: Column, Row, Section and, where it is available, Page Layout.

📝 Note: While you work, Studio also tells you when somebody else has the same Smartform open. See Editing together.

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

Other pages in this section: