How to style Contact Form 7 forms in WordPress

One of the main benefits of making a website is that you can always be accessible to the visitors/customers. Appealing Contact Form is a great opportunity to make that trick.

Contact Form 7 is one of the best choices for that.

The popularity of Contact Form 7 plugin is enormous according to its flexibility, ease of use and simple implementation. However, there is nothing perfect and the plugin has its drawbacks.

By default the Contact Form 7 plugin does not style its forms, and though looks a bit simple.

Hardly surprising, that we insist on setting high standards when it is concerned with our reputation or business.

The website is the face of its owner and it is necessary to achieve a flawless result.

And now, we will learn how to deal with lack of styles by adding your own styles to the form and make it really attractive and catch visitor’s eye immediately.

Where to add your custom CSS rules?

We can do it easily by adding simple CSS rules under Appearance -> Customize -> Additional CSS in your admin panel.

How to add styles to the whole form?

Let’s start with basics. The top-level element of contact form has wpcf7 class. To style the whole contact form, add style rules for that class selector. It will add background color and border to the whole form.

.wpcf7 {
    background-color: #eaf6ff;
    border: 7px solid #0f80be;
}

As you see, there are some spacing issues, so let’s add the padding to the form:

div.wpcf7 {
    padding: 3% 5% 3% 5%;
}

How to add styles to the individual fields?

Great, it looks much better now. Let’s add styles to individual fields. The most common types of fields are text, email, and textarea so we add a style rule for them

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    background-color: #fff;
}

One of the more common requests is to adjust the width of the fields, so with the codes below, we will extend the areas to desired ones.

.wpcf7-textarea {
    width: 90%; 
} 

.wpcf7 input {
    width: 50%;
}

.wpcf7-text {
   width: 50%;
}

How to edit label styles?

Moreover, we can adjust color, font-size, font-family etc of labels with the following CSS:

.wpcf7 label {
    color: #008287;
    font-size: 20px;
    font-weight: bold;
}

How to add styles to submit button?

Let’s also learn how to edit the background and border color of submit button both for active and hover view:

.wpcf7 input[type='submit'] {
    color: #ffffff;
    background-color: #008287;
	border: #008287; 
}
	   
.submit:hover, input[type='submit'].wpcf7-submit:hover {
    color: #ffffff;
    background-color: #3b5998;
    border-color: #3b5998; 
}

Refresh Contact page and enjoy the result of your work. My congratulations! Now, you know how to make the form attractive and eye-catching.

In case you’re searching for premium templates to build a website from scratch, look through WordPress themes.