Use these classes and attributes so frontend JavaScript and server validation share the same contract. Secrets never belong in markup.
Root
<form
class="notifal-form"
data-notifal-widget="form"
data-form-id="123"
data-form-multi-step="true"
data-success-message="Thanks! We will be in touch."
data-success-behavior="message"
data-success-redirect=""
data-error-message=""
data-submitter-email-field="email"
data-primary-color="#7e2bd2"
data-captcha="inherit"
>| Attribute | Purpose |
|---|---|
class="notifal-form" | Required root class |
data-notifal-widget="form" | Widget detector for HTML Builder and assets |
data-form-id | Form CPT ID |
data-form-multi-step | Enable multi-step UI when true |
data-success-message | Message shown after a successful submit |
data-success-behavior | message, redirect, or both |
data-success-redirect | Same-site URL used when behavior includes redirect |
data-error-message | Optional custom fallback error message |
data-submitter-email-field | Field machine name used for visitor confirmation email |
data-primary-color | Brand accent for the form |
data-captcha | inherit, none, google, or turnstile (keys come from Settings) |
Fields and steps
| Piece | Markup | ||
|---|---|---|---|
| Step | .notifal-form-step + data-step-index + optional data-step-title | ||
| Field wrap | .notifal-form-field-wrap | ||
| Field | .notifal-form-field + data-field-type + data-field-name | ||
| Required | data-required="true" | ||
| Unique | data-unique="true" | ||
| Regex | data-regex (server-validated, fail-closed) | ||
| Options | data-options for select / radio / checkbox groups | ||
| Label / placeholder | data-label, data-placeholder | ||
| Conditional | data-conditional-field, data-conditional-operator, data-conditional-value | ||
| Navigation | `data-form-action="next\ | back\ | submit" on .notifal-form-nav` |
Field types
text, email, tel, number, textarea, select, radio, checkbox, hidden
Conditional operators
equals, not_equals, contains, not_empty, empty
Forbidden attributes
Do not emit attributes such as data-api-key, data-webhook, data-mailchimp, data-secret, data-auth, or other secret-bearing names. Secrets belong on the Form CPT and Settings → Forms only.