CSS Overrides

5 min read

For styling needs that go beyond the theme and branding controls, WittyForm supports custom CSS as part of your white-label branding. Your styles are injected into the form, scoped to the form container, and sanitized before they run.

Adding custom CSS

Custom CSS is set in your white-label branding settings, not on an individual form. Once saved, it applies to the forms that use that branding. The white-label features are available on paid plans.

Custom CSS runs inside a scoped container alongside your form. Your styles will not leak into the host page when the form is embedded.

What the sanitizer allows

Before your CSS runs, WittyForm sanitizes it to keep forms safe. Knowing the rules up front saves time:

At-rules are removed. Anything that starts with @, including @media, @font-face, @import, and @keyframes, is stripped. Custom CSS cannot use at-rules today, so responsive breakpoints and imported fonts are not available through this feature.
url() values are removed. You cannot reference external images, fonts, or background images. Use solid colors, gradients, borders, spacing, and typography instead.
Only standard property and value pairs are kept. Dangerous selectors and properties (anything with tags, scripts, or behaviors) are dropped.
There is a size limit. Keep your CSS focused; very large stylesheets are truncated.

Writing selectors

Target elements with standard CSS selectors (element, class, attribute, and pseudo-class selectors all work). One stable hook you can rely on is the Custom HTML field wrapper, which always carries the class .wf-custom-html:

/* Style content inside a Custom HTML block */
.wf-custom-html {
  font-size: 15px;
  line-height: 1.6;
}

/* Restyle inputs and buttons within the form */
input,
textarea,
select {
  border-radius: 12px;
  padding: 14px 16px;
}

button {
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

Because your CSS is scoped to the form container, these rules apply only to the form, not to the rest of the embedding page.

Examples

Custom button style

button {
  background: linear-gradient(135deg, #b45309, #92400e);
  border: none;
  border-radius: 9999px;
  padding: 12px 32px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  transition: transform 0.2s;
}

button:hover {
  transform: translateY(-1px);
}

Custom input styling

input,
textarea,
select {
  border: 2px solid #e7e2d8;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  transition: border-color 0.2s;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #b45309;
  outline: none;
}

For most styling needs, start with the theme and branding controls (colors, fonts, logo, and layout). Reach for custom CSS only for the finishing touches that those controls do not cover, and remember that at-rules and external assets are not supported.

PreviousBrand Audit NextCustom Domains