Skip to main content

Dynamic Grid

The Dynamic Grid field type allows you to collect structured, tabular data from form submissions. Users can add multiple rows of data using a familiar spreadsheet-like interface, making it ideal for collecting multi-item requests, event registrations, and service orders.

Column Types

Each Dynamic Grid supports up to five different column types that can be mixed and matched:

Column TypeDescriptionExample Use
TextFree-form text inputProduct names, descriptions, notes
RadioSingle selection from optionsPriority level, size preference
CheckboxMultiple selections from optionsFeatures, add-ons, services
SelectDropdown selectionCategory, department, color
QuantityNumeric quantity inputItem quantities, number of units

How It Works

  1. The form displays a table with your configured columns.
  2. Users fill in the first row of data.
  3. Clicking the Add Row button creates a new row, allowing the user to enter additional items.
  4. Rows can be removed by clicking the delete button on each row.

Configuration

To add a Dynamic Grid field to your form:

  1. Navigate to the form editor on the Manage Forms page.
  2. Create a new field and select Dynamic Grid as the field type.
  3. Configure the grid columns:
    • Set the column label (header text).
    • Choose the column type (Text, Radio, Checkbox, Select, or Quantity).
    • For Radio, Checkbox, and Select columns, define the available options.
  4. Save the field.

Mobile Optimization

The Dynamic Grid is fully responsive. On small screens (smartphones), the table layout automatically transforms into organized, stacked field blocks. Each row becomes a card-like section with labeled fields, ensuring usability on all devices.

Validation

Each column supports inline validation. Required columns will display validation messages if left empty. The validation system is powered by the Hyvä Themes validation library, providing a consistent and accessible user experience.

Use Cases

  • Request for Quote (RFQ): Customers submit a list of products with quantities and specifications.
  • Event Registration: Attendees register multiple participants with names, roles, and dietary requirements.
  • Service Requests: Customers list multiple items requiring service, with details like serial numbers, issue descriptions, and priority levels.
  • Equipment Orders: Buyers specify multiple equipment items with configurations and quantities.
  • Inventory Requests: Warehouse staff list items needed with quantities and preferred suppliers.

Submission Data

Dynamic Grid data is stored as structured data in the form submission results. Each row is saved as a separate data entry, maintaining the column structure. The data is accessible via:

  • The admin results grid
  • Email notifications
  • REST API and GraphQL responses
  • PDF exports (with the Print PDF add-on)