With over 1 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 are very plain looking. Thankfully, Contact Form 7 can be easily styled using CSS in your WordPress theme. In this article, we will show you how to style contact form 7 forms in WordPress.
Note:Β We donβt recommend Contact Form 7 plugin anymore. Instead, we recommendΒ WPForms, which is the most beginner friendly contact form plugin. You can also downloadΒ WPForms LiteΒ for free.
We have a step by step guide onΒ how to create contact form in WordPress.
Getting Started
We are assuming that you have already installedΒ Contact Form 7Β plugin and have created your first contact form. The next step is to copy theΒ shortcodeΒ for your contact form and paste it in a WordPress post or a page where you would like your form to appear.
For the sake of this article, we have used the default contact form and added it into a WordPress page. This is how the contact form looked on our test site.
As you can see that the contact form inherits some form styles from your WordPress theme. Apart from that itβs very basic.
We will be styling Contact Form 7 forms usingΒ CSS. All the CSS goes into your theme orΒ child themeβs stylesheet.
Styling Contact Form 7 Forms in WordPress
Contact Form 7 generates a very useful and standard compliant code for the forms. Each element in the form has a proper ID and CSS class associated with it.
Each contact form uses the CSS class .wpcf7Β which you can use to style your form.
In this example we are using a Google font Lora in our input fields. SeeΒ how to add Google Fonts in WordPress.
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;
}
This is how our contact form looked after applying this CSS.
Styling Multiple Contact Form 7 Forms
The problem with the CSS we used above is that it will be applied to all Contact Form 7 forms on your website. If you are using multiple contact forms and want to style them differently, then you will need to use the ID generated by contact form 7 for each form.
Simply open a page containing the form you want to modify. Take your mouse to the first field in the form, right click and select Inspect Element. The browser screen will split, and you will see the source code of the page. In the source code, you need to locate the starting line of the form code.
As you can see in the screenshot above, our contact form code starts with the line:
<div role=”form” class=”wpcf7″ id=”wpcf7-f201-p203-o1″ lang=”en-US” dir=”ltr”>
The id attribute is a unique identifier generated by Contact Form 7 for this particular form. It is a combination of form id and the post id where this form is added.
We will use this ID in our CSS to style our contact form. We will replace .wpcf7 in our first CSS snippet with #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
Many WordPress beginners donβt have any experience of writing CSS, and they donβt want to spend time learning it. Luckily, there is a wonderful solution for beginners that will allow you to not just style your contact form but almost every aspect of your WordPress site.
Simply install and activate theΒ CSS HeroΒ plugin and go to the page containing your form. Click on theΒ CSS HeroΒ toolbar and then click on the element you want to style. CSS Hero will provide you an easy user interface to edit the CSS without ever writing any code.
See our complete review of CSS Hero and how to use it to style anything on your WordPress site. You can use CSS Hero coupon code PluginthemehubΒ to get exclusive 34% off discount.
Thatβs all we hope this article helped you learn how to style Contact Form 7 forms in WordPress. You may also want to see our guide onΒ how to add a contact form popup in WordPress.
If you liked this article, then please subscribe to ourΒ YouTube ChannelΒ for WordPress video tutorials. You can also find us onΒ TwitterΒ andΒ Facebook.