With over 5 million active users, Contact Form 7 is one of the most popular contact form plugins for WordPress. Their biggest downside is that the out-of-the-box forms you add is very plain looking. Thankfully, Contact Form 7 can be easily styled using CSS in your WordPress theme. In this article, we will be customizing the contact form 7 plugin in WordPress using this guide.
Contact Form 7 allows you to create multiple contact forms using simple HTML markup (which it generates for you).
Once created, each form can be quickly deployed by placing its corresponding shortcode where you’d like the form to appear; in the page, post, or widget area. Messages submitted via the forms are sent to the email address provided in the plugin settings and spam is combatted via support for CAPTCHA and Akismet.
Contact Form 7 is so simple that it seems literally anyone can use it effectively. Styling, too, is intended to be simple. But perhaps too simple for some.
y default, the Contact Form 7 plugin does not style its forms. Any styling they do have is a result of default stylings present in a WordPress theme’s stylesheet. So, keep reading this Contact Form 7 guide tutorial & tips
Basic Contact Form
Unfortunately, this kind of form, while indeed simple and flexible, may not be as beautifully designed as the other elements on one’s website.
Leaving many otherwise happy users looking for alternatives to Contact Form 7 with more styling options. Thankfully, with just a bit of CSS, no plugin alternative is necessary.
In today’s post, I will share a series of tips that will open up many styling possibilities for anyone while Customizing Contact Form 7 using any theme.
Edit The Contact Form 7
It’s important that when adding custom CSS, you do not add it to the style sheet of either Contact Form 7 or your parent theme. Any changes or additions you make there will be overwritten as soon as the theme and/or plugin are updated.
Instead, you will want to add the CSS below to your child theme’s CSS. You can also use the custom CSS feature on Jetpack, or if your theme provides a section in its admin panel for custom CSS you can use that too. Ok, now that we know where to place the styles we’ll be going over below, let’s get started!
Customizing Contact Form 7 WordPress Plugin Guide
Let’s start by making some generals customizing Contact Form 7 that will apply themselves to the whole form. We can do this by using the class selector .wpcf7 and then adding styles beneath it.
(I’d also highly suggest you place the commented-out heading I’ve written below within your style sheet to denote where your Contact Form 7 styles begin.)
/* Contact Form 7 Styles
———————————*/
.wpcf7 {
background-color: #F0F0F0;
border: 5px solid #666666;
}
After adding the above code to your stylesheet, every form you create with Contact Form 7 will have the background and border styles you’ve just defined. Below is an example.
As you can see, there are some spacing issues. To fix this, you’ll want to adjust the margins between the border and the inner form elements. You can do this with the code below.
.wpcf7-form {
margin-left: 25px;
margin-right: 25px;
margin-top: 25px;
On my test site, this resulted in the following:
Note: these styles may affect your forms slightly differently because we’re most likely working with different themes. That doesn’t mean that this code won’t work for you, only that you may have to tweak the numbers a bit to get things right for your site.
Customizing Contact Form Globally
One of the common requests people have when it comes to styling Contact Form 7 is how they can adjust the width of the fields. Particularly the message area, which does not extend very far.
The code below will extend the message area to your desired width (when adjusted). I have set mine in the example for 95% as that is what looked best in my imagined use case. You can set it to suit your needs as well–using a percentage or a fixed pixel count.
.wpcf7-textarea {
width: 85%;
}
You can adjust the width of the other fields as well by adjusting the input class selector.
width: 50%;
}
If you do not want to adjust all of your input fields with the same criteria, you can drill down a bit by selecting just those you are interested in. In the example below, I’ve opted to change my text fields so that my submit button is not affected.
width: 50%;
}
After all of the above changes, I could style the form you see below.
I didn’t want to change my button color, but I think that is most likely another common desire. So if you’d like to alter your button color, you can use the CSS below to experiment.
.wpcf7-submit {
background: #555555;
color: #ffffff;
}
With these bits of CSS in place, every form created with Contact Form 7 will look like the final image above. But what happens when you want one state, in particular, to look different from all others?
How to Style a Specific Form
Getting the specific CSS ID required to make style edits to a specific form can be a bit of a bother, but it is possible with a little tinkering.
The first thing you’ll want to do is add the form shortcode to your site and preview it. (You’ll notice that within that shortcode, there is a number for the ID–but that is not the complete ID you will need.)
Then, using either Google Chrome’s inspect element feature or something similar in another browser, take a look at the code for the form. Using this, you will find the complete form ID.
In my case, the ID number in my shortcode was 4407. The full ID turned out to be wpcf7-f4407-p4405-o1. This meant that I could make further edits, just to that specific form, by using the code below with various criteria that differed from my site-wide settings.
#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}
Customizing Contact Form 7 Fields
You can do the same thing with specific fields. Instead of tracking down a specific CSS class or ID in your browser, all you have to do is add it in the form builder.
When you generate a tag to place in the form builder, you will notice two options for creating an ID, a Class, or both.
In this example, I chose to create a class called customized-field. If you do the same (or something similar), you will then be able to style just that field using your new id (or class), as I have below.
#customized-field {
color: #ffffff;
border: 2px solid #333333;
}
Custom Form for Checkboxes & Buttons
By default, checkboxes and radiuses display from left to right. But because of personal preference or a specific use case in which displaying them top to bottom might be preferable, you can use one of the two options below.
To display your checkboxes or radial buttons top to bottom and on the left, use this.
display: block;
}
To display your checkboxes and radial buttons from top to bottom and on the right, use this. Also, be sure that when you generate the tag for this option, you choose the “label first” checkbox.
.wpcf7-list-item {
display: table-row;
}
.wpcf7-list-item * {
display: table-cell;
}
Removing Fields Titles
This tip does not require using CSS like the others above but rather a simple tweak to the markup used in the Contact Form 7 form builder.
Sometimes it isn’t necessary to have field titles, especially when you can put placeholder text within the fields that explain what information belongs there.
If that’s the case on your site, then all you have to do is delete the titles in the form builder and add placeholding text, as I have done in the example below.
<p></p>
<p>[email* your-email placeholder “Email Address”]</p>
<p></p>
<p>[textarea your-message placeholder “Talk to me”]</p>
The result is a cleaner form with less clutter.
Final Words
I hope I’ve shown in the examples above the way to customize the Contact Form 7 plugin. True, it does require a bit of tinkering, but for a free plugin, that might be expected.
The lack of styling options by default is a big part of why the plugin works so well for so many. So it’s only fair that anyone getting a lot of value from it who wants more style to commit a few minutes to drop in a version of one of the code examples above.
Do you have any Contact Form 7 style tips of your own? Any favorites you’ve used that you’d like to share? Drop us a line in the comments below!
