How to Style Contact Form 7 Forms in WordPress Using CSS (Step-by-Step Guide)

With over 1 million active installations, Contact Form 7 remains one of WordPress's most popular contact form plugins. However, its default forms are quite basic. The good news? You can easily customize them with CSS in your WordPress theme. As WordPress experts at WPBeginner, we've helped thousands style their forms—here's our proven guide.

Important Note: We no longer recommend Contact Form 7. Instead, try WPForms, the most beginner-friendly contact form plugin. Download WPForms Lite for free. See our step-by-step guide to creating contact forms in WordPress.

Video Walkthrough

Subscribe to WPBeginner. If you prefer reading, continue below.

Getting Started

Assuming you've installed Contact Form 7 and created your first form, copy the shortcode and paste it into a post or page.

For this guide, we used the default form on a test page. Here's how it looks by default:

The form inherits basic styles from your theme but remains plain. We'll enhance it with custom CSS added to your theme's stylesheet or child theme.

Styling Contact Form 7 Forms with CSS

Contact Form 7 generates clean, standards-compliant HTML with unique IDs and classes like .wpcf7 for easy targeting.

In this example, we use the Google Lora font for inputs. Learn how to add Google Fonts in WordPress.

div.wpcf7 {
  background-color: #fbefde;
  border: 1px solid #f28f27;
  padding: 20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  background: #725f4c;
  color: #FFF;
  font-family: Lora, sans-serif;
  font-style: italic;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
  background-color: #725f4c;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

After applying this CSS, here's the result:

Styling Multiple Contact Form 7 Forms Differently

The above CSS applies site-wide. For unique styles per form, use the form's specific ID.

Open the page with your form, right-click the first field, and select "Inspect Element." Locate the form's opening tag, like:

<div id="wpcf7-f201-p203-o1">

This ID combines the form ID and post ID. Replace .wpcf7 with #wpcf7-f201-p203-o1 in your CSS:

div#wpcf7-f201-p203-o1 {
  background-color: #fbefde;
  border: 1px solid #f28f27;
  padding: 20px;
}
#wpcf7-f201-p203-o1 input[type="text"],
#wpcf7-f201-p203-o1 input[type="email"],
#wpcf7-f201-p203-o1 textarea {
  background: #725f4c;
  color: #FFF;
  font-family: Lora, "Open Sans", sans-serif;
  font-style: italic;
}
#wpcf7-f201-p203-o1 input[type="submit"],
#wpcf7-f201-p203-o1 input[type="button"] {
  background-color: #725f4c;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

Styling Contact Form 7 Forms with CSS Hero (No Coding Required)

Beginners: Skip CSS coding. Install CSS Hero, activate it, and click elements on your form page for a visual editor.

Read our full CSS Hero review. Use coupon WPBeginner for 34% off.

That's it! You've learned to style Contact Form 7. Also check our guide to contact form popups.

Subscribe to our WordPress YouTube Channel. Follow us on Twitter and Facebook.