Forms are first-class citizens in Domma CMS. Create forms in the admin panel, define fields with validation, and embed them in any page with a single shortcode. Submissions are stored and manageable in the admin, with optional email and webhook triggers.

Every form is powered by Domma's blueprint-driven Form Builder — the same engine used throughout the Domma framework. This means forms automatically benefit from client-side validation, reactive models, and consistent styling with zero additional configuration.

How it works

1. Build — Create and configure a form in the admin panel (Admin → Forms → New Form)
2. Validate — Define per-field validation rules with custom error messages
3. Embed — Drop a shortcode on any page: [form slug="contact"]
4. Collect — Submissions are stored and viewable in the admin, with optional trigger actions

The visual Form Builder lets you construct and configure forms entirely from the admin panel — no code required. Navigate to Admin → Forms → New Form to get started.

Form settings

Before adding fields, configure the top-level form properties:

Adding and arranging fields

1. Click Add Field and choose a field type from the panel on the right
2. Fill in the field label, name (used as the key in submission data), and placeholder text
3. Configure validation rules and set a custom error message for each rule
4. Drag fields up and down the list to reorder them — the order here matches the rendered form
5. In Wizard Mode, assign each field to a Step using the step selector on the field card

Live preview

A live preview pane on the right-hand side of the builder renders the form exactly as it will appear to visitors, including validation states and the current theme. Changes are reflected in real time as you add, remove, or reorder fields.

Domma CMS supports 15 field types covering every common input scenario. All types are natively styled to match your site's active theme.

Domma CMS enforces validation on both the client and server. Client-side validation provides instant feedback; server-side validation ensures data integrity even when JavaScript is bypassed or disabled.

Available validation rules

Custom error messages

Every validation rule accepts a custom error message. Define it alongside the rule in the field configuration:

{
  "name": "phone",
  "type": "text",
  "label": "Phone Number",
  "validation": {
    "required": { "value": true, "message": "Please enter your phone number." },
    "pattern": {
      "value": "^[\\d\\s\\+\\-\\(\\)]{7,20}$",
      "message": "Please enter a valid phone number."
    }
  }
}

When no custom message is provided, Domma CMS falls back to sensible defaults (e.g. "This field is required", "Must be at least 8 characters").

Wizard Mode splits a long form into a series of focused steps, each with its own title and progress indicator. This significantly improves completion rates for complex forms such as booking flows, registration processes, or multi-stage surveys.

Enabling Wizard Mode

Toggle Wizard Mode in the form settings panel in the admin. The wizard property is set to true in the stored form JSON:

{
  "slug": "booking",
  "wizard": true,
  "steps": [
    { "title": "Your Details" },
    { "title": "Choose a Date" },
    { "title": "Extras" },
    { "title": "Confirm & Submit" }
  ]
}

Assigning fields to steps

Each field has a stepTitle property that assigns it to a named step. In the admin builder, use the Step dropdown on each field card:

{
  "name": "full_name",
  "type": "text",
  "label": "Full Name",
  "stepTitle": "Your Details"
}

Wizard behaviour

The Conditional Logic Engine allows fields and wizard steps to appear or disappear in real time based on values entered elsewhere in the form. Conditions are evaluated client-side as the user types — no page reload required.

Condition syntax

Each field or step accepts a showIf property containing a condition object or an array of condition objects:

{
  "name": "company_name",
  "type": "text",
  "label": "Company Name",
  "showIf": {
    "field": "account_type",
    "operator": "equals",
    "value": "business"
  }
}

Available operators

Multiple conditions with AND / OR

Pass an array of condition objects and set a combinator to join them:

{
  "name": "discount_code",
  "type": "text",
  "label": "Discount Code",
  "showIf": {
    "combinator": "AND",
    "conditions": [
      { "field": "plan",     "operator": "equals",    "value": "pro"  },
      { "field": "referral", "operator": "isNotEmpty"                 }
    ]
  }
}

Conditions also apply to wizard steps — set showIf on a step definition using the same syntax to skip entire steps when they are not relevant to the user's choices.

Every form submission is automatically stored and accessible from the admin panel. Navigate to Admin → Forms → [Form Name] → Submissions to view, filter, export, and delete entries.

Submissions table

The submissions view displays entries in a sortable, searchable table. Each column corresponds to a form field, and the table supports:

