Customization, Veldform · vanrossum.dev    

       vanrossum.dev 

Customization, Veldform
=======================

  vanrossum.dev  

  [      vanrossum.dev ](https://vanrossum.dev)                      

 [home](https://vanrossum.dev) / [veldform](https://vanrossum.dev/products/veldform) / docs 

 [Veldform](https://vanrossum.dev/products/veldform)  / Docs  · WordPress plugin

 Customization
==============

Veldform is built to be styled. All plugin CSS lives in a CSS layer (`@layer veldform`), which means any rule you write in your theme wins, no specificity wars, no `!important`.

- [Design tokens](#design-tokens)
- [theme.json](#themejson)
- [Classes](#classes)
- [Template overriding](#template-overriding)
- [Markup filters](#markup-filters)
- [Disabling the plugin CSS](#disabling-the-plugin-css)
- [Email template](#email-template)

Design tokens
-------------

The quickest way to restyle your forms is overriding the design tokens. They are scoped to `.vf-form`:

TokenDefaultControls`--vf-color-accent``#2271b1`Buttons, focus rings, active step`--vf-color-error``#d63638`Validation messages, required asterisk`--vf-color-border``#8c8f94`Input and fieldset borders`--vf-color-text``currentColor`Form text`--vf-space``1rem`Vertical rhythm and grid gap`--vf-field-radius``4px`Input and button corner radius`--vf-control-pad``0.5rem 0.6rem`Input padding`--vf-max-width``40rem`Form max widthFor example:

```css
.vf-form {
    --vf-color-accent: var(--wp--preset--color--primary);
    --vf-field-radius: 0;
}

```

theme.json
----------

If you're building a block theme, you can set the tokens from `theme.json` under `settings.custom.veldform`. The keys map to the token names without the `--vf-` prefix:

```json
{
    "settings": {
        "custom": {
            "veldform": {
                "accent": "#0a4b78",
                "radius": "0px",
                "max-width": "48rem"
            }
        }
    }
}

```

Classes
-------

The rendered markup uses one shallow class per element, and the class names are a stable API, safe to target from your theme. The main ones:

- `.vf-form`, the form element
- `.vf-row`, a row (12-column grid)
- `.vf-field` and `.vf-field--{type}`, a field wrapper, e.g. `.vf-field--email`
- `.vf-label`, `.vf-required`, `.vf-help`, `.vf-field-error`
- `.vf-input`, `.vf-textarea`, `.vf-select`, `.vf-file`
- `.vf-group` / `.vf-legend`, radio and checkbox fieldsets
- `.vf-submit`, `.vf-prev`, `.vf-next`, buttons
- `.vf-errors`, the error summary, `.vf-success`, the confirmation
- `.vf-steps`, the progress indicator on multi-step forms

Every field wrapper also carries `data-vf-field="f_yourfield"`, so you can target one specific field:

```css
.vf-form [data-vf-field="f_message"] .vf-textarea {
    min-height: 200px;
}

```

Template overriding
-------------------

If CSS isn't enough, your theme can take over the markup of any field type. Veldform looks for templates in your (child) theme:

```
your-theme/
└── veldform/
    └── fields/
        ├── text.php       />

```

Markup filters
--------------

For surgical changes without copying a template, there are three filters: `veldform/render/control` (the bare control), `veldform/render/field` (the complete field block) and `veldform/form/wrapper` (the whole form). See [Action and filter hooks](/products/veldform/docs/hooks).

Disabling the plugin CSS
------------------------

Want to style everything yourself, from scratch? Stop the stylesheet from loading:

```php
add_filter( 'veldform/render/styles', '__return_false' );

```

The filter also receives the form ID, so you can disable it for specific forms only.

Email template
--------------

Notification emails are wrapped in a minimal HTML template (logo, body, footer). You can:

- Turn it off globally under `Veldform` -> `Settings`
- Override it from your theme with `your-theme/veldform/email.php` (receives `$content`, `$logo`, `$footer` and `$context`)
- Adjust parts of it with the `veldform/email/logo`, `veldform/email/footer` and `veldform/email/html` filters

Stuck?

Feel free to reach out.

 [get in touch →](https://vanrossum.dev/contact) 

   © 2026 Jeffrey van Rossum 

  vanrossum.dev vanrossum.dev