Free tools Windows power users keep installed
One-click scans. No signup required.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Use CSS to style Contact Form 7, not edits to the plugin’s files. Put your rules in the theme stylesheet, a child theme stylesheet, or WordPress’s Additional CSS panel, and scope selectors beneath Contact Form 7’s .wpcf7 wrapper. Add an id or class to individual form-tags when a field needs its own treatment, and style response and validation states deliberately.
Contact Form 7 author Takayuki Miyoshi calls stylesheet editing “the best method to style contact forms” in the official Styling contact form guide.
1. Inspect the rendered form and choose a safe selector scope
Contact Form 7 wraps a rendered form in .wpcf7. Use that class as an ancestor so your rules do not change unrelated inputs elsewhere on the site.
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
width: 100%;
box-sizing: border-box;
}The width and box-sizing values are a practical starting pattern, not a promise about Contact Form 7’s defaults. Adjust them to your theme’s spacing, typography and layout system. The official guide’s examples likewise narrow selectors by adding the .wpcf7 ancestor.
2. Add a hook for one field
Form-tags accept options for an HTML id and one or more classes. For example:
[text* contact-name id:contact-name class:wide-field]You can then target the unique field with #contact-name or reuse the rule with .wide-field:
.wpcf7 .wide-field {
min-height: 3rem;
}
.wpcf7 #contact-name {
border-color: #2563eb;
}Prefer a class when the same styling may apply to several controls. Use an ID for a genuinely unique field. If you need to identify the whole form rather than a control, Contact Form 7 also documents html_id and html_class shortcode options.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
3. Include every input type you mean to style
An email field is rendered as input[type="email"], not input[type="text"]. That is why a rule aimed only at text inputs can leave an email address field looking different.
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
font: inherit;
padding: .75rem;
border: 1px solid #9ca3af;
border-radius: .35rem;
}Add only the control types your form uses, or use a shared class if your theme supplies one. Check the browser’s inspector when a selector appears not to work; the rendered element and its classes are the authority.
4. Style success, failure and validation feedback
The response area uses .wpcf7-response-output. Contact Form 7 adds state classes to the form, including init, sent, failed, aborted, spam, invalid and unaccepted. Combine the state with the response selector to give users a clear result.
Rank #4
.wpcf7 .wpcf7-response-output {
margin: 1rem 0 0;
padding: .75rem 1rem;
border: 2px solid #6b7280;
}
.wpcf7.sent .wpcf7-response-output {
border-color: #15803d;
}
.wpcf7.failed .wpcf7-response-output,
.wpcf7.invalid .wpcf7-response-output,
.wpcf7.spam .wpcf7-response-output {
border-color: #b91c1c;
}
.wpcf7 .wpcf7-not-valid-tip {
color: #b91c1c;
font-size: .9rem;
}.wpcf7-not-valid-tip targets field-level validation messages. Do not communicate state with color alone: retain readable text and sufficient contrast, and add another visual cue such as a border, icon or heading treatment.
Recommended Free Tools
5. Choose where the CSS lives
| Location | Scope and control | Theme-update maintenance | Editing ease |
|---|---|---|---|
| Theme stylesheet | Direct control within the active theme | Rules are tied to that theme’s files | Best for developers already working in the stylesheet |
| Child-theme stylesheet | Keeps custom rules separate from the parent theme | Useful when the parent theme is updated frequently | Requires a configured child theme |
| WordPress Additional CSS | Site-level custom CSS through the Customizer or Site Editor’s available Additional CSS interface | Convenient, but still dependent on the active theme’s markup and selectors | Easiest for small changes without file access |
The official styling guide recommends the theme stylesheet and also lists Additional CSS and a child theme as options. Never edit CSS inside the Contact Form 7 plugin directory: a plugin update can overwrite those changes.
Best Value
6. Keep form markup, labels and email delivery aligned
Associate labels with controls
The Form tab accepts HTML alongside Contact Form 7 form-tags. You can wrap a control in its label:
<label>Your name
[text* contact-name]
</label>Or use a separate label whose for value matches the form-tag’s ID:
<label for="contact-name">Your name</label>
[text* contact-name id:contact-name]For checkbox or radio groups containing multiple controls, use Contact Form 7’s use_label_element option rather than placing multiple controls inside one label.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesAdd the corresponding mail-tag
Changing the Form tab does not automatically change the Mail tab. If a new field should appear in the submitted email, add its matching mail-tag to the message template; otherwise the control can display correctly while its value is absent from the notification.
7. A practical troubleshooting checklist
- Nothing changes: inspect the rendered element and confirm the selector includes
.wpcf7and the actual input type or class. - Email looks different: add
input[type="email"]; a text-input selector does not match it. - Only one field needs a change: add an
id:orclass:option to that form-tag and target the resulting hook. - Rules disappear after an update: move them out of the plugin directory into the theme, child theme or Additional CSS.
- Users cannot tell what happened: style
.wpcf7-response-outputby state and keep the message text, contrast and non-color cues clear. - The field displays but is missing from email: add its mail-tag in the Mail tab.
Contact Form 7 version note
A May 15, 2026 release announcement identified Contact Form 7 version 6.1.6, tested with WordPress 7.0 and requiring WordPress 6.7 or higher. It also described a CSS change to the screen-reader response element. That announcement does not establish that 6.1.6 remains the newest release on September 30, 2026, so check the plugin’s current release information before treating it as the latest version. Examples in the styling guide refer to version 5.2.2 defaults and should be read as illustrations, not guarantees about current styling.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
