Visual builder

The Phase 3 admin builder is a React app mounted on the form edit screen (#ad-form-builder).

Layout

• Left: field palette with search
• Center: canvas (add, reorder, duplicate, delete)
• Right: selected field inspector (including conditional logic and step assignment), or form settings, steps and notifications when nothing is selected

Persistence

The builder never posts a full page. Saves go to PATCH /wp-json/ad-form/v1/forms/{id} with optimistic locking (version). Autosave is debounced. Ctrl/Cmd+S saves immediately.

Undo/redo is client-side (last 50 structural or debounced inspector snapshots). Keyboard:

Shortcut	Action
Ctrl/Cmd+S	Save
Ctrl/Cmd+Z	Undo
Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y	Redo
Ctrl/Cmd+D	Duplicate selected field
Delete / Backspace	Delete selected field (not while typing)
Escape	Deselect

Assets

Source: assets/src/builder/

Build:

npm install
npm run build

Compiled files live in assets/build/ (builder.js, builder.css, builder.asset.php) and are committed so the plugin runs without Node on the WordPress host.

The builder script is enqueued only on page=ad-form-forms&ad_form_action=edit. Configuration is injected with wp_add_inline_script as window.adFormBuilder so booleans stay booleans.

Field types

Registered in Dingfelder\AdForm\Fields\FieldRegistry:

text, email, number, textarea, select, checkbox, calculation, submit

Add-ons:

add_action( 'ad_form_register_fields', function( \Dingfelder\AdForm\Fields\FieldRegistry $registry ) {
    $registry->register( new MyField() );
} );

New form

Add New creates a draft titled “Untitled Form” (with a submit field and one email notification to {admin:email}) via a nonce-protected admin-post.php action, then redirects to the builder. The editor always has a form ID.

Email notifications are edited in the form-settings inspector (to, subject, message, reply-to, enabled, optional send-if conditions). Merge tags are listed in that panel. See ACTIONS.md and CONDITIONS.md.

Field inspectors (except submit) expose show/hide rules against other fields. Operators come from window.adFormBuilder.conditionOperators.

Calculation fields edit the formula, decimal places, prefix and suffix in the inspector. See CALCULATIONS.md.

Steps

Form settings can enable multi-step mode. That stores two or more objects in definition.steps and groups the canvas by step. Each field has an optional step id; submit fields stay on the last page. See STEPS.md.