> For the complete documentation index, see [llms.txt](https://academy.any2info.com/any2info-academy/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://academy.any2info.com/any2info-academy/no-code-platform/app-studio/designertools/form-designer.md). # Form designer **Category**: Designer tools **Version**: 1.0 **Last Updated**: July 9, 2026 **Author**: Any2Info *** ## Description The **Forms Designer** provides a visual interface for creating, editing, and organizing form definitions within the platform. The designer consists of multiple integrated areas that work together to simplify form definition configuration and layout management: * Menu * Form Definitions * Toolbox * Structure * Toolstrip * Interactive Designer * Editing Menu The designer allows users to visually position fields, configure their properties, organize definitions into folders, and manage definition layouts interactively. Form definitions support multiple layouts, allowing definitions to adapt to different screen sizes and display types. *** ## Menu The **Menu** is located on the left side of the designer and contains multiple tabs used for definition management, layout selection, and field selection. ### Form Definitions The **Form Definitions** tab shows all saved form definition objects available to the user. Features include: * Viewing all existing form definitions * Organizing form definitions using folder structures * Creating new form definitions * Selecting existing form definitions for editing * Moving form definitions between folders * Creating new folders for organization This section is intended for form definition management and navigation. *** ### Layout Selection Besides form definitions, this section also shows all layouts belonging to the currently active form definition. Features include: * Viewing available layouts * Selecting layouts for editing * Switching between layouts * Managing layout-specific form definition arrangements When a layout is selected: * The **Interactive Designer** updates to display the selected layout * The **Structure** tab reflects the fields available in the layout * The **Editing Menu** updates to display layout-specific settings *** ### Toolbox The **Toolbox** tab displays all available fields that can be added to the form definition. Features include: * Displaying all available form fields * Grouping fields into categories * Selecting fields for placement inside the designer Information and configuration details for individual fields can be found in their dedicated documentation. Typical field categories include: * Input fields * Tables * Layout containers * Calculation fields * Selection and filter fields #### Layout Editing Behavior When editing a non-root layout, the **Toolbox** changes behavior. Instead of displaying all available fields, it shows a summarized list of the fields available in the root layout. This allows fields defined in the root layout to be reused in the currently active layout. This behavior provides the following benefits: * Layouts reuse fields from the root layout * Fields remain consistent across layouts * Layout-specific arrangements can be created efficiently *** ### Structure The **Structure** tab provides a hierarchical overview of the active form layout and all fields it contains. Features include: * Viewing all fields in a structured hierarchy * Quickly locating specific fields * Selecting fields directly from the tree * Activating fields inside the designer * Searching fields using: * Field name * Field ID Additional indicators shown in the structure tree: | Indicator | Meaning | | -------------- | ----------------------------------------------------------- | | Lightning icon | The field contains one or more configured events or actions | | Link icon | The field is linked to another field | Additional functionality: * Fields can be temporarily hidden * Useful when hiding groups of fields while working on complex layouts The **Structure** tab works together with the **Interactive Designer**: | Component | Purpose | | -------------------- | --------------------------------- | | Structure Tab | Logical and searchable overview | | Interactive Designer | Visual form layout representation | *** ## Toolstrip The **Toolstrip** is positioned above the designer and provides quick access to the primary designer views and configuration areas. Selecting an icon opens the corresponding designer section, allowing users to quickly switch between editing different aspects of a form definition.
*** ## Interactive Designer The **Interactive Designer** displays a visual representation of the active form layout and all fields placed on it. Features include: * Visual placement of fields * Displaying field positions within the form layout * Highlighting the currently selected field * Allowing direct interaction with form elements The designer represents the actual form layout inside a rectangular design workspace. Additional functionality: * Clicking a field automatically activates property editing * Selected fields are visually highlighted * The designer synchronizes with the **Structure** tab * Changes made inside the designer are reflected immediately The **Interactive Designer** and **Structure** tab complement each other: | Component | Purpose | | -------------------- | --------------------------------- | | Structure Tab | Logical and searchable overview | | Interactive Designer | Visual form layout representation | *** ## Editing Menu The **Editing Menu** contains all configurable properties for the currently selected form definition, layout, container, or field.
The available configuration sections are context-sensitive and change based on the selected object. | Section | Description | | ----------- | ----------------------------------------------------------------------------------- | | Overview | Displays general information and metadata for the selected form definition or field | | Layout | Configures the layout and positioning of the selected definition | | Properties | Configures the general properties of the selected definition or field | | Messaging | Configures user-facing messages and notifications | | Events | Configures events and the actions they trigger | | Action Flow | Configures action flow behavior and execution | | Parameters | Configures parameters used by the selected definition | | Plugins | Configures available plugins and extensions | *** ### Layout The **Layout** section is only applicable to form definitions. This section contains properties related to the currently selected form definition layout. These settings control the arrangement and positioning of fields displayed in the **Interactive Designer**. *** ### Properties The **Properties** section displays all editable properties for the currently active definition or selected field. Important notes: * The available properties depend on the selected field or form definition * Each field exposes its own configurable settings * Definition-level properties differ from field-level properties For detailed information about the available properties for each field, refer to the individual field documentation. *** ### Messaging The **Messaging** section contains configuration related to messages shown for the active definition or field. Typical usage includes: * Success messages * Error messages * Warning messages * Status notifications These messages are typically displayed when: * An action succeeds * An action fails * A process changes state * Validation errors occur *** ### Events The **Events** section displays all available events for the active definition or selected field. Features include: * Viewing supported events * Adding actions to events * Configuring event behavior * Managing multiple actions per event Each event can contain multiple configured actions. Typical events include: * Click events * Load events * Change events *** ### Action Flow The **Action Flow** section is only applicable to form definitions. This section allows the creation and editing of action flows. Action flows are used to configure form definition logic and action execution behavior. For more information, see the **Action Flow Designer** documentation. *** ### Parameters The **Parameters** section is only applicable to form definitions. This section contains two types of parameter objects: * Incoming filters * Fixed filters These parameters are used to configure filtering behavior and parameterized interactions within the form definition. For more information, see the dedicated **Parameters** documentation. *** ### Plugins The **Plugins** section is only applicable to form definitions. This section displays all plugins currently enabled for the form definition. Plugins extend form definition functionality with additional integrations, behaviors, or custom features. Features include: * Viewing enabled plugins * Configuring plugin settings * Enabling or disabling plugins * Viewing plugin-specific configuration For more information, see the **Tools > Plugins** documentation. *** ## Form Layouts Form layouts allow a form definition to support multiple screen sizes and alternative field arrangements. A form definition consists of a rectangular design area containing positioned fields. A layout represents an alternative arrangement of those fields, allowing the same definition to be optimized for different display sizes or device types. Layouts can be used to optimize forms for: * Desktop screens * Tablets * Mobile devices * Embedded displays * Custom screen resolutions *** ### Layout Behavior A layout is an alternative arrangement of the root form definition. It reuses the same field definitions while allowing their placement and presentation to be optimized for a specific screen size or device. Characteristics of a layout include: * Reuses the same field definitions as the root layout * Can contain any field from the root layout * Does not need to contain every field from the root layout * Allows fields to be positioned and resized independently * Supports device- and screen-specific optimization This enables a single form definition to present different arrangements depending on the available screen space. *** ### Root Layout The **Root Layout** is the primary layout of a form definition and serves as the source for all additional layouts. As a best practice, the root layout should contain all fields required by the form definition. Additional layouts can then reuse and rearrange these fields for specific screen sizes. Typical layout structure: | Layout | Purpose | | ------------- | ---------------------------- | | Root Layout | Desktop or full-size version | | Tablet Layout | Medium-sized screens | | Mobile Layout | Compact mobile version | *** ### Layout Sizing Layout sizing can be configured through the **Properties** section of the **Editing Menu** while a layout is selected. Sizing properties determine when a layout becomes active based on the available screen width. #### General The **General** section contains layout-specific sizing properties. | Property | Description | | ----------- | --------------------------------------------- | | Width Bound | Maximum supported screen width for the layout | These properties determine: * Which layout becomes active * Which screen sizes match the layout * Responsive layout behavior #### Page The **Page** section contains properties that define the dimensions of the form layout's design area. These properties determine: * The width of the **Interactive Designer** workspace * The available area for positioning fields * The visual width of the layout during editing The configured page size represents the editable canvas on which fields are placed and arranged. In addition to page dimensions, this section also contains layout-specific styling properties and the **Overview** configuration. These settings allow each layout to define its own appearance and determine which overview fields are displayed for the active layout. *** ### Layout Design Strategy The following workflow is recommended when creating form layouts: 1. Create the root layout. 2. Add all required fields to the root layout. 3. Configure and validate the desktop or full-size version. 4. Create additional layouts for smaller screen sizes or device types. 5. Reposition and resize fields as needed for each layout. 6. Remove fields that are not required in smaller layouts while reusing the remaining fields from the root layout. #### Best Practices * Use the root layout as the complete version of the form definition. * Reuse fields from the root layout instead of creating duplicates. * Optimize additional layouts for readability and usability on their target screen sizes. * Keep field ordering consistent across layouts where possible to provide a familiar user experience. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://academy.any2info.com/any2info-academy/no-code-platform/app-studio/designertools/form-designer.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.