Fieldsets for Volto Form Block

Development Plone 6 UI (Volto)
1

There was a definite need for fieldsets in Volto Form Block. Working on a project where a client is using their forms to submit course applications, and previously we had used fieldsets to make the forms more manageable to the end user.

We added customizations to help the Editor manage the form and its fieldsets.

What it does

This addon extends volto-form-block (v3.14.0+) with the ability to visually group form fields into fieldsets. Editors can define fieldsets in the block sidebar, assign fields to them, drag fieldsets to control the page order, and optionally show or hide entire fieldsets based on the value of another field.

Key features:

  • Fieldset grouping -- define named groups and assign fields to them
  • Drag-to-reorder -- fieldset order in the sidebar controls render order on the page
  • Show/hide border -- fieldsets can render as bordered groups with a legend, or as invisible wrappers (useful for standalone fields that need to sit between bordered groups)
  • Conditional fieldsets -- show or hide an entire fieldset based on another field's value, using the same visibility conditions system that volto-form-block uses for individual fields
  • Visibility-aware validation -- required fields inside hidden fieldsets are skipped during validation
  • Pure frontend -- no backend changes required; fieldset data is stored as part of the block's JSON

How it works

The addon makes four changes to the form block's configuration:

  1. Enhanced formSchema -- adds a "Fieldsets" tab in the form block sidebar where editors manage fieldsets using Volto's ObjectListWidget (which supports drag-to-reorder out of the box)
  2. Enhanced fieldSchema -- adds a "Fieldset" dropdown to each field's settings panel
  3. Custom FormView (via Volto component shadowing) -- renders fields grouped by fieldset in the defined order, with optional <fieldset> wrapper and conditional visibility
  4. Custom Sidebar (via Volto component shadowing) -- passes the current fieldset definitions to the field schema so the dropdown stays in sync
  5. Custom View (via Volto component shadowing) -- skips validation for fields hidden by visibility conditions
2 Likes