Display Builder Webform

Layout a Webform with Display Builder:
place a form's elements inside site components and grid layouts — on the webform's
own wizard pages — while the webform keeps validating, conditioning and submitting
exactly as before.

Webform owns the form. Display Builder owns the composition. This module keeps the
two in step.

What you get

• A Layout tab on every webform. Enable a layout profile on a webform and build
  it in the Display Builder canvas, right next to the form's own settings.
• Fields as components. Drop a form element into a component's slot or a grid
  layout. A container is backed by an ordinary form element, so validation,
  conditional logic, wizard pages, drafts and submissions are untouched.
• Multi-slot components. One component node fills every slot it declares; the
  canvas heals itself if content lands in a slot the component does not declare.
• Wizard pages as fixed containers. Each wizard page is a root container that
  cannot be selected or dragged, while the fields inside it stay fully editable.
  The page order stays the webform's own, and a layout that would change it is
  refused with a message instead of being written.
• Non-field content. Text, media, icons, numbers, selects and other value
  sources can be placed next to fields as static content inside a layout.
• Honest reporting. Anything that cannot be placed (blocks, views, sources that
  need a context) is reported in the builder and in the log instead of silently
  disappearing.
• Follows the form. Add or delete an element or a whole page in webform's own
  element editor and the canvas catches up the next time it is opened, without
  disturbing what you have already arranged.
• Draft and publish. The builder works on a draft; nothing reaches the form
  until you publish. Disabling the layout really disables it: the form goes back to
  plain fields, your layout stays saved, and enabling it again brings the layout
  back.

Requirements

• Drupal core 11
• Display Builder (1.0.x)
• Webform 6.x, including its Webform UI
  submodule
• A source of components for Display Builder — a theme with single directory
  components, or a module that offers them as Display Builder sources.

Installation

composer require drupal/display_builder_webform
drush en display_builder_webform

Usage

1. Create a Display Builder profile with the components and layouts you want to
   offer (for example a two column grid, a card, a panel). Mark it as available for
   webforms.
2. Open a webform and go to its Layout tab, then settings.
3. Pick the profile and enable the layout for this webform.
4. Build the layout in the canvas: drag a field from the Form fields panel into
   a component's slot, drop a component next to it, add wizard pages' worth of
   structure as you like.
5. Press Publish. The form is laid out; check it on the front end.

Fields you never place are kept at the end of the form — nothing is ever dropped.

How it works

The layout lives in the webform's own configuration, next to the elements:

webform.webform.<id>.third_party_settings.display_builder:
  profile: <the profile used>
  sources: <the layout tree>

A layout container is a form element of type db_layout that carries the component
and the slot map; the form elements it displays are still its own children, so
Webform's element tree stays intact. Publishing merges the layout into the
elements: the elements are the single source of truth and the layout only says
where things go. A container whose node no longer exists in the layout is unwrapped
and its children are promoted, so a stale container can never duplicate a field.

Limitations

• Blocks, views, entity and menu sources are reported, not placed.
• Webform's own container elements (fieldset, details, flexbox, container) are not
  layout containers; they stay as they are in the form.
• Fields cannot be moved between wizard pages — a page belongs to Webform.
• Sources that need a context at render time (tokens, links) may fall back to a
  placeholder on the form.

Related

• Display Builder — the canvas this
  module plugs into.
• Webform — the form builder webforms are
  made with.