Form Elements¶
These elements build contact and lead forms. The Form element is the container; the field elements go inside it. Back to the element index.
Every field maps to lead data
For a submission to become a lead, each field must be mapped to a lead field. Every field element has a Lead Data tab where you set what it represents (Customer Name, Email, and so on). See lead forms for the full walkthrough.
Tabs every field shares
- Lead Data - map the field to a lead field (above).
- Conditional Logic - show or hide the field based on another field's value.
- Advanced HTML - set a custom Input ID / Input Class.
Most fields also share Input Name (the key the value is stored under) and Required Field. Fields with visual controls split into Options and Style tabs below.
Label and Label Visibility
Text, Textarea, Dropdown, Checkbox, and Radio fields have a Label option plus a Label Visibility choice (Visible or Screen reader only). A label is wired to its control for assistive technology, so add one for every field. A placeholder is not a substitute for a label. Left blank, the field keeps using its Input Name as an invisible label, matching the previous behaviour.
Required fields and screen-reader feedback
Required fields are marked aria-required. On a failed submit each empty required field gets an inline error (wired to the field with aria-describedby, flagged aria-invalid), focus moves to the first one, and a short summary plus the field's message are announced through the form's live region. The submit result (the green success or red error banner) is announced the same way. Messages clear as soon as the visitor edits the field. Required dropdowns are now enforced in the browser before submit, not only on the server.
Form¶
[dms_form] · Anywhere - the container that holds the fields.
| Option | What it does |
|---|---|
| Form | Which saved form this element renders. |
| Alert Display Time (seconds) | Contact forms only. How long the success or error message stays up. Default 3. Use 0 to keep it visible; a form in a popup then stays open too. After a submit the page scrolls to the message and leaves scroll-margin-top (20px) above it. On a site with a sticky header, raise .dms-form-alerts { scroll-margin-top } in your CSS to the header height. |
| Form ID / Form Class | Custom HTML id and class (Advanced HTML). |
Text Field¶
[dms_form_input_text] · Form - a single-line text input.
| Option | What it does |
|---|---|
| Label / Label Visibility | Field label and whether it shows on screen or is screen-reader only. |
| Text Type | The input type (text, email, tel, and so on). |
| Placeholder | Placeholder text. |
| Minimum / Maximum / Step | Date, number and time fields only. Limit the allowed range and the increment (for example Step 0.01 for prices). On a date field, enter today as the Minimum to block past dates, or as the Maximum to block future ones. |
| Default Value | A pre-filled value, optionally from DMS Dynamic Tags. |
| Style group | Controls |
|---|---|
| Input | Height, Typography, Padding, Border Radius, Border |
| Icon | Icon, Alignment, Position, Colour, Size |
Textarea¶
[dms_form_textarea] · Form - a multi-line text input.
| Option | What it does |
|---|---|
| Label / Label Visibility | Field label and whether it shows on screen or is screen-reader only. |
| Placeholder | Placeholder text. |
| Default Value | A pre-filled value, optionally from DMS Dynamic Tags. |
| Style group | Controls |
|---|---|
| Textarea | Height, Typography, Padding, Border Radius, Border |
Dropdown Field¶
[dms_form_select] · Form - a select dropdown.
| Option | What it does |
|---|---|
| Label / Label Visibility | Field label and whether it shows on screen or is screen-reader only. |
| Dropdown Options | Where the options come from. |
| Custom Options | Your own options, when not sourced automatically. |
| Multiple Selection | Allow selecting more than one. |
| First Option Blank + First Option Text | Start with an empty/prompt option. |
| Default Value | The option selected by default. |
| Style group | Controls |
|---|---|
| Dropdown | Height, Typography, Padding, Border Radius, Border |
Checkbox Field¶
[dms_form_checkbox] · Form - one or more checkboxes.
| Option | What it does |
|---|---|
| Label / Label Visibility | Group label and whether it shows on screen or is screen-reader only. |
| Checkbox Options / Custom Options | The choices offered. |
| Columns | How many columns the choices use. |
| Selected Value | Which option(s) are ticked by default. |
| Style group | Controls |
|---|---|
| Label | Label Typography |
Radio Field¶
[dms_form_radio] · Form - a set of radio buttons.
| Option | What it does |
|---|---|
| Label / Label Visibility | Group label and whether it shows on screen or is screen-reader only. |
| Radio Options / Custom Options | The choices offered. |
| Columns | How many columns the choices use. |
| Selected Value | Which option is selected by default. |
File Field¶
[dms_form_input_file] · Form - a file upload.
| Option | What it does |
|---|---|
| Maximum Filesize | Largest allowed file, in bytes. |
| Acceptable Filetypes | Which file types are allowed. |
Signature Field¶
[dms_form_signature] · Form - a signature pad; the signature is included in the outgoing email as an image.
| Option | What it does |
|---|---|
| Height | Height of the signature canvas, in pixels. |
| Pen Color | Colour of the drawn line. |
| Background Color | Canvas background colour. |
| Style group | Controls |
|---|---|
| Canvas | Canvas Border |
Consent Field¶
[dms_form_consent] · Form - a required consent checkbox.
| Option | What it does |
|---|---|
| Consent Text | The text shown beside the checkbox. |
| Style group | Controls |
|---|---|
| Label | Label Typography |
Category Dropdown Field¶
[dms_form_category_dropdown] · Form - a dropdown populated from a category's terms.
| Option | What it does |
|---|---|
| Dropdown Options | The category whose terms fill the dropdown. |
| First Option Blank + First Option Text | Start with an empty/prompt option. |
| Load All Terms | Load every term up front. |
| Min / Max | Restrict the selectable range. |
| Dropdown Text / No Dropdown Options Text | Default and empty-state labels. |
| Default Value | The option selected by default. |
Captcha¶
[dms_form_captcha] · Form - a captcha field to cut down spam.
| Option | What it does |
|---|---|
| Captcha Type | Which provider: Cloudflare Turnstile, hCaptcha, reCAPTCHA, or a simple math question. |
| Provider settings | Style/size/theme options appear for the provider you pick. |
| Style group | Controls |
|---|---|
| Math Question | Typography (for the math-question captcha) |
Captcha uses the keys configured in your settings.
UTM Hidden Field¶
[dms_form_input_utm_hidden] · Form - a hidden field that captures a UTM value from the current URL or stored cookie (for attribution).
| Option | What it does |
|---|---|
| UTM Parameter | Which UTM value to capture (e.g. utm_source). |
Submit Button¶
[dms_form_submit] · Form - submits the form.
| Option | What it does |
|---|---|
| Label | The button text. |
| Disable Until Valid | Keep the button disabled until required fields are filled. |
| Style group | Controls |
|---|---|
| Alignment | Position, Text Alignment |
| Icon | Icon, Alignment, Colour, Size, Padding |
| Button (normal / hover / disabled) | Background, Border, Border Radius, Typography, Padding, Opacity |
Reset Button¶
[dms_form_reset] · Form - clears the form's fields.
| Option | What it does |
|---|---|
| Label | The button text. |
| Style group | Controls |
|---|---|
| Alignment | Position, Text Alignment |
| Icon | Icon, Alignment, Colour, Size, Padding |
| Button (normal / hover) | Background, Border, Border Radius, Typography, Padding |
Back to the element index.