Styling Forms with Custom CSS

A published form is designed to sit inside your own page, so Doxtly renders it with a deliberately neutral layout: dark text on white, plain field controls, no card, no border and no brand colour. On its own page the form uses the system font; embedded in your site it takes the font of the page around it. Everything beyond that baseline is yours to decide, and you decide it with the Custom CSS field in the form editor.

Your CSS reaches everything the form shows once it has loaded, not only its fields: the thank-you message, the error messages, and the menus, date pickers and signature dialog that open over the form. The loading placeholder, the password prompt and the message for a form that cannot be opened appear before the form — and its CSS — has been loaded, so they always keep the neutral look.

To make that practical, every part Doxtly renders carries a predictable class name. You never have to inspect the page and guess at a generated selector.

How custom CSS is applied

The CSS you enter is automatically scoped to the form before it is injected, so it can never leak into the surrounding page. A rule you write as:

.doxtly-field--name-email input {
  background: #fffbe6;
}

is served as:

.doxtly-form-scope .doxtly-field--name-email input {
  background: #fffbe6;
}

@media, @supports, @keyframes, @font-face and @import rules are preserved, and comments are kept intact.

Rules for html, body and :root are left unscoped. They style the page the form is published on — the form’s own page and the iframe snippet — so body { background: … } sets the colour around the form. Inside the embed script they have no effect, because the page there is yours.

Class reference

Class	Applied to
.doxtly-form-scope	The outermost wrapper of everything the form shows. Your CSS is scoped to it.
.doxtly-page	The column the form sits in: centred with a maximum width on the form’s own page, the full width of your container when embedded, where it also carries .doxtly-page--embedded.
.doxtly-form	The form itself.
.doxtly-element	Every rendered element, of any kind.
.doxtly-element--<type>	The element’s type: section, container, dynamic_fieldset, paragraph, header, divider, image, video, field.
.doxtly-field	Every input field wrapper.
.doxtly-field--<type>	The field’s type: text, number, email, textarea, checkbox, select, radio, scale, date, time, password, file, signature, computed.
.doxtly-field--name-<path>	The field’s own data path, so you can style one specific field.
.doxtly-field-info	The help text shown above a field.
.doxtly-section-title / -description	The title and description of a section.
.doxtly-fieldset-title	The label of a repeatable group of fields.
.doxtly-fieldset-row	One entry of a repeatable group.
.doxtly-fieldset-empty	The note shown while a repeatable group has no entries.
.doxtly-wizard-progress	The multi-page progress indicator. Also --bar or --steps.
.doxtly-actions	The row holding the form buttons.
.doxtly-button	Every form button.
.doxtly-button--submit	The submit button. It also keeps the legacy .form-submit class.
.doxtly-button--next / --prev	The multi-page navigation buttons.
.doxtly-button--add-row / --remove-row	The buttons that add and remove entries of a repeatable group.
.doxtly-alert--error	The message shown when a submission fails. Also carries .doxtly-alert.
.doxtly-loading	The placeholder shown while the form loads.
.doxtly-popups	Where select menus, date pickers and the signature dialog open, so a rule such as .doxtly-popups .MuiMenuItem-root reaches them.

Messages shown instead of the form

Before the form opens and after it is sent, a message takes its place. Every message uses the same classes, and a modifier names the situation.

Class	Applied to
.doxtly-status	Every message.
.doxtly-status--<kind>	The situation: success, awaiting-signing, signing-failed, signing-fallback, not-found, load-error, missing-params, password.
.doxtly-status-icon	The icon above the title.
.doxtly-status-title	The title.
.doxtly-status-message	The text under the title, including your own success message.
.doxtly-status-note	The submission reference shown while documents are prepared for signing.
.doxtly-password	The password field and button of a password-protected form.

Field name classes

doxtly-field--name- is built from the field’s data path. Dots become hyphens and any other character outside A-Z a-z 0-9 _ - is removed, so a field stored at work.email is styled through .doxtly-field--name-work-email.

Your own classes come last

Anything you type into an element’s CSS class property in the editor is added after the generated classes, so your class wins whenever specificity is equal:

<div class="doxtly-element doxtly-element--field doxtly-field doxtly-field--text
            doxtly-field--name-full_name my-own-class">

Examples

Give the form a narrower column, a typeface and a page colour:

body {
  background: #f4f4f5;
}

.doxtly-page {
  max-width: 640px;
  font-family: Inter, system-ui, sans-serif;
}

Turn sections into cards:

.doxtly-element--section {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 24px;
}

Style one specific field:

.doxtly-field--name-message textarea {
  background: #fffbe6;
  min-height: 160px;
}

Make every required field’s label stand out:

.doxtly-field label .MuiFormLabel-asterisk {
  color: #dc2626;
  font-weight: 700;
}

Restyle the submit button and put it full width on phones:

.doxtly-button--submit {
  background: #111827;
  border-radius: 0;
  padding: 12px 32px;
  text-transform: none;
}

@media (max-width: 600px) {
  .doxtly-actions {
    display: block;
  }

  .doxtly-button--submit {
    width: 100%;
  }
}

Hide the help text on a single field:

.doxtly-field--name-internal_ref .doxtly-field-info {
  display: none;
}

Match the thank-you message to your brand:

.doxtly-status--success .doxtly-status-icon {
  color: #7c3aed;
}

.doxtly-status--success .doxtly-status-title {
  font-size: 2rem;
}

Embedding

The same classes and the same custom CSS apply when the form is embedded in your site through the iframe snippet, the embed script or the WordPress plugin, so a form you style once looks the same wherever you publish it.

Forms placed in an interactive document are different: they are shown on a Doxtly page, next to the documents, and take Doxtly’s own styling there.