Home

Node Form Variants — How to Use (vforms)

This guide describes how to create, edit, and apply form variants for a content type.

Concepts

• Variant: A named layout definition for a node edit form (fields included, ordering, and grouping).
• Component: A field or extra form element (e.g., “Authoring information”, “Revision information”, module-provided widgets).
• Group: A simple fieldset-like container that holds child components and moves with them.

1) Create a variant

1. Go to Administration → Structure → Content types.
2. For the target content type, open the Variant forms page.
3. Click Add variant.
4. Enter:
   • Label (human readable)
   • Variant machine key (used in URL; keep stable)
5. Save.

After creation, you will be taken to:

admin/structure/types/manage/%type/vforms/%variant/edit

2) Reorder fields / show-hide fields

On the variant edit page you can:

• Drag rows to reorder (fields and extra fields).
• Toggle whether a field is included in the variant.
• Save to persist the layout.

Notes:

• If you see “weights” instead of drag handles, switch back to drag mode (depending on the UI toggle provided on that screen).

3) Create groups and move fields into them

1. On the variant edit page, use Create group (header action).
2. A group row appears in the table.
3. The group name (fieldset anchor) may be typed into the group header.
4. Drag fields into the group; grouped items become children of that group row.
5. Drag the entire group row to reposition it; children move with it.

Group fieldset behavior: open / closed / locked open

Each group header row contains an inline radio control:

• closed
  • Group is collapsible and initially collapsed.
• open
  • Group is collapsible and initially expanded.
• locked open
  • Group is always open and not collapsible.

This affects how the group is rendered on the actual node edit form.

Ungrouped sections

You may intersperse grouped and ungrouped fields by adding additional ungrouped sections. These may be clicked up and down the list.

4) Views integration

vforms adds a Views field that creates an Edit link targeting a specific form variant (optionally opening in a jQuery UI dialog).

Add the field to a View

1. Edit your View (base table should be Content / Node).
2. Add field
3. Search for and add: Form variant edit link
   (This is provided by vforms; it appears under the Node table fields.)

Configure the field

In the field settings you will see a Form variant settings fieldset:

• Form variant

  • If your View is restricted to a single content type (via a “Content: Type” filter), this is a dropdown listing the variants available for that type (including Default).
  • If your View can show multiple content types, the UI switches to:
    • Form variant (global fallback) (text field, variant machine key)
    • Variants per content type (optional per-type overrides)

• Open in modal dialog

  • When enabled, the link opens the node edit form (for the chosen variant) in a draggable, resizable dialog using Backdrop’s AJAX dialog.

• Dialog width

  • Width in pixels (only shown when modal is enabled).

Link text / icon behavior

The “Text to display” supports an icon placeholder:

• Leave it blank to display only a pencil icon.
• Use % inside text to embed the icon, e.g. Edit %
• Use either \% or %% for a literal percent sign.

Behavior notes

• The link respects node update access (it will not render if the user cannot edit the node).
• The link includes a destination query so returning to the View after save/cancel works as expected.
• Debugging: adding ?mf_debug=1 to the page URL enables watchdog debug logging for variant detection in the Views handler.

5) Using a variant on node forms

How a variant is selected depends on your site workflow and how you link to forms. Common approaches:

• Use a dedicated URL that includes the variant key (if your site provides such routes).
• Provide an “Edit using variant” link (common when used with dialogs).
• Configure per-role or per-context logic (if implemented in your site build).

If your site uses the vforms dialog route, the editor opens in a jQuery UI dialog and updates the node form via AJAX.

5) Export / Import (Configuration Management)

Variants are stored as Backdrop config and can be moved between environments:

1. Go to Administration → Configuration management
2. Export active configuration (or use staging workflow)
3. Look for config items like:
   • vforms.node.<bundle>
4. Import on the target site.

Tip (SQL lookup):

SELECT name FROM config WHERE name LIKE 'vforms.%';