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.
Opens WPIDE on
Code
.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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.