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
• theme.json
• Classes
• Template overriding
• Markup filters
• Disabling the plugin CSS
• Email template

Design tokens

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

For example:

.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:

{
    "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:

.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      <- overrides the text control
        ├── select.php    <- overrides selects
        └── default.php   <- fallback for every other type

The override replaces the control element only, the wrapper, label, help text and error message still come from the plugin, so accessibility keeps working. Inside the template you have $field (the field settings), $value and $ctx. Make sure you keep using $ctx['id'] and $ctx['name']:

<input type="text"
    id="<?php echo esc_attr( $ctx['id'] ); ?>"
    name="<?php echo esc_attr( $ctx['name'] ); ?>"
    class="my-input"
    value="<?php echo esc_attr( $value ); ?>"
    <?php echo $ctx['required'] ? 'required' : ''; ?> />

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.

Disabling the plugin CSS

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

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