• Column sorting — click any column header to sort ascending or descending
• Full-text search — filter entries across all field values
• Date range filter — narrow submissions to a specific time window
• Row detail view — click any row to see the full submission with all field values and metadata

Export

Export all visible submissions (respecting active filters) to CSV with a single click. The exported file includes a header row and all field values, including arrays (joined with a semicolon).

Deletion

Delete submissions individually using the Delete button on the row detail panel, or select multiple rows and use the Delete Selected bulk action. Deletion is permanent and cannot be undone.

Storage locations

Domma CMS ships with two complementary anti-spam mechanisms enabled by default. Both operate server-side and require no third-party service or CAPTCHA widget.

Honeypot field

An invisible field is injected into every rendered form. It is hidden from human visitors via CSS (display: none; visibility: hidden;) but is visible to automated bots that parse raw HTML. When the server receives a submission where the honeypot field is populated, the submission is silently rejected with a 200 OK response (to avoid revealing the mechanism to the bot).

The honeypot field name is randomised per form to prevent bots from explicitly targeting and ignoring it by name.

Rate limiting

A per-form, per-IP rate limit prevents flooding. The default limit is 5 submissions per IP address per hour. When the limit is exceeded, the server returns 429 Too Many Requests and the form displays a user-friendly message.

Configure limits per form in the form settings:

{
  "slug": "contact",
  "antispam": {
    "honeypot": true,
    "rateLimit": {
      "enabled": true,
      "max": 5,
      "windowMinutes": 60
    }
  }
}

Triggers run automatically after a form submission passes validation and is stored. Multiple triggers can be attached to a single form and they execute in parallel. Configure triggers under Admin → Forms → [Form Name] → Triggers.

Email trigger

Send a notification email to one or more addresses when a form is submitted. The email body is a template that can reference any field value using {{field.name}} placeholders.

{
  "type": "email",
  "to": ["admin@example.com", "support@example.com"],
  "subject": "New contact form submission from {{field.full_name}}",
  "body": "Name: {{field.full_name}}\nEmail: {{field.email}}\n\nMessage:\n{{field.message}}"
}

Email triggers use the SMTP credentials configured in config/site.json under the smtp key. All submission field values are available as {{field.*}} and metadata as {{meta.submittedAt}}, {{meta.ip}}, etc.

Webhook trigger

POST the submission data to an external URL as a JSON payload. Useful for integrating with CRMs, Slack, Zapier, Make, or any HTTP endpoint.

{
  "type": "webhook",
  "url": "https://hooks.example.com/form-submissions",
  "headers": {
    "Authorization": "Bearer your-token",
    "X-Source": "domma-cms"
  },
  "fieldMap": {
    "name":  "field.full_name",
    "email": "field.email",
    "body":  "field.message"
  }
}

The fieldMap property is optional. When omitted, all field values are sent as-is. When provided, only the mapped fields are included in the webhook payload under the specified key names.

Action trigger Pro

Invoke a Domma CMS Action workflow with the submission data as input. Actions are server-side workflow definitions (Pro Mode only) that can orchestrate complex multi-step processes such as creating collection entries, sending personalised emails, or calling third-party APIs.

{
  "type": "action",
  "actionSlug": "onboard-new-user",
  "inputMap": {
    "userName":  "field.full_name",
    "userEmail": "field.email",
    "plan":      "field.selected_plan"
  }
}

Once a form has been created in the admin panel, embed it on any Markdown page or content block using the [form] shortcode. The shortcode is replaced with a fully rendered, functional Domma form at render time.

Shortcode syntax

[form slug="contact"]
[form slug="newsletter" title="false"]
[form slug="booking" class="my-form"]

Shortcode attributes

Submission behaviour

• Submissions are handled via AJAX — the page does not reload on submit
• The success message configured in the form settings is displayed inline, replacing the form
• Validation errors and server-side errors are shown inline beneath the relevant field or at the top of the form
• A loading state is applied to the submit button during submission to prevent duplicate requests

Custom styling

Forms inherit your site's active Domma theme automatically. To apply additional styles, target the .dm-form wrapper or use the class shortcode attribute to add a custom class:

[form slug="contact" class="form-wide form-shadowed"]

/* In your custom CSS */
.form-wide  { max-width: 800px; margin: 0 auto; }
.form-shadowed .dm-form-inner { box-shadow: 0 4px 24px rgba(0,0,0,0.15); border-radius: 12px; padding: 2rem; }