Core Forms
Get Core Forms

CSS Theming

Core Forms ships with a classless-first default theme (form-theme.css) that styles HTML form elements inside .cf-form containers. The theme uses CSS custom properties for easy customization.

Default Theme

The theme is loaded automatically and styles form elements semantically -- no special class names are required on individual fields. Just write standard HTML:

<p>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" required />
</p>
<p>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" required />
</p>
<p>
    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>
</p>
<p>
    <button type="submit">Send</button>
</p>

The theme handles input styling, labels, focus states, validation states, buttons, fieldsets, headings, dividers, and responsive behavior.

CSS Custom Properties

Override any of these on .cf-form to customize the appearance:

Core Variables

Variable Default Description
--cf-font inherit Font family
--cf-text #1d2327 Primary text color
--cf-text-light #646970 Secondary text / help text color
--cf-bg #fff Input background color
--cf-border #8c8f94 Input border color
--cf-border-light #c3c4c7 Light border (fieldsets, dividers)
--cf-focus #2271b1 Focus ring and button color
--cf-focus-shadow rgba(34,113,177,0.25) Focus ring shadow
--cf-error #d63638 Error/required indicator color
--cf-success #00a32a Success message color
--cf-radius 4px Border radius
--cf-spacing 20px Vertical spacing between fields
--cf-input-padding 8px 12px Input padding

Customization Example

/* Custom brand theme */
.cf-form {
    --cf-font: "Inter", system-ui, sans-serif;
    --cf-text: #111827;
    --cf-border: #d1d5db;
    --cf-focus: #4f46e5;
    --cf-focus-shadow: rgba(79, 70, 229, 0.25);
    --cf-radius: 8px;
    --cf-spacing: 24px;
    --cf-input-padding: 12px 16px;
}

Per-Form Custom CSS

Target a specific form by its ID or class:

/* Style a specific form */
#cf-form-42 {
    --cf-focus: #059669;
    --cf-radius: 12px;
    max-width: 480px;
}

Styled Elements

Inputs

All standard input types are styled: text, email, url, tel, number, password, date, time, datetime-local, color, range, select, textarea.

.cf-form input[type="text"],
.cf-form select,
.cf-form textarea {
    display: block;
    width: 100%;
    padding: var(--cf-input-padding);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius);
}

Focus States

All inputs receive a consistent focus ring:

.cf-form input:focus,
.cf-form select:focus,
.cf-form textarea:focus {
    outline: none;
    border-color: var(--cf-focus);
    box-shadow: 0 0 0 2px var(--cf-focus-shadow);
}

Buttons

Submit buttons are styled with the focus color:

.cf-form button[type="submit"] {
    color: #fff;
    background: var(--cf-focus);
    border: 1px solid var(--cf-focus);
    border-radius: var(--cf-radius);
    padding: 10px 24px;
    font-weight: 600;
}

Validation States

Invalid fields and error messages:

.cf-form .cf-invalid {
    border-color: var(--cf-error);
    box-shadow: 0 0 0 1px var(--cf-error);
}

.cf-form .cf-field-error {
    color: var(--cf-error);
    font-size: 13px;
}

Messages

Success and error messages after submission:

.cf-form .cf-message-success {
    background: #ecf7ed;
    border: 1px solid #b8e6be;
    color: #0d5e12;
}

.cf-form .cf-message-error {
    background: #fcf0f1;
    border: 1px solid #f0b8b8;
    color: #8b1a1a;
}

Disabling the Default Theme

Disable the default theme in form settings to use your own CSS entirely:

add_filter( 'cf_form_default_settings', function( $settings ) {
    $settings['disable_default_css'] = true;
    return $settings;
} );

Or toggle it per form in Settings > Disable Default CSS.

Responsive Behavior

The default theme includes a mobile breakpoint at 480px:

@media (max-width: 480px) {
    .cf-form {
        --cf-spacing: 16px;
    }
    .cf-form button[type="submit"],
    .cf-form input[type="submit"] {
        width: 100%;
    }
}

The form has a default max-width: 640px. Override this on .cf-form to change the form width.

Multi-Step Overrides

For multi-step forms, the theme includes styles for progress indicators and step navigation:

.cf-form .cf-progress { margin-bottom: var(--cf-spacing); }
.cf-form .cf-step-nav { margin-top: var(--cf-spacing); border-top: 1px solid var(--cf-border-light); }

Dark Mode

Create a dark mode variant by overriding the custom properties:

@media (prefers-color-scheme: dark) {
    .cf-form {
        --cf-text: #e5e7eb;
        --cf-text-light: #9ca3af;
        --cf-bg: #1f2937;
        --cf-border: #4b5563;
        --cf-border-light: #374151;
    }
}

Related