How to Style Contact Form 7 Without a Plugin

Contact Form 7 intentionally outputs minimal CSS so it does not clash with your theme. This means the default form looks plain – unstyled inputs, no focus indication, a basic submit button. The advantage is that you have complete styling control. This guide provides the CSS patterns for all form elements without any additional plugin.

Understanding the Contact Form 7 HTML Structure

Before writing CSS, know what elements you are targeting. Contact Form 7 wraps the form in a .wpcf7 div. The form itself has the class .wpcf7-form. Individual field wrappers have the class .wpcf7-form-control-wrap. Input fields have the class .wpcf7-form-control. The submit button has .wpcf7-submit. Error messages have .wpcf7-not-valid-tip.

Step 1: Style the Input Fields

Add this CSS to your theme’s Additional CSS or child theme stylesheet:

/* All text inputs, email, phone, textarea */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  background-color: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

/* Focus state */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  border-color: #0073aa; /* your brand color */
  box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
  outline: none;
}

/* Textarea specific */
.wpcf7-form textarea {
  min-height: 120px;
  resize: vertical;
}

Need help with your WordPress site? Describe your project and get a free estimate.

Step 2: Style the Submit Button

.wpcf7-submit {
  display: inline-block;
  padding: 14px 32px;
  background-color: #0073aa; /* your brand color */
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.wpcf7-submit:hover {
  background-color: #005a87; /* darker shade */
}

.wpcf7-submit:active {
  transform: translateY(1px);
}

/* Disabled state while submitting */
.wpcf7-submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

Step 3: Style Validation Errors

/* Highlight invalid fields */
.wpcf7-form .wpcf7-not-valid {
  border-color: #dc3232 !important;
}

/* Error message text */
.wpcf7-not-valid-tip {
  display: block;
  font-size: 13px;
  color: #dc3232;
  margin-top: 4px;
}

/* Success/failure response messages */
.wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 15px;
}

.wpcf7-form.sent .wpcf7-response-output {
  border-color: #46b450;
  background-color: #f0fff1;
  color: #1a7322;
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output {
  border-color: #dc3232;
  background-color: #fff5f5;
  color: #9b1c1c;
}

Step 4: Add Spacing Between Fields

.wpcf7-form p {
  margin-bottom: 20px;
}

.wpcf7-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

Dark Mode Support

If your site supports dark mode via a toggle or via the prefers-color-scheme media query, Contact Form 7 fields need dark mode variants. The default white background and dark border become invisible on dark backgrounds. Add:

@media (prefers-color-scheme: dark) {{
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form textarea {{
    background-color: #2a2a2a;
    border-color: #555;
    color: #e0e0e0;
  }}
  .wpcf7-form label {{
    color: #e0e0e0;
  }}
}}

If your dark mode is controlled by a CSS class (e.g., body.dark-mode) rather than the media query, use .dark-mode .wpcf7-form input as the selector instead.

Styling the Checkbox and Radio Fields

Default checkboxes and radio buttons are styled by the browser and cannot be easily customised with CSS alone. For custom-styled checkboxes (a tick inside a colored square) and radio buttons (a filled circle), hide the native input and style a custom element:

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}}

.wpcf7-form .wpcf7-list-item-label::before {{
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #ddd;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
  transition: background-color 0.2s, border-color 0.2s;
}}

.wpcf7-form input[type="checkbox"]:checked + .wpcf7-list-item-label::before {{
  background-color: #0073aa;
  border-color: #0073aa;
}}