Modern Styling for Contact Form 7
Gives Contact Form 7 forms clean full-width fields, clear focus outlines, readable error messages and a solid submit button that work in light and dark themes.
Opens WPIDE on
Code
.wpcf7 {
--wpide-cf7-accent: #2563eb;
--wpide-cf7-border: #cbd5e1;
--wpide-cf7-error: #dc2626;
--wpide-cf7-success: #16a34a;
--wpide-cf7-radius: 8px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0.7em 0.9em;
border: 1px solid var(--wpide-cf7-border);
border-radius: var(--wpide-cf7-radius);
background: transparent;
color: inherit;
font: inherit;
font-size: max(16px, 1em);
}
.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible {
outline: 2px solid var(--wpide-cf7-accent);
outline-offset: 1px;
border-color: var(--wpide-cf7-accent);
}
.wpcf7 label {
display: block;
font-weight: 600;
}
.wpcf7 input[type="submit"] {
padding: 0.75em 1.6em;
border: 0;
border-radius: var(--wpide-cf7-radius);
background: var(--wpide-cf7-accent);
color: #fff;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.wpcf7 input[type="submit"]:disabled {
opacity: 0.6;
cursor: progress;
}
.wpcf7 .wpcf7-not-valid {
border-color: var(--wpide-cf7-error);
}
.wpcf7 .wpcf7-not-valid-tip {
margin-top: 0.3em;
color: var(--wpide-cf7-error);
font-size: 0.875em;
}
.wpcf7 form .wpcf7-response-output {
margin: 1em 0 0;
padding: 0.8em 1em;
border-radius: var(--wpide-cf7-radius);
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: var(--wpide-cf7-success);
}Notes
Change the custom properties at the top to match your brand colors.
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.