# Styles for the WPIDE Form Shortcodes

> Gives the contact, quote, newsletter and other WPIDE form shortcodes a clean, consistent look with full-width fields, clear notices and a solid button that follows your theme colors.

- Type: CSS
- Runs: Site-wide header
- Category: [Forms](https://wpide.com/library/category/forms/)
- Tags: forms, styling, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/form-shortcode-styles/

## Code

```css
.wpide-form {
    --wpide-form-accent: currentColor;
    --wpide-form-border: rgba(127, 127, 127, 0.45);
    --wpide-form-radius: 8px;
    max-width: 640px;
}

.wpide-form label {
    font-weight: 600;
}

.wpide-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.wpide-form select,
.wpide-form textarea {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.3em;
    padding: 0.7em 0.9em;
    border: 1px solid var(--wpide-form-border);
    border-radius: var(--wpide-form-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: max(16px, 1em);
}

.wpide-form input:focus-visible,
.wpide-form select:focus-visible,
.wpide-form textarea:focus-visible {
    outline: 2px solid var(--wpide-form-accent);
    outline-offset: 2px;
}

.wpide-form button[type="submit"] {
    padding: 0.75em 1.6em;
    border: 2px solid var(--wpide-form-accent);
    border-radius: var(--wpide-form-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.wpide-form button[type="submit"]:hover {
    background: rgba(127, 127, 127, 0.12);
}

.wpide-form .wpide-form-notice {
    padding: 0.8em 1em;
    border-left: 4px solid #2e7d32;
    border-radius: 4px;
    background: rgba(46, 125, 50, 0.08);
}

.wpide-form .wpide-form-error {
    border-left-color: #c62828;
    background: rgba(198, 40, 40, 0.08);
}

.wpide-newsletter form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.wpide-newsletter input[type="email"] {
    flex: 1 1 220px;
    margin-top: 0;
}
```

## Notes

Targets the .wpide-form wrapper used by the library's form shortcodes; change the custom properties at the top.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Styles for the WPIDE Form Shortcodes" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